1、安装 — Vue.js 点击点进去下载开发版本生产版本的引用文件
2、编写helloworld
建立html 文件, 在head引入vue.js
在body里编写容器,在js代码里面编写vm对象 ,在对象里面指定容器
红色的是容器 ,绿色的是vue实例,目前的数据还是写死,所以需要在绿色里的紫色维护好数据,在指定的时候自然而然就把数据传过去了(从而实现不用操作真实dom)
最终案例 :另外可以把const x去掉 (多余)
总结:
vue实例是指new的vue,配置对象是指el、data这些参数
项目运行之时,vue实例拿到vue模板 -》 解析模板,替换数据-》获得新的dom
(即data中的数据一旦发生改变,那么页面中用到该数据的地方也会自动更新)
注意1:一个vue实例只能对应一个vue模板 一对一的关系。在以后的开发只有一个vue实例和vue模板,但实例里面可以有很多组件
注意2:
3、指令语法 vue的指令都是v-开头
{{ }}这种事插值语法,下图是使用v-bind的指令使“ ”里面的字符串变成表达式 。v-bind的意思是让url表达的结果绑定给href 。 v-bind可以简写成:
插值语法用于标签体内容 ,指令语法用于解析标签
表达式可以看到data里面的所有属性。
4、数据绑定
v-bind只是单向绑定 v-model 双向绑定
4.1 、el 与data的两种写法
总结:
5、MV VM模型
vue参考了MVVM模型 ,vm就是vue
具体代码例子:
总结:
6、数据代理
6.1、回顾object。difineproperty方法 ---给对象追加属性
6.2、什么是数据代理
数据代理:通过一个对象 代理 对另外一个对象中的属性的操作(读写)
obj是可以操作x,但是现在更高级了,通过obj2也可以操作x,是为数据代理。
6.3、vue如何使用数据代理
查看数据简单,但是修改有点特殊,虽然通过前端可看出结果,但setter具体结果呢,data一开始就传给vue了,但是后面就没了,不是全局对象。vue存给了_data。
f12控制台输入vm 看到的 _data=data
_data.name是等于name,但是在页面模板写{{_data.name}} 太麻烦,直接写{{data.name}}
总结:
7、事件处理
8、计算属性