常见vue指令速通

常见vue指令速通

指令：就是vuejs为我们提供的方便操作的自定义属性
✿使用vue的前提是插入vue.js

1.v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    <style>
        /* 全局指令，可以让网页不显示源代码--[v-cloak] */
        [v-cloak] {
            display: none;
        }
    </style>
    <div id="app">     
        <p v-cloak>{{msg+1+1+1+1+1}}</p>
        //{{msg}}不会显示，直到编译结束。        
    </div>
    <script>
        //创建一个vue环境，创建一个VM层
        let vm = new Vue({
            el:'#app',
            data: {//Model层
                msg:''
            }
        })
    </script>

2.v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

    <div id="app">
        <!-- {{username}} -->
        <p v-text='username'></p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                username:'admin'
            }
        })
    </script>

3.v-html

用于输出 html 代码
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<!--  v-html 指令用于输出 html 代码 -->
    <div id="app">
        <p v-html="msg"></p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '<h1>小明</h1>'
            }
        })
    </script>

4.v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<!-- v-pre不被编译 -->
    <div id="app">
        <p v-pre>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '太空人'
            }
        })
    </script>

5.v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    <div id="app">
        <p v-once>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '最初的梦想：当宇航员'
            },
            mounted() {
                this.msg = '后来我成为了太空人'
            }
        })
    </script>

6.v-model

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

<!-- 在表单控件或者组件上创建双向绑定 -->
    <div id="app">
        <input type="text" value="" v-model="userName">
        <p>{{userName}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userName: 'admin'
            }
        })
    </script>

7.v-on

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！我们可以使用 v-on 绑定自定义事件,每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
✿v-on:可缩写为@

    <div id="app">
        <input type="text" v-model="num">
        <input type="button" value="+1" v-on:click='add'>
        <input type="button" value="-1" @click='sub'>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num:1
            },
            //讲num值进行操作
            //用来写页面的方法所需要的配置项
            methods:{
                add : function () {
                    this.num += 1
                    //this.num = this.num +1
                },
                sub(){
                    this.num -= 1
                }
            }
        })
    </script>

8.v-bind

主要用于动态的绑定属性
✿v-bind:可缩写为：
✿例： v-bind：class =》 :class

<!-- v-bind: 用来绑定属性 简写为: -->
    <div id="app">
        <!-- <img v-bind:src="srcUrl" > -->
        <img :src="srcUrl" >
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                srcUrl: './img/1.jpg'
            },//这个逗号必须要
            mounted(){
                //这个this必须要：它指当前的vm实例
                this.srcUrl = './img/2.jpg'
            }
        })
    </script>

9.事件修饰符

<div id="app">
        <a href="https://www.baidu.com/" @click.prevent='myAlert'>百度</a>
        <!-- 冒泡 -->
        <div @click='divC1'>
            <button @click.stop='btnC1'>点击<button>
            <!-- 按键修饰符 -->
            <input type="text" v-model='msg' @keyup.delete='key'>
            <!-- <input type="text" v-model='msg' @keyup.aa='key'> -->
            <!-- 点击Backsparce直接清空 -->
        </div>
    </div>
    <script>
        //自定义修饰符
        //Vue.config.keyCodes.自命名修饰符(不能大写) = 编码(必须是精准的)
        Vue.config.keyCodes.aaa = 65

        new Vue({
            el:'#app',
            data:{
               msg:'啦啦啦啦啦'
            },
            methods:{
                myAlert(e){
                    //阻止默认行为
                    //e.preventDefault();传统原生代码
                    //只专注于自己的操作
                    alert('被点到了')
                },
                divC1(){
                    console.log('div');
                },
                btnC1(){
                    console.log('btn');
                },
                key(){
                    //清空
                    this.msg = ''
                }
            }
        })
    </script>

10.样式

<div id="app"> 
        <!-- 将类名动态 -->
        <!-- <p :class="{red:isHas}">小东西</p> 第一种 -->
        <p :class='[colRed,colBg]'>小东西</p>
        <!--  第二种：依据类型 -->
        <input type="button" value="改变自己" @click="changeClass">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                isHas:true,
                colRed:'red',
                colBg:'bg'
            },
            methods:{
                changeClass(){
                    //this.isHas = this.isHas
                    this.colRed = ''
                }
            }
        })
    </script>

11.操作style

<div id="app">
        <!-- <p :style='pStyle'></p> -->
        <!-- <p :style='[pStyle,pAdSty'></p> -->
        <p :style='{border:borderSty}'>啦啦啦啦啦啦啦</p>
    </div>
    <script>
        //三种模式绑定style
        new Vue({
            el:'#app',
            data:{
                pStyle:{
                    //样式是分割线的时候，要么变成驼峰命名，要么加引号
                    'font-size':'30px',
                    color:'red'//值必须加引号
                },
                pAdSty:{

                },
                borderSty:'2px solid red'
            }
        })
    </script>

12.if$show

v-if根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建
v-show根据表达式之真假值，切换元素的 display CSS property。

<div id="d1">
            <button @click='changeShow'>显示图片</button>
            <!-- <div v-show='isShow'>
                <img src="./img/3.jpg" >
            </div> -->
            <div v-if='isShow'>
                请登录
            </div>
            <div v-else>
                用户：aa已登录呢
            </div>
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#d1',
                data:{
                    isShow:true//布尔值
                },
                methods:{
                    changeShow(){
                        this.isShow = !this.isShow
                    }
                }
            })
        </script>

13.v-for

基于源数据多次渲染元素或模板块

<style>
        #app{
            min-width: 1200px;
            margin: 0px 60px;
        }
        ul li img {
            width: 200px;
            height: 300px;
        }
        ul li {
            display: inline-block;
            border: 1px solid gray;
            list-style: none;
        }
    </style>
    <div id="app">
        <ul>
            <li v-for="movie in subjects" :key="movie.id">
                评分： {{movie.rate}}<br />
                鼠标x： {{movie.cover_x}}<br />
                电影名： {{movie.title}}<br />
                链接：<a :href="movie.url">{{movie.url}}</a> <br/>
                图片： <img :src="movie.cover" alt=""><br />
                ID： {{movie.id}}<br />
                鼠标y： {{movie.cover_y}}<br />
                {{movie.is_new}}<br />
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {

                "subjects": [
                    {
                        "rate": "5.7",
                        "cover_x": 527,
                        "title": "杀戮天眼",
                        "url": "https://movie.douban.com/subject/30304769/",
                        "playable": false,
                        "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2561506095.webp",
                        "id": "30304769",
                        "cover_y": 800,
                        "is_new": true
                    },
                    {
                        "rate": "7.1",
                        "cover_x": 1013,
                        "title": "黑鸟",
                        "url": "https://movie.douban.com/subject/30277288/",
                        "playable": false,
                        "cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2617780988.webp",
                        "id": "30277288",
                        "cover_y": 1500,
                        "is_new": true
                    },                   
                    {
                        "rate": "6.7",
                        "cover_x": 2757,
                        "title": "逃跑",
                        "url": "https://movie.douban.com/subject/30243396/",
                        "playable": false,
                        "cover": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2587085523.webp",
                        "id": "30243396",
                        "cover_y": 4096,
                        "is_new": false
                    }
                ]
            }

        })
    </script>

♥此文章部分来源网络，侵删。感谢大家观看，么么叽！