Vue指令学习

最新推荐文章于 2023-08-18 16:57:00 发布

lTeAmol

最新推荐文章于 2023-08-18 16:57:00 发布

阅读量271

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/lTeAmol/article/details/128861396

版权

六类指令

内容渲染指令：
1）v-text：作为属性使用，但会覆盖元素内部原有的内容；
2）{{}}插值表达式：实际开发中用的最多，只是内容的占位符，不覆盖原有的，但不能渲染带标签的数据，只能用在内容节点，不能用在属性节点；
3）v-html：可以把带有标签的字符串，渲染成真正的HTML内容。

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <p v-text="username">姓名：</p>
        <p v-text="gender">性别：</p>
        <hr>
        <p>姓名：{{username}}</p>
        <p>性别：{{gender}}</p>
        <hr>
        <div v-text="info"></div>
        <div>{{info}}</div>
        <div v-html="info"></div>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                username:'张三',
                gender:'女',
                info:'<h4 style="coler:red;font-weight:bold">欢迎！</h4>'
            }
        })
    </script>
</body>

属性绑定指令：
1）v-bind：可使用v-bind:指令为元素属性动态绑定值，简写：，若绑定内容需要动态拼接，则字符串外面需包裹单引号，比如：<div :title="'box'+index">这是一个div</div>；

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <input type="text" v-bind:placeholder="tips">
        <hr>
        <img :src="photo" alt="" style="width:150px">
        <hr>
        <div>1+2结果是：{{1+2}}</div>
        <div>{{tips}}反转的结果是：{{tips.split('').reverse().join('')}}</div>
        <div :title="'box'+index">这是一个div</div>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                tips:'请输入用户名',
                photo:'https://v2.cn.vuejs.org/images/logo.svg',
                index:3
            }
        })
    </script>
</body>

事件绑定指令：
1）v-on：使用v-on:指令为元素绑定事件，可以通过()传递参数，简写@，

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <p>count的值是：{{count}}</p>
        <!-- 在绑定事件处理函数时可以通过()传递参数 -->
        <button v-on:click="add(2)">+1</button>
        <button @click="sub">-1</button>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                count:0
            },
            // 定义事件的处理函数
            methods: {
                add:function(n){
                    // alert(1)
                    // console.log(vm === this)
                    vm.count += n
                },
                // ES6中可以省略：function
                sub(){
                    // alert(2)
                    this.count -= 1
                }
            },
        })
    </script>
</body>

在事件处理函数绑定时没有传参，methods中函数会自动接收一个事件，但想要传参时事件就被覆盖了，所以提供了内置变量，$event，原生DOM的事件对象e

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <p>count的值是：{{count}}</p>
        <!-- 需求：如果count值是偶数，则按钮背景颜色变红，否则取消颜色 -->
        <!-- 在事件处理函数绑定时没有传参，methods中函数会自动接收一个事件，但想要传参时事件就被覆盖了
        所以提供了内置变量，$event，原生DOM的事件对象e -->
        <button @click="add(1,$event)">+n</button>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                count:0
            },
            // 定义事件的处理函数
            methods: {
                add(n,e){
                    this.count += 1
                    // 判断值是否为偶数
                    if(this.count % 2 ===0){
                        // 偶数
                        e.target.style.backgroundColor = 'red'
                    }else{
                        // 奇数
                        e.target.style.backgroundColor = ''
                    }
                },
                
            },
        })
    </script>
</body>

（1）事件修饰符.prevent：阻止事件默认行为
（2）事件修饰符.stop:阻止冒泡行为

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <!-- 在方法中通过操作e来阻止链接跳转太麻烦，可以使用修饰符.prevent实现阻止事件默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
        <hr>
        <div @click="divHandler" style="height: 150px;background-color:antiquewhite;padding-left:100px;line-height:150px;">
            <!-- 阻止向外冒泡修饰符.stop -->
            <button @click.stop="btnHandler">按钮</button>
        </div>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            methods: {
                show(){
                    // 此时控制台打印后，页面跳转，跳转后打印内容就不见了，为了避免，可以使用
                    // e.preventDefault()来阻止事件的默认行为，即不进行跳转
                    // e.preventDefault()
                    console.log('点击了链接')
                },
                btnHandler(){
                    console.log('btnHandler')
                },
                divHandler(){
                    console.log('divHandler')
                }
            },
        })
    </script>
</body>

（3）按键修饰符@keyup.esc：按esc键触发事件

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <input type="text" @keyup.esc="clearInput">
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                
            },
            methods: {
                clearInput(e){
                    console.log('触发了clearInput事件')
                    e.target.value=''
                }
            },
        })
    </script>
</body>

双向绑定指令：
1）v-model：只能在表单元素中有意义（个人理解是双向交互的），比如:
（1）input输入框：type=“radio"或"checkbox"或"XXXX”
（2）textarea
（3）select

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <p>用户的名字是：{{username}}</p>
        <input type="text" v-model="username">
        <hr>
        <input type="text" :value="username">
        <hr>
        <select  v-model="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                username:'张三',
                city:'2'
            }
        })
    </script>
</body>

2）专用修饰符
（1）.number：自动进行数值转换(有点点疑问。。。)
（2）.trim：自动过滤首尾空格
（3）.lazy：在"change"时而非"input"时更新，比如在焦点在输入框时不更新数据，失去焦点时在更新

<body>
    <!-- 2.创建一个要控制的页面，希望vue能控制下面的div，把数据填充到div内部 -->
    <div id="app">
        <!-- v-model.number=""可以解决直接将数据转换为数值计算 -->
        <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">={{n1 + n2}}
        <hr>
        <input type="text" v-model="number">
        <button @click="getData">打印输入数据</button>
        <hr>
        <input type="text" v-model.trim="number2">
        <button @click="getData2">打印去掉前后空格的数据</button>
        <hr>
    </div>
    <!-- 1.导入vue的库文件，在window全局就有了Vue这个构造函数 -->
    <script src="./vue.js"></script>
    <!-- 3.创建Vue实例对象 -->
    <script>
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制的页面是哪个区域，接收的值是一个选择器
            el:'#app',
            // data对象是要渲染的页面上的数据
            data:{
                n1:11,
                n2:2,
                number:'',
                number2:''
            },
            methods: {
                getData(){
                    console.log(this.number)
                },
                getData2(){
                    console.log(this.number2)
                }
            },
        })
    </script>
</body>

条件渲染指令
1）v-if：原理是每次动态创建或移除元素，实现元素的显示和隐藏
2）v-show：原理是动态为元素添加或移除display:none样式，来实现元素的显示和隐藏
注：如果要频繁的切换元素显示状态，用v-show性能会更好，若刚进入页面时，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好
列表渲染指令
1）v-for,只要用到了，就需要在后面绑定key属性，且尽量把id作为key的值，key的值只能是字符串或数字类型，key的值是不能重复的，要与值是唯一对应的那种