中文官网地址：https://cn.vuejs.org/ 英文官网地址：https://vuejs.org/
一套用户构建用户界面的渐进式JavaScript框架。
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
- root容器里的代码被称为【Vue模板】
- 容器与实例一一对应
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{ xxx}}插值中的xxx可以自动读取到data中的所有属性；
- 一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新（数据劫持）
- 注意区分：js表达式 和 js代码（语句）
(1)表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方； a a+b demo(1) x===y?‘a’:‘b’
(2)js代码（语句） if(){} for(){} - Vue模板语法有2大类：
(1)插值语法： 功能：用于解析标签体内容。 写法：{{xxxx}},xxx是表达式，且可以直接读取到data中所有属性。
(2)指令语法： 功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）
举例：v-bind:href=‘xxxx’
或简写为:href=‘xxxx’,xxxx要写js表达式且可以直接读取到data中所有属性。
举例：
(1)v-on:click=‘xxxx’ 或简写为@click=‘xxxx’ ，其中xxx是事件名
(2)事件的回调需要配置在methods对象中，最终会在vm上；
(3)methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件事例对象；
(4)@click=“demo” 和 @click="demo($event)"效果一致，但后者可以传参
- Vue数据绑定有2种：
(1)单向绑定(v-bind):数据只能从data流向页面。
(2)双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。 备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值
- data与el的写法有2种：
el有2种写法
(1)new Vue时候配置el属性
(2)先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值
data有2种写法
(1)对象式
(2)函数式 - 一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
- 直接引入CDN路径或下载到本地资源进行引入（本地资源参考下载中的内容）
A.引入开发版本,控制台提示解决方法：
1.安装开发调试工具，资源在下载中
2.Vue.config.productionTip = false（ 阻止 vue 在启动时生成生产提示）
B.引入生产版本:
NPM引用,搭配命令行工具
M：模型（Model）:data中的数据
V：视图（View）:模板代码
VM:视图模型(ViewModel):Vue实例
观察发现：
data中所有的属性，最后都出现再了vm身上。
vm身上所有的属性 及 Vue原型上所有属性，在Vue模板上都可以直接使用
Object.defineProperty用法
定义：通过一个对象代理对另一个对象中属性的操作（读/写）
总结：
- Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写） - Vue中数据代理的好处：
更加方便的操作data中的数据 - 基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性
- vue会监视data中所有层次的数据。
- 如何检测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要检测的数据。
（1）对象中后追加的属性，vue默认不做相应式处理
（2）如需给后添加的属性做响应式，请使用如下API:
Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value) - 如果检测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新。
（2）重新解析模板，进而更新页面。 - 在Vue修改数组中的某个元素一定要用如下方法：
（1）使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
（2）Vue.set() 或 vm.$set()特别注意：Vue.set()和vm.$set()不能给vm或vm的根对象添加属性！！！！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/16044.html