一、初始vue
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
3.root容器里的代码被称为[Vue模板]。
4.Vue实例和容器是一一对应的。
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用。
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。
二、Vue的特点
1.采用组件化模式，提高代码复用率且让代码更好维护。
2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。
3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
三、Vue的语法
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件等等.....)
举例：v-bind：href="xxx" 或简写为：href="xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中很多的指令，且形式都是：v-xxxx。
四、Vue的2种数据绑定方式
1.单向绑定（v-bind)：数据只能从data流向页面。
2.双向绑定（v-model)：数据不仅能从data流向页面，还可以从页面流向data。如
//v-model双向绑定实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双向数据绑定</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="username" placeholder="请输入用户名">
<p class="username" v-show="username=='乐乐'">用户名太受欢迎，请换一个</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data() {
return{
username:"",
//提示语
isRepeat:false
}
},
methods:{
}
})
</script>
</body>
</html>下面是运行结果
当我们运行后，点击后面那支笔 就可以把我们想要改变的内容写上就可以从后台把数据传递给页面，这就是v-model的作用。而且，当我们想要设置多种选项时也可以用v-model来写，如
注意：
①双向绑定一般都应用在表单类元素上，如：input、select等。
②v-model：value可以简写为v-model，因为v-model默认收集的就是value值。
如下代码是错误的，因为v-model只能应用在表单类元素（指输入类元素上）
<h1 v-model:x="name">你好</h1>
五、el和data的两种写法：
1.el有两种写法：
①new Vue时候配置el属性，如
new Vue({
el:"#root",
data(){
return{
}
}
})
②先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法：
①对象式：data:{}
②函数式：data(){
reutrn{ }
}
注意：当我们要用到组件时data必须使用函数式，否则会报错。
3.一个重要的原则 :由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
六、Vue中的数据代理
1.通过vm对象来代理data对象中属性的操作（读/写）
2.好处：更加方便的操作data中的数据。
3.基本原理：
①通过Object.defineProperty()把data对象中所有属性添加到vm上。
②为每一个添加到vm上的属性，都指定一个getter/setter。
③在getter/setter内部去操作（读/写）data中对应的属性。
1427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
