- 英文官网: https://vuejs.org/
- 中文官网: https://cn.vuejs.org/
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注 UI, 也可以引入其它第三方库开发项目
在网址https://cn.vuejs.org/v2/guide/installation.html
点击开发版本下载
开发版本：包含完整的警告和调试模式，更加适合于开发者使用
生产版本：删除了警告，整体更加小，适用于项目完成后的部署上线使用
在HTML网页中使用script标签引用
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
插值语法：
el:类似于选择器
指令语法：
数据绑定
单向数据绑定
1.语法：v-bind:href="xxx"或简写为 :href
v-bind给标签属性动态添加数据
2.特点：数据只能从data流向页面
v-model:实现表单输入和应用状态之间的双向绑定
注：v-model只能应用在表单类元素（输入类元素）上
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有两种写法
1.el有两种写法
（1）new Vue时配置el属性
（2）先创建Vue实例，随后再通过vm.$mount（‘#root’）指定el的值
2.data有两种写法
（1）对象式
（2）函数式
如何选择：目前哪种写法都可以，到后面学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则
由Vue管理的函数，一定不要箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
M:模型（Model）:对应data中的数据
V:视图（View）:模板
vm:视图模型（ViewModel）：Vue实例对象
MVVM模型
1.M：模型（Model）：data中的数据
2.V：视图（View）：模板代码
3.VM：视图模型（ViewModel）:Vue实例
观察发现：
1.data中所有的属性，最后都出现在了VM身上。
2.VM身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
传参数
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件。其中xxx是事件名。+
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数。this的指向是vm 或 组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一样，但后者可以传参；
出现的问题：弹出了提示框，但是又跳转到了百度
要求：只弹出提示框，不进行百度跳转
prevent：阻止默认行为
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素是才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
阻止事件冒泡（常用）；
事件只触发一次（常用）；
stop与prevent连用
@keyup
Vue中常用的按键别名：
回车=》enter
删除=》delete（捕获"删除"和"退格"键）
退出=》esc
空格=》space
换行=》tab
上=》up
下=》down
左=》left
右=》right
computed
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算的来
2.原理：底层借助了object.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
（1）初次读取时会执行一次
（2）当依赖的数据发生改变时会被在次调用
4.优势：与methods实现相比，内部有缓存机制（复用）。效率更高，调用方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
使用之前知识点的写法：
监视属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：
（1）new Vue时传入watch的配置
（2）通过vm.$watch监视
条件v-if
v-if-else
v-else-if
根据条件展示元素
v-model用户输入双向绑定数据
复选框（checkbox）
多个复选框
单选按钮
下拉选项
用 v-for 渲染的动态选项：
.lazy:移除输入框时更新数据
.number:把输入框中输入的字符串自动转换为数字
.trim:去除输入框两边的空白
注：使用组件传输值，data必须是函数
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
props:props是单向绑定的
当父组件的属性变化时，将传导给子组件，但是反过来不会。
每次父组件更新时，子组件的所有 prop 都会更新为最新值。
不要在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
在两种情况下，我们很容易忍不住想去修改 prop 中数据：
1.Prop 作为初始值传入后，子组件想把它当作局部数据来用；
2.Prop 作为原始数据传入，由子组件处理成其它数据输出。
对这两种情况，正确的应对方式是：
定义一个局部变量，并用 prop 的值初始化它：
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/27220.html