【精讲】mustache表达式写法、vue常用指令、v-bind多种绑定事件、技能提升

目录

mustache表达式写法

vue常用指令

v-bind多种绑定事件

技能提升

---

第一部分：mustache表达式写法

加减乘除等

<div id="app">
            <h2>{{firstName}}-{{lastName}}</h2>
            <h2>{{firstName}}+{{lastName}}</h2>
            <h2>{{firstName+'-'+lastName}}</h2>
            <h2>{{count*2}}</h2>
            <h2>{{count/2}}</h2>
        </div>
        <script>
            const vm = new Vue({
                el:'#app',
                data(){
                    return {
                        firstName:'zhang',
                        lastName:'san',
                        count:2
                    }
                }
                
            })
        </script>

第二部分：vue常用指令

大类一：插值的多种使用方法

在讲述插值的多种使用方法前，我们先回顾之前Es6的内容，for遍历，for in，for of 以及forEach，在这里我们不使用forEach所以我们就不做重点解读。在下面的插值多种使用方法中，我们将采用for in 及for of的两种方法，在这里与Es6的写法有点区别，es6 中for in的写法是for（let index in  keys）而for  of的写法是 for（let  item of  keys）但在这里的使用统一是以下写法：v-for = " item  in  keys"的形式或者v-for = "（item，index）  in  keys"的形式。

根据上面引入的写法形式，下面我们来讲述一下多种插值使用方法：

js共用部分（多个使用方法的结合）：

    const vm = new Vue({
                el:'#root',
                data(){
                    return{
                todolist:['足球','篮球','排球','羽毛球'],
                
                obj:{
                    a:'张三',
                    b:'李四',
                    c:'王五',
                    d:'王强'
                }    
                    
                obj2:[
                    {
                    a:'张三',    
                    },
                    {
                    b:'李四',
                    },
                    {
                    c:'王五',    
                    },
                ]

第一种：利用for循环遍历

<h2 v-for="item in todolist">{{item}}</h2>

第二种：

<h2 v-for="item in obj"> {{item}} </h2>

第三种：

<h2 v-for="item in obj2"> {{item.a}}{{item.b}}{{item.c}} </h2>

 第四种：

<h2 v-for="(item,index) in todolist" :key="index"> {{item}}-{{index}}</h2>

<!-- :key="index"是   diff算法 -->
            <!-- 在将来的项目中写v-for是需要加上:key 他的值可以写索引最好写数据中的id值 --> 

以上几种方法，可以将in改为of，实现同样的数据

大类二：v-once  

   <div id="root">
            <!-- 编写两个h2标签，进行比较 -->
            <h2>{{msg}}</h2>
            <!-- 在第二个h2中添加v-once，该指令不是常用的
             指令的作用是：v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。-->
            <h2 v-once>{{msg}}</h2>
            <!-- 在页面中更改数据时，只有第一个会改变，第二个是不会改变的 -->
        </div>
        
        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data(){
                    return{
                        msg:'你是老师'
                    }
                }
            })
        </script>

以上综合案例：

    <!-- @是v-on监听绑定点击事件指令的简写 -->
        <!-- @click="toop"中的toop后面可以不用加()可省略，也可以加(),原因是传参数就加，不传参数可以不加 -->
        <div id="root">
        <button type="button" @click="toop">+</button>
        <h2>{{count}}</h2>
        <button type="button" @click="top">-</button>
            </div>
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        count: 0,
                    }
                },
                // methods是:以后所有vue中的方法都放入methods中编写
                methods: {
                    toop() {
                        //在methods中添加方法时，使用某个元素时必须要加this，否则会报错。
                            this.count++
                    },
                    top() {
                            this.count--
                    }
                }
            })
        </script>

大类三：v-html

    <div id="root">
            <!-- 这里有两种写法，第一种是v-html='url',第二种便是这种写法 -->
            <a  v-html:src="url">点我百度一下</a>
        </div>
        
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        //传入一个地址
                     url:"<a href='http://www.baidu.com'>百度一下</a>"
                    }
                }
            })
        </script>

大类四：v-text具有覆盖功能，可将内容给覆盖成传入的内容

<div id="root">
        <h2>{{message}},啧啧啧</h2>
        <!-- 编写两个h2进行比较，第一个不会发生改变，原样打印，第二个将返回值返回到页面中去 -->
        <!-- 使用v-text会将返回值覆盖标签中间的内容 -->
        <h2 v-text="message">啧啧啧</h2>
    </div>
        
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                    message:'你好呀!'
                    }
                }
            })
        </script>

大类五：v-pre相同内容直接不执行

 <div id="root">
           <h2>{{msg}}</h2>
        <!-- 在标签中添加v-pre指令，不管传入的是什么数据，都为空，不会改变其内容更，但第一个会改变其内容 -->
        <h2 v-pre>{{msg}}</h2>
       </div>
        
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                    msg:'你好呀!'
                    }
                }
            })
        </script>

大类六：v-cloak不受刷新的影响闪跳

注：添加css样式时，需要使用[  ] 包裹着v-cloak才可以

<style>

            [v-cloak]{
                display: none !important;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <h2>{{msg}}</h2>
        </div>
        <script>
            setTimeout(() => {
                const vm = new Vue({
                    el: '#app',
                    data() {
                        return {
                            msg: '我就是这么倔强'
                        }
                    }
                })
            }, 2000)
        </script>

第三部分： v-bind多种绑定事件

大类一：v-bind和v-for 结合

<div id="app">
            <ul>
                <!-- <li v-for="(item,index) in movies" :key="index" :class="{active:currentIndex==index}" @click="change(index)">{{item}}</li> -->
                <li v-for="(item,index) in movies" :key="index" :class="currentIndex==index? 'active' : '' " @click="change(index)">{{item}}</li>

<!-- 动态绑定三元表达式 -->
            </ul>
        </div>
        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {
                        currentIndex: 0,
                        movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
                    }
                },
                methods: {
                    change(i) {
                        /*     this.currentIndex = i */
                        if (this.currentIndex == i) return
                        this.currentIndex = i
                    }
                }

            })
        </script>

大类二：src是图片在网上的地址，URL是本地路径

  <!-- v-bind指令 -->
        <div id="root">
            <img :src="src">
            <img :src="url" />
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        //区分两种图片获取地址的区别。第一个获取图片的地址来自于网络   第二种获取图片的地址来自于本地存储
                      src:'https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',
                      url:'img/6.png'
                    }
                }
            })
        </script>

大类三：v-bind绑定对象

<style>
            .active {
                color:#f00;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- <h2 :class="{active:isactive}" @click="change">{{msg}}</h2> -->
             <h2 :class="changeActive()" @click="change">{{msg}}</h2>
        </div>
        <script>
            const vm = new Vue({
                el:'#app',
                data(){
                    return {
                        msg:'动态绑定对象',
                        isactive:false
                    }
                },
                methods:{
                    change(){
                        this.isactive = !this.isactive
                    },
                    changeActive(){
                        return {active:this.isactive}
                    }
                }
                
            })

大类四：v-bind动态绑定class数组方法：

<div id="root">
            <!-- 区分以下几种数组的绑定方式 -->
            <h2 :class="['active','itenm']">我们正在学习vue</h2>
            <h2 :class="[active,itenm]">我们正在学习vue</h2>
            <h2 :class="getSum()">我们正在学习vue</h2>
        </div>

        <script>
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        active: 'itemll',
                        itenm: 'table',
                    }
                },
                methods: {
                   getSum(){
                       return[this.active,this.itenm]
                   } 
                }
            })
        </script>

大类五：v-bind动态绑定class对象方法：

    <div id="app">
            <!-- 驼峰命名法 -->
            <h2 :style="{fontSize:'50px'}">我们爱学习</h2>
            <h2 :style="{fontSize:fontsize}">我们爱学习</h2>
            <h2 :style="getStyle()">我们爱学习</h2>
        </div>
        
        <script>
            const vm = new Vue({
                el:'#app',
                data(){
                    return {
                        fontsize:40+'px'
                    }
                },
                methods:{
                    getStyle(){
                        return {fontSize:this.fontsize}
                    }
                }
                
            })
            
        </script>

大类六：v-bind动态绑定style（数组语法）方法：

<div id="app">
            <h2 :style="[baseStyle]">我们爱学习</h2>
            <h2 :style="['baseStyle']">我们爱学习</h2><!-- 无意义 -->
            <h2 :style="getStyle()">我们爱学习</h2>
        </div>
        <script>
            const vm = new Vue({
                el:'#app',
                data(){
                    return {
                      baseStyle:{background:'#f00'}    
                    }
                },
                methods:{
                    getStyle(){
                        return [this.baseStyle]
                    }
                }
                
            })
        </script>

第四部分：技能提升

为有效解决在项目中，需要将ul中的li分为多块部分，每一块部分控制的区域不同，在给ul设置值时，根据我们的选择，使某个li起到被ul控制的效果，下面就会根据上面的内容相结合实现如下的效果：

<style>
            .active {
                color: red;
            }
            .top{
                color: pink;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <ul :class="getsum()">
                <li :class="gettoll()">1234</li>
                <li :class="getull()">576847</li>
            </ul>
        </div>

        <script>
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                       istent:true,
                       istoll:true,
                       istdell:false,
                    }
                },
                methods: {
                    getsum() {
                            console.log(this.istent);
                        return {
                            active: this.istent
                        }
                    },
                    gettoll() {
                    //为有效让li不受ul的限制，可以在后面再加一个top:this.istoll
                      return{active:this.istoll,top:this.istoll}
                    },
                    getull() {
                    return{active:this.istdell}
                    }
                }
            })
        </script>