一、Vue简介
概述：动态构建 用户界面 的 渐进式 框架
动态构建：虚拟DOM
用户界面
网络异常，图片无法展示
|
渐进式
网络异常，图片无法展示
|
作者
网络异常，图片无法展示
|
特点
声明式编码、遵循MVVM原则- 编码简单、体积小
- 组件化、复用率高、代码维护容易
vue2官网资源：https://v2.cn.vuejs.org/
二、模板语法
2.1 插值语法
概述：解析标签体内容、可以解析表达式（可以返回值）
<div id="root"> <h2> HELLO {{name.toUpperCase()}}</h2> </div> //HELLO VUE
2.2 指令语法
概述：解析标签属性、内容、事件，这里在下面的数据绑定举例
<input type="text" v-bind:value="author">
三、数据绑定
3.1 单向数据绑定
概述：data=>页面
网络异常，图片无法展示
|
<html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="root"><!-- 单向：<input type="text" v-bind:value="oneWay"> --><!-- 简写 --> 单向：<inputtype="text":value="oneWay"></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ oneWay:'data=>页面' } }) </script></html>
3.2 双向数据绑定
概述：data<=>页面
网络异常，图片无法展示
|
<html><head><metacharset="UTF-8"/><title>数据绑定</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="root"><!-- 双向：<input type="text" v-model:value="twoWay"> --><!-- 简写 --> 双向：<inputtype="text"v-model="twoWay"></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。newVue({ el:'#root', data:{ twoWay:'data<=>页面' } }) </script></html>
四、写法区别
4.1 el写法
概述
实例化对象时配置- 先
实例化，然后挂载
网络异常，图片无法展示
|
<html><head><metacharset="UTF-8"/><title>el挂载数据</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="root"><h1>你好 {{name}}</h1></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。constvm=newVue({ // 法一// el:'#root',data:{ name:'VUE' } }) // 法二vm.$mount('#root'); </script></html>
4.2 data写法
概述
- 对象式
- 函数式（组件必须使用）
网络异常，图片无法展示
|
<html><head><metacharset="UTF-8"/><title>data挂载数据</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><divid="root"><h1>你好 {{name}}</h1></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。constvm=newVue({ el:'#root', // 对象式/* data:{ name:'VUE' } */// 函数式data(){ return{ name:'VUE' } } }) </script></html>
五、MVVM模型
概述：参考MVVM模型，应用到VUE中
网络异常，图片无法展示
|
View：模板、页面的DOM结构
ViewModel：桥梁关系，有以下两个作用
- DOM监听
- 数据绑定
Model：代码的data数据对象
网络异常，图片无法展示
|
特点
- 在模板直接使用
vm属性 data数据直接挂载到vm身上
六、数据代理
概述：通过一个对象代理另一个对象属性的操作，这里先将数据代理，后面的数据劫持、检测后面细讲
我们代码中的data对象数据经过一番操作后变成_data挂载到vm上面，但每次访问数据只能通过_data访问不方便，VUE便直接代理到vm身上，原理图如下所示：
网络异常，图片无法展示
|
实践证明，数据一致
网络异常，图片无法展示
|
七、事件处理
7.1 基本使用
概述：绑定事件，在methods调用
<button v-on:click="showInfo1">按钮1</button> <button @click="showInfo2($event,666)">按钮2</button>
注意
methods对象最终直接挂载到vm-
网络异常，图片无法展示|
- 注意
this指向、谨慎使用箭头函数 - 传入参数时，第一个注意不要覆盖函数自带的
event
7.2 修饰符
prevent：阻止默认事件（常用）stop：阻止事件冒泡（常用）once：事件只触发一次（常用）capture：使用事件的捕获模式self：只有event.target是当前操作的元素时才触发事件passive：事件的默认行为立即执行，无需等待事件回调执行完毕
7.3 键盘事件
概述：键盘触发事件、比如按下某个按键触发事件
7.3.1 系统提供
回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用，tab会失去焦点) 上 => up 下 => down 左 => left 右 => right
<input type="text" placeholder="键盘事件" @keyup.tab="showInfo">
7.3.2 原始key值
概述：单词要小写、多个单词使用-分割
<inputtype="text"placeholder="键盘事件"@keyup.p="showInfo"><inputtype="text"placeholder="键盘事件"@keydown.f2="showInfo">
7.3.3 系统修饰键
ctrl、alt、shift、meta
注意
- 配合
keydown使用，正常触发事件 - 配合
keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
八、计算属性
概述：根据data已有的属性计算新的属性值
原理：底层借助了Objcet.defineproperty方法提供的getter和setter
网络异常，图片无法展示
|
<html><head><metacharset="UTF-8"/><title>姓名案例_计算属性实现</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><divid="root"> 姓：<inputtype="text"v-model="firstName"><br/><br/> 名：<inputtype="text"v-model="lastName"><br/><br/> 全名：<span>{{fullName}}</span><br/><br/></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。constvm=newVue({ el:'#root', data:{ firstName:'张', lastName:'三', }, computed:{ fullName:{ get(){ returnthis.firstName+'-'+this.lastName }, set(val){ constarr=val.split('-') this.firstName=arr[0] this.lastName=arr[1] } } }, }) </script></html>
简写形式：只需要返回值，不需要修改计算属性的值时使用
computed:{ fullName(){ return this.firstName + '-' + this.lastName } }
注意：
- 只有
get所依赖的数据变化，才会再次调用 - 依赖的数据不变化，直接调用缓存，不调用
get set只有需要修改计算属性的值才会被调用
九、监视属性
概述：监视属性的数据变化，得到newVal oldVal可以比对
网络异常，图片无法展示
|
<html><head><metacharset="UTF-8"/><title>天气案例_监视属性</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 监视属性watch：1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作2.监视的属性必须存在，才能进行监视！！3.监视的两种写法：(1).new Vue时传入watch配置(2).通过vm.$watch监视--><!-- 准备好一个容器--><divid="root"><h2>今天天气很{{info}}</h2><button@click="changeWeather">切换天气</button></div></body><scripttype="text/javascript">Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示。constvm=newVue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ returnthis.isHot?'炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot=!this.isHot } }, watch:{ isHot:{ handler(newVal,oldVal){ console.log('isHot被修改了',newVal,oldVal); } } } }) </script></html>
深度监视：监视整个对象中的数据变化，开始deep:true属性就行
立即执行：immediate:true数据就算不变化，也会先执行一次
简写形式：简单的需求、不需要配置其他属性
//简写属性 watch:{ isHot(newVal,oldVal){ console.log('isHot被修改了',newVal,oldVal); } }
