Vue模板语法
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
//例：
v-bind:href="xxx" //xxx同样要写js表达式，且可以直接读取到data中的所有属性。
数据绑定
-
单向绑定(v-bind)：数据只能从data流向页面。
-
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
3.v-model的三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤
事件处理
事件的基本使用
使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
基本使用
......
@click="operateData"
......
methods:{
operateData(){
alert('回调函数被调用！')
},
}
......
......
@click="operateData"
......
methods:{
operateData(event){
alert('回调函数被调用！',event)
},
}
......
传递参数
......
@click="operateData('参数')"
......
methods:{
operateData(str){
alert('回调函数被调用！',str)
},
}
......
......
@click="operateData($event,''参数)"
......
methods:{
operateData(event,str){
alert('回调函数被调用！',event,str)
},
}
......
Vue中的事件修饰符
-
prevent：阻止默认事件（常用）；
-
stop：阻止事件冒泡（常用）；
-
once：事件只触发一次（常用）；
-
capture：使用事件的捕获模式；
-
self：只有event.target是当前操作的元素时才触发事件；
-
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
//例：
@click.prevent="operateData"//默认事件被阻止，prevent修饰符在vue3被移除
@click.once="operateData"//点击事件只能被触发一次
键盘事件
Vue中常用的按键别名：
-
回车 => enter
-
删除 => delete (捕获“删除”和“退格”键)
-
退出 => esc
-
空格 => space
-
换行 => tab (特殊，必须配合keydown去使用)
-
上 => up
-
下 => down
-
左 => left
-
右 => right
@keydown.enter="operateData"//按下回车触发事件
@keyup.enter="operateData"
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键
系统修饰键有：ctrl、alt、shift、meta。其用法比较特殊
-
配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
-
配合keydown使用：正常触发事件。
使用keyCode指定具体的按键
......
@keydown="operateData"
......
methods: {
operateData(event){
if(event.keyCode === 13){
console.log('keyCode为13的按键被点击了！！')
}
}
},
......
定制按键别名 Vue.config.keyCodes.自定义键名 = 键码
......
@keydown.huiche="operateData"
......
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
计算属性和侦听器
vue中的绑定样式
class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
条件渲染
v-if
写法
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
v-show
写法
v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
v-for
语法
v-for="(item, index) in xxx" :key="yyy"
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
过滤器
定义
对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
过滤器在vue3中被移除
语法
注册过滤器
Vue.filter(name,callback) 或 new Vue{filters:{}}
//例：显示时间
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
......
data:{
time:1621561377603, //时间戳
},
//局部过滤器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
return dayjs(value).format(str)
}
}
})
使用过滤器
{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
<!-- 过滤器实现 -->
<h3>现在是：{{time | timeFormater}}</h3>
<!-- 过滤器实现（传参,过滤器连用） -->
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
vue其他指令
v-text
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
-
v-html会替换掉节点中所有的内容，{{xx}}则不会。
-
v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
1.在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
2.一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-cloak
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
//在css中写入样式
[v-cloak]{
display:none;
}
<h2 v-cloak>{{XXX}}</h2>
v-once
渲染一次
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre
跳过编译
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
自定义指令
定义语法
(1).局部指令：
new Vue({
......
directives:{
//自定义函数何时会被调用？
//1.指令与元素成功绑定时（一上来）。
//2.指令所在的模板被重新解析时。
自定义名称(element,binding){//函数式
console.log(this) //注意此处的this是window
element.innerText = binding.value * 10
},
自定义名称:{//方法式
//指令与元素成功绑定时（一上来）
bind(element,binding){},
//指令所在元素被插入页面时
inserted(element,binding){},
//指令所在的模板被重新解析时
update(element,binding){}
}
}
})
(2).全局指令：
Vue.directive('自定义名称',()=>{})
Vue.directive('自定义名称',{})
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
生命周期
vue组件
关于VueComponent
1.vue组件本质是一个名为VueComponent的构造函数，是Vue.extend生成的。
2.Vue解析到<自定义组件/>时会创建自定义组件的实例对象，即Vue自身执行new VueComponent(options)。
每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
一个重要的内置关系
VueComponent.prototype.proto === Vue.prototype
vue实例中遇到【自定义组件标签】时才会把【组件实例化】，即创建一个VueComponent实例，每个VueComponent实例都不相同。
为什么要有这个关系：
- 让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
render函数的作用
- 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示，vue3移除了生产提示
Vue.config.productionTip = false
/*
关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
(模板解析器体积占比大,项目打包上线后模板解析器就没有用了，所以不需要参与打包)
*/
//创建Vue实例对象---vm
new Vue({
el:'#app',
//render函数完成了将App组件放入容器中的功能
render: h => h(App),
})
ref属性
-
被用来给元素或子组件注册引用信息（类似id）
-
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用
打标识：`<h1 ref="xxx">.....</h1>`
获取：`this.$refs.xxx`
mixin(混入)
功能：可以把多个组件共用的配置提取成一个混入对象
作用：复用组件内配置项
使用
定义：
//创建一个js文件，对外暴露
export default {
data(){....},
methods:{....}
....
}
使用：
全局混入：`Vue.mixin(xxx)`
局部混入：`mixins:['xxx']`
scoped样式
作用：让样式在局部生效，防止冲突。
写法：<style scoped>
nextTick
语法
this.$nextTick(回调函数)
作用
在下一次 DOM 更新结束后执行其指定的回调。
或者说是vue执行完本次渲染后会执行this.nextTick()里面的回调函数。
使用
因为Vue 在更新 DOM 时是
异步执行的，所以无法立即获得本次数据更改后的DOM节点，需要使用nextTick()。 当改变数据后，要基于更新后的新DOM进行某些操作时，可以在nextTick所指定的回调函数中执行。
