vue2_初识vue


1、初识vue

前置工作(搭建vue环境和安装浏览器调试工具)

给浏览器安装Vue Devtools 插件

引入 Vue包,vue包引入有下面两种方式:

页面引入(标签)又分为本地引入和CDN引入(script标签的src是一个在线的链接)

(可选)阻止vue在启动时生成生产提示 Vue.config.productionTip = false(自己创建一个script标签里面设置即可)

favicon需要将页签图标放在项目根路径,重新打开就有了(shfit+F5强制刷新)

初识vue

1、想让Vue工作,就必须创建个Vue实例, 且要传入一个配置对象;

2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法

3、root容器里的代码被称为 Vue模板

4、Vue实例和容器是一一对应的,也就是一个vue实例只能绑定一个容器,可以有多个实例,只要不把这些实例都绑定到同一个容器身上即可,也就是绑定给不同容器;

5、真实开发中只有一个Vue实例,并且会配合着组件一起使用;

6、{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
注意区分:js表达式和js代码。js表达式是能够产生一个值的,也就是在js代码中可以用一个变量接收的,也属于js代码的一部分。js代码指的就是if、for等。

7、一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;

hello案例




    
    
    
    初始vue
    
    



    
    

hello: {{name.toUpperCase()}},我在:{{city}}

结果:

打开给浏览器安装的插件可以调试vue