Vue2-指令语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_53801014/article/details/147416437

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中的标识符)就是这个按钮2
                console.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>