vue常用指令
npm i @vue/cli -g //全局安装vue脚手架
vue -V //查看安装成功
vue create 项目名 //新建项目
npm run serve//启动项目
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,//关闭eslint
})
data(){
//要求必须是函数返回一个对象格式
}
小胡子写法中只能放入变量和表达式，不能写语句（for，if一类的） vue的指令：v-xxx的行内属性 v-model 一般用在表单元素或者组件中 v-cloak
v-cloak 解决小胡子显示问题，提高用户感官。
当vue挂载前渲染html会出现很多未处理的小胡子，
vue会把v-cloak当做行内属性，在vue渲染完成前加在行内，渲染完成后完成后删除这个属性，
我们可以在该属性上添加样式从而隐藏未处理的小胡子
v-pre 优化型指令 给不用vue处理的结构添加，提高性能 v-html 利用的原生innerHTML，识别结构，不可用在用户提交内容上，容易导致 xss攻击
str:'<i>111</i>'
<div v-html='str'></div>
//111(链接形式显示)
v-text 利用原生的innerText，不识别结构
str:'<i>111</i>'
<div v-text='str'></div>
//<i>111</i>（文本形式显示）
-
v-show 控制元素是否显示 有较大的的初始加载开销
-
v-if 控制元素是否加载 有角的切换开销
-
v-for和v-for...of
<ul>
<li v-for="(b, a) in ary" :key="b">{{ b }}--{{ a }}</li>
<li v-for="(a,b,c) of obj1" :key="a">{{a}}--{{b}}--{{c}}</li>
</ul>
export default {
data() {
return {
ary: [111, 222, 333],
obj1: {
q: 1,
w: 2,
e: 3,
r:{
aa:1
}
},
};
},
};
111--0
222--1
333--2
1--q--0
2--w--1
3--e--2
{ "aa": 1 }--r--3
key用来提升虚拟dom的diff（判断不同）算法效率，diff算法同层比较
vue的虚拟DOM：使用js对象（vnode类的实例）模拟真实DOM，虚拟DOM是vue实例this中的VNode，路径在./vue/src/core/vnode/vnode.js中
- v-bind 用来处理行内属性指令，简写为： v-bind在处理class和style上有专门加强
name: "lhl"
class里写语句，满足条件将会把该类名进行绑定，反之。
<h1 :qqq="{box:name.lenght>=3}"
:class="{box:name.lenght>=3}">
v-bind对class和style有加强
</h1>
<div :style="{color:'red'}">
v-bind对class和style有加强
</div>
渲染后的DOM,非class和style里面写对象会直接输出object
<h1 data-v-10b7156c="" qqq="[object Object]" box="">v-bind对class和style有加强</h1>
v-bind踩坑：问题：动态绑定class无效。解决：标签删除，之后先写:class的语句。
v-bind修饰符
.sync 组件时候
@keydown.enter="fn" 在焦点按下“回车”自行后面的函数
//
plus(a,e) {
console.log(a,e);
this.num+=10;
},
//html
<input type="text" v-model="num" @keydown.enter="plus(10)">
//回车后对num+10
- v-on专门处理事件的指令，简写@
<div>{{ num }}</div>
methods: {
//methods中的方法不能写成箭头函数，箭头函数的this不能保证；
//里面的函数中的this都是当前实例
//这里的属性都会变成当前实例的私有属性
//实参$event或e与形参e相对应，事件
plus(a,e) {
console.log(a,e);
this.num+=10;
},
},
v-on事件处理指令v-on @的修饰符 @click.stop='fn'//阻止冒泡 @click.prevent=fn//阻止默认事件 @click.self='fn' //只有点击自己的时候才能触发，冒泡无法触发这个执行
- v-model
v-model是 :value和@input 的结合
:value="name" @input="name=$event.target.value"
v-model的修饰符 v-model.lazy 当失去焦点时更新，是:value和@change 的结合, v-model.number 将input的内容使用parseFloat转成数字，转成NaN的就不作为 v-model.trim 去除首尾空格
