目录
模块语法
Vue语法有两大类：
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}} ,xxx是js表达式(注意区分表达式和代码块)，可以直接读取到data中的所有属性
2.指令语法：
功能：用于解析标签(包括：标签属性，标签体内容，绑定事件……)
举例：v-bind：href="xxx"或 简写为 :href="xxx",xxx同样要写js表达式 ，可以读到data中的所有属性
数据绑定
vue中有两中数据绑定的方式
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据不及能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上(如：input、selected……)
2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值
如下代码是错的，因为v-model只能应用到表单类元素(输入类元素)中
<h2 v-model:x="name">您好啊！！！</h2>
MVVM模型
1.M：模型(Model):data中的数据
2.V：视图(View):代码模板
3.VM：视图模型(ViewModel):Vue实例
观察发现：
1.data中的所有的属性，最后都出现在了vm身上
2.vm身上的所有属性以及Vue原型上所有属性，在Vue模板中都可以直接使用
//此处为模板区域
<div id="root">
<h1>名字:{{name}}</h1>
<h1>家乡:{{address}}</h1>
</div>
<script type="text/javascript">
//vm中间商
const vm =new Vue({
el:"#root",
//数据区域
data:{
name:"李华",
address:'北京',
}
})
console.log(vm);Vue中的数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作(可以理解为猫和狗在一起，猫愿意为狗的崽子付出一切，与此同时狗也愿意为猫的崽子付出一切)。
1.vue中的数据代理
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处
更加方便的操作data中的数据
3.基本原理
通过Object.defineProperty()把data对象中所有属性添加到vm属性中，为每一个添加到vm上的属性都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性。
data的数据给_data一份，然后_data对数据进行响应式处理，
事件处理
事件的基本使用
1.使用v-on:xxx或者@xxx 绑定事件，其中xxx是事件
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数，不要用箭头函数，否则this就不是vm了
4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组建实例对象
5.@click=“demo"和@click="demo($event)"效果一致，但是后者可以传参
vue中的事件修饰符
1.prevent：阻止默认事件(常用)
2.stop：阻止事件冒泡(常用)
3.once：事件只触发一次(常用)
4.capture:使用事件的捕获模式
5.self：只有event.target是当前操作的元素时才是触发事件
6.passive：事件的默认行为是立即执行，无需等待事件回调执行完毕
计算属性
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
(1）.初次读取时会执行一次
(2).当以来的数据发生改变是会被再次调用
4.优势：与methods实现相比，内存有缓存机制(复用)，效率更高，调试方便
5.备注：
(1).计算属性最终会出现在vm上，直接读取使用即可
(2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算所依赖的数据发生变化
(3).它返回一个值给页面
监视属性
监视属性watch：
1.当监视的属性发生变化时，回调函数自动调用，进行相关的操作
2.监视的属性必须存在，才能进行监视
3.监视的两种方法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视(实例对象之外)
immediate/ handler配套
深度监视：
(1).Vue中的watch默认不检测对象内部值的改变(一层)
(2).配置deep:true可以监测对象内部值改变(多层)
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以，所以要加上 immediate：true
(2).使用watch时根据数据的具体结构，决定是否采用深度监视
绑定样式
绑定样式：
1.class样式
写法：class="xxx" xxx可以是字符串，对象，数组
字符串写法 适用于：样式的类名不确定需要动态决定
数组写法 适用于：要绑定的样式个数不确定、名字也不确定
对象写法，适用于：要绑定的样式个数确定，名字也确定,但是要动态决定用不用
2.style样式
:style="{fontSize:xxx}"其中xxx是动态值
:style="[a,b]"其中a,b是样式对象
<div id="root">
<!-- 需求：点击的时候normal样式发生变化，变为sad -->
<!-- 绑定class样式 ---字符串写法 适用于：样式的类名不确定需要动态决定 -->
<div class="basic" :class="mood" @click="change">{{name}}</div> <br><br>
<!-- 需求：在最后三属性中随机组合两个 -->
<!-- 绑定class样式--数组写法 适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="arr">{{name}}</div> <br><br>
<!-- 需求：在lu1和lu2属性中随机选择，但是不知道选哪个-->
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定,但是要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br><br>
<!-- 绑定style样式---对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br><br>
<!-- 绑定style样式----数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div> <br><br>
</div>
<script type='text/javascript'>
new Vue({
el:'#root',
data:{
name:'兔子',
mood:'normal',
arr:['lu1','lu2','lu3'],
classObj:{
lu1:false,
lu2:false,
},
styleObj:{
fontSize:'40px'
},
styleObj2:{
backgroundColor:'red'
},
styleArr:[
{
fontSize:'40px'
},
{
backgroundColor:'red'
},
]
},
methods: {
change(){
const arr=['happy','sad','normal']
const index= Math.floor(Math.random()*3);
this.mood=arr[index]
}
},
})
</script>条件渲染
1.v-if
写法：
(1) v-if="条件表达式"
(2) v-else-if="表达式"
(3) v-else="表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但是不能被打断
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到
列表渲染
v-for指令
1.用于展示列表数据
2.语法：v-for='(item,index) in xxx' :key='yyy'
3.可遍历：数组、对象、字符串(用得少) 指定次数(用得少)
面试题：react、vue中的key有什么作用？(key的内部原理)
1.虚拟DOM中的key的作用
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下
(1).旧虚拟DOM 中找到了与新虚拟DOM相同的key
-若虚拟DOM中内容没变，直接使用之前的真实DOM
-若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
(2).旧虚拟中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到页面
3.用index作为key可能会引发的问题
(1).若对数据进行：逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新===>界面效果没问题，但是效率低
(2).如果结构中还包含输入类的DOM:会产生错误DOM更新===>界面有问题
4.开发中如何选择key?
(1).最好使用每条数据的唯一标识作为key，比如id，手机号，身份证号，学号等唯一值
(2).如果不存在对数据的逆序添加、你需删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
Vue数据监测
Vue数据监测的原理
1.vue会监视data中所有层次的数据
2.如何监测对象中的数据
通过setter实现监视，且要在new Vue时就传入要监测的数
(1).对象中后追加的属性，Vue默认不做响应式处
(2).如需给后添加的属性做响应式，请使用如下AP
Vue.set(target,propertyName/index,value)或 vm.$set(target,propertyName/index,value
3.如何监测数组中的数据
通过包裹数组更新元素的方法实现，本质就是做了两件事
(1).调用元素对应的方法对数组进行更
(2).重新解析模板，进而更新页面
4.在Vue修改数组中的某个元素一定要用以下方法
(1).使用这些API：push(),pop(),shift(),unshift(),splice(),sort(),reverse()
(2).Vue.set()或vm.$set()
5.数据劫
如果有人修改了数据马上就会被setter劫持住，收到并修改数据以及重新解析模板，数据劫持vue数据代理都离不开Object.definPropert
注意：Vue.set()和 vm.$set() 不能给vm或者vm的根数据对象添加属性
收集表单数据
收集表单数据：
若：<input type='text'/>,则v-model收集的是value值，用户输入的就是value值
若：<input type='radio'/> 则v-model收集的就是value值，并且要给标签配置value值
若：<input type='checkbox'/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符
lazy：失去焦点在收集数据
number：输入字符串转换为有效的数字
trim：输入首尾空格过滤
<div id="root">
<form @submit.prevent="demo">
<label for="demo">账号：</label>
<input type="text" id="demo" v-model.trim="userinfo.account"><br><br>
<label for="demo1">密码：</label>
<input type="password" id="demo1" v-model="userinfo.password"><br><br>
<label for="demo2">年龄：</label>
<input type="number" id="demo2" v-model.number="userinfo.age"><br><br>
性别：
男<input type="radio" name="sex" v-model="userinfo.sex" value="male">
女<input type="radio" name="sex" v-model="userinfo.sex" value="famale">
<br><br>
爱好：
学习<input type="checkbox" v-model="userinfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userinfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userinfo.hobby" value="eat"><br><br>
所属校区
<select v-model="userinfo.city">
<option value="">请选择校区</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="wh">武汉</option>
</select>
<br><br>
其他信息:
<textarea v-model.lazy="userinfo.other"></textarea><br><br>
<input type="checkbox" v-model="userinfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
<button >提交</button>
</form>
</div>
<script type='text/javascript'>
Vue.config.productionTip=false// 以阻止 vue 在启动时生成生产提示
new Vue({
el:'#root',
data:{
userinfo:{
account:'',
password:'',
age:'',
sex:'',
hobby:[],
city:'',
other:'',
agree:''
}
},
methods:{
demo(){
console.log(JSON.stringify(this.userinfo));
}
}
})
</script>过滤器
定义：对要显示的数据进行特定的格式化后再显示(适用于一些简单的逻辑处理)
语法：
1.注册过滤器：Vue.filter(name.callback)或者 new Vue{filter:{}}
2.使用过滤器：{{xxx|过滤器名}}或者v-bind:属性="xxx|过滤器名"
备注：
1.过滤器也可以接收额外参数，多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据。
<div id="root">
<!-- 过滤器实现（传参）es6中的默认语法 -->
<h3>现在是{{time | timeFormater('YYYY-MM-DD')}</h3>
new Vue({
el:'#root',
data:{
time:1651582650736,//时间戳
},
//局部的过滤器
filters:{
timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){//此处利用es6中的一个形参默认值，有就用新的， 没有就用默认的
// console.log('@',value);
return dayjs(value).format(str)
},
}
内置指令
v-bind：单向绑定解析表达式，可简写为：xxx
v-model:双向数据绑定
v-for：遍历数组，对象，字符串
v-on：绑定事件监听，可以简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示布尔值）
v-text指令：
1.作用：向其所在的节点中渲染文本内容
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}不会
v-html指令
1.作用:向指定节点中渲染包含html结构的内容
2.与插值语法的区别：
（1）.v-html会替换掉节点中所有的内容，{{xx}}则不会
（2）.v-html可以识别html结构
3.严重注意：v-html有安全性问题
(1).在网站上动态渲染任意html是有危险的，容易导致xss攻击
(2).一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上
v-cloak指令(没有值)：
1.本质是一个特殊属性，Vue实例创建解决完毕接管容器后，会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-once指令(没有值)：
1.v-once所在节点在初次动态渲染之后，就是为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre指令(没有值)：
1.跳过其所在节点的编译过程
2.可以利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译
自定义指令
1.定义语法：element，binding参数
(1).局部指令
new Vue({
directives:{指令名：配置对象}
})
或者
new Vue({
directives{指令名：回调函数}
})
(2)全局指令
Vue.directive(指令名，配置对象)或者Vue.directive(指令名，回调函数)
2.配置对象中常用的三个回调
(1).bind:指令与元素成功绑定时调用
(2).inserted:指令所在元素被插入页面时使用
(3).update:指令所在模板结构被重新解析时调用
3.备注
（1）.指令定义是不加v-,但是使用的时候要加v-
（2）.指令名如果是多个单词，要是用kebab-case命名方式，不要使用驼峰命名法
生命周期
生命周期（生命周期回调函数，生命周期函数，生命周期钩子）
1.定义：Vue在关键时刻帮我们调用的一些特殊名称的函数
2.生命周期函数的名字不能更改，但函数的具体内容是程序员根据需求编写的
3.生命周期函数中的this指向是vm或者组建实例对象
常用的生命周期钩子：
1.mounted：发送ajax请求，启动定时器，绑定自定义事件，订阅消息等(初始化操作)
2.beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等（收尾工作）
关于销毁vue实例
1.销毁后借助Vue开发者工具看不到任何信息
2.销毁后自定义事件会失效，但是原生的dom事件仍然有效
3.一般不会在beforeDestroy操作数据，因为即使操作了数据，也在不会触发更新流程了
通过打断点来观察vue的生命周期
<body>
<div id="root">
<h2 v-text="n"></h2>
<h2>当前的n值是:{{n}}</h2>
<button @click="add">点我n+1</button>
<button @click="bye">点我销毁vm</button>
</div>
</body>
<script type='text/javascript'>
new Vue({
el:'#root',
data:{
n:1
},
methods: {
add(){
console.log('add');
this.n++
},
bye(){
console.log('bye')
this.$destroy()
}
},
beforeCreate() {
console.log('beforeCreate');
// console.log(this);
// debugger;
},
created() {
console.log('created');
// console.log(this);
// debugger;
},
beforeMount() {
console.log(' beforeMount');
// console.log(this);
// debugger;
},
mounted() {
console.log('mounted');
// console.log(this);
// debugger;
},
beforeUpdate() {
console.log('beforeUpdate');
// console.log(this.n);
// debugger;
},
updated() {
console.log('updated')
// console.log(this.n);
// debugger;
},
beforeDestroy() {
console.log('beforeDestroy');
// this.add()
},
destroyed() {
console.log(' destroyed')
},
})
</script>
4242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
