当前位置：首页 > news >正文

Vue2-指令语法

news 来源：原创 2025/4/24 12:10:53

v-bind和v-model

<a v-bind:href="url">笔记1</a>
<a :href="url">笔记2</a><input type="text" v-model:value="name"/>
<input type="text" v-model="name"/>data(){return {url:"http://123.57.27.43:9908/mimi/index.html",name:"马朋帅"}
}

例：

<form><!-- 复选框 值为value -->1<input type="checkbox" v-model="userInfo.hobby" value="study">2<input type="checkbox" v-model="userInfo.hobby" value="game">3<input type="checkbox" v-model="userInfo.hobby" value="eat"><!-- 下拉框 --><select v-model="userInfo.city"><option value="">请选择</option><option value="beijing">北京</option><option value="shanghai">上海</option></select><!-- 文本域 体现v-model的修饰符--><textarea v-model.lazy="userInfo.other"></textarea><!-- 复选框 值为布尔值--><input type="checkbox" v-model="userInfo.agree">阅读并接受
</form>
<script>userInfo:{hobby:[],city:'beijing',other:'',agree:''  // v-model的初始值是非数组收集的是checkbox的布尔值}
</script>

v-model只能用于表单元素的value

v-model的三个修饰符：

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

v-on

<button v-on:click="open1">1</button>
<button @click="open2">2</button>
<button @click="open3($event,66)">3</button><script>new Vue({el:"#root",methods:{open1(){console.log("v-on");},open2(){console.log("@");},open3(event,num){console.log(this); //vue对象console.log(event); //$event(vue中的标识符)就是这个按钮2console.log(num);}}})
</script>

事件修饰符

prevent：阻止默认事件（比如：a标签href属性的连接跳转）
stop：阻止事件冒泡
once：事件只触发一次
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发
passive：事件的默认行为立即执行，无需等待事件的回调执行完毕
native：给组件绑定事件。例：<Student @click.native="show()"/>

<body><div id="root"><a href="http://www.baidu.com" @click.prevent="showInfo">a标签</a></div><script type="text/javascript">new Vue({el:"#root",data(){return {name:"马朋帅"}},methods:{showInfo(){alert('事件修饰符')}}})</script>
</body>

捕获模式：盒子从外到内执行元素的绑定事件

冒泡模式：从内到外执行元素的绑定事件（默认使用冒泡模式执行事件）（先捕获后冒泡）

@scroll=“aaa” 滚动条滚动事件，@wheel=“aaa” 鼠标滚轮的滚动事件

@wheel先执行aaa函数，完成后鼠标滚轮滚动（可以用passive解决），@scroll无此类问题

@click.prevent.stop 可以连写

v-if和v-show

v-if：把元素去掉或显示（用于切换少）

v-if="“和v-else-if=”“和v-else=”"要一起用必须连这写

v-show：把元素隐藏或显示（用于切换频繁）

v-for

<div id="root"><!-- 遍历数组 --><ul><li v-for="(p,index) of persons" :key="index">{{p.name}}</li></ul><!-- 遍历对象 --><ul><li v-for="(value,key) of car" :key="key">{{key}}-{{value}}</li></ul><!-- 遍历字符串 --><ul><li v-for="(char,index) of str" :key="index">{{index}}-{{char}}</li></ul><!-- 遍历指定次数 --><ul><li v-for="(num,index) of 6" :key="index">{{index}}-{{num}}</li></ul></div>
<script type="text/javascript">new Vue({el: "#root",data() {return {persons: [{id:'001',name:'张三'},{id:'002',name:'李四'},{id:'003',name:'王五'}],car:{name: '张三',age: 18},str: 'hello',}}})
</script>

key 的原理

用index作为key可能会引发的问题：

若对数据进行：逆序添加（在数组前面插入元素）、逆序删除（删除数组前面，中间的数据）等破坏顺序的操作:

会产生没有必要的真实DOM更新 ==> 界面没问题（效率低）

原因：一次页面渲染前后key对应的元素相同会复用（因为在数组最前面添加元素，index都会往后移一个，key对应的元素跟以前对不上不会复用）

如果结构中还包含输入类的DOM（比如：Input框）：

会产生错误DOM更新 ==> 界面有问题（效率低）。

原因：一次页面渲染前后key对应的元素相同会复用，Vue不会变的Input的value只判断他的结构，结构相同会复用可能Input的value不同页面发生错误

开发中如何选择key（以上问题的解决方法）:

a. 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。

b. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

v-text和v-html

<div id="root"><div>{{name}}</div><div v-text="name"></div><div v-html="nameMmm"></div>
</div>
<script type="text/javascript">new Vue({el: "#root",data() {return {name : "张三",nameMmm: "<a href='#'>张三</a>"}}})
</script>

v-cloak

vue文件加载慢的时候页面可能出现 {{name}}

解决方法（两种）：

（第一种）把vue.js文件放在HTML文件的前面head里面

（第二种）v-cloak，用法：在有上述问题的标签上加v-cloak标签，当加载到vue.js文件后，就会去除该标签

<head><style>[v-cloak]{display: none;}</style>
</head>
<body>
<div id="root"><div v-cloak>{{name}}</div>
</div>
<script type="text/javascript">const vm = new Vue({el: "#root",data() {return {name : "张三",}}})
</script>

v-once和v-pre

v-once:页面第一次加载的时候读取变量，之后变量变化值不改变

<div id="root"><div v-once>{{n}}</div><div>{{n}}</div><button @click="n++">n++</button>
</div>
<script type="text/javascript">new Vue({el: "#root",data() {return {n : 1,}}})
</script>