Vue一些需要记住的指令/属性

 

• v-once:只能使得组件解析执行一次的指令，如：

 

<div id="app">
    <p>{{count}}</p>
　　<!--count在v-once那行中只会渲染改变一次。-->
    <p v-once>{{count}}</p>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            count: 0
        },

</script>

• v-html：可以解析变量中的html代码块，如：

<div id="app">
    <p v-html="url"></p>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            url:'<a href="http://www.baidu.com">百度一下</a>',
        },
</script>

• v-pre：不进行解析直接展示原本的内容，如：

<div id="app">
    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:'haha'
        },
</script>

• V-bind：动态绑定属性(v-bind的语法糖：v-bind:src="imgUrl"等价于:bind:src="imgUrl")

<div id="app">
    <a v-bind:href="url"></a>
    <img v-bind:src="imgUrl">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            url:'http://www.baidu.com'
            imgUrl:'https://i0.hdslb.com/bfs/sycp/creative_img/202108/e9420839c81a40a9cf40280acb2bed46.jpg'
        },
</script>

• computed 计算属性：类似于method但不同于method，如：

 

<div id="app">
    <h1>{{fullName}}</h1>
    <h1>{{fullName2}}</h1>
</div>

<script>
    const app=new Vue({
        el:"#app",
        data:{
        firstName:'Eva',
        LastName:'Green'
    },
    methods:{

    },
    // 计算属性，多次调用，只需要调用一次，因为内部有缓存，所以比Medthod性能更高
    computed:{
        fullName:function(){
            return this.firstName+' '+this.LastName
        },
        fullName2:{
            set:function(names){
                const name=names.split(' ')
                this.firstName=name[0]
                this.LastName=name[1]
            },
            get:function(){
                return this.firstName+' '+this.LastName
            }
        }
    }
    })
</script>

• v-on 事件监听,如：

 

<div id="app">
    <!-- 没有参数不用加（） -->
    <button type="button" v-on:click="increment">{{counter}}</button>
    <!-- 水果糖，有参数 -->
    <button type="button" @click="increment('haha',12)">{{counter}}</button>
    <!-- 手动获取浏览器自动获取的event参数 -->
    <button type="button" @click="increment(12,$event)">{{counter}}</button>
</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
        counter:0
    },
    methods:{
        increment(e,event){
            this.counter++
            console.log('ee',e,event)
        }
        }
    })
</script>

• 事件监听的修饰符

 

<div id="app">
    <!-- 没有参数不用加（） -->
    <button type="button" v-on:click="increment">{{counter}}</button>
    <!-- 水果糖，有参数 -->
    <button type="button" @click="increment('haha',12)">{{counter}}</button>
    <!-- 手动获取浏览器自动获取的event参数 -->
    <button type="button" @click="increment(12,$event)">{{counter}}</button>
    <div @click="divClick">haha
        <!-- .stop修饰符的使用，点击button时只响应btnClick -->
        <button type="button" @click.stop="btnClick">{{counter2}}</button>
        <!-- .once修饰符的使用，只触发一次 -->
        <button type="button" @click.once="btnClick">{{counter2}}</button>
    </div>
    <form action="baidu" method="">
        <!-- .prevent修饰符的使用，阻住默认事件的发生，这里会默认跳转action -->
        <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
</div>

<script>
    const app=new Vue({
    el:'#app',
    data:{
        counter:0,
        counter2:0,
    },
    methods:{
        increment(e,event){
            this.counter++
            console.log('ee',e,event)
        },
        divClick(){
            console.log('divClick')
        },
        btnClick(){
               console.log('btnClick')
        },
        submitClick(){
            console.log('submitClick')
        }
    }
    })
</script>

• v-show的使用，如：

 

<div id="app">
    <!-- v-show对比V-if的区别是它的实质是改变组件样式来实现，实际上还是存在，只是style:disable改变了 -->
    <button v-show="isShow" @click="changShow">1</button>
</div>
<script type="text/javascript">
    const app=new Vue({
        el:'#app',
    data:{
        isShow:true
    },
    methods:{
        changShow(){
            this.isShow=false
        }
    }
    })
</script>

• v-for数组遍历，如：

 

<div id="app">
            <!-- 遍历数组 -->
            <ul>
                <li v-for="(item,index) in movies">No {{index+1}} is {{item.name}}</li>
            </ul>
            <br>
            <!-- 遍历对象 -->
            <ul>
                <li v-for="(value,key) in movies[0]">the movie's {{key}} is {{value}}</li>
            </ul>
            <button @click="changeList" type="button">数组改变</button>
            <h1 @click="sum(1,2,3,4,5,6,7,8,9)">sum</h1>
            <input type="text" name=""  v-model="message" />{{message}}
        </div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
        const app=new Vue({
            el:'#app',
            data:{
                message:'你好',
                movies:[
                    {
                        name:'银翼杀手',
                        time:120,
                        score:9.5
                    },
                    {
                        name:'星球大战',
                        time:110,
                        score:7.5
                    },
                    {
                        name:'霍比特人',
                        time:100,
                        score:8.5
                    }
                ]
            },
            methods:{
                changeList(){
                    const movie1={
                        name:'指环王',
                        time:200,
                        score:9.9
                    },
                    const movie2={
                        name:'蝙蝠侠',
                        time:130,
                        score:9.8
                    },const movie3={
                        name:'汉尼拔',
                        time:140,
                        score:9.7
                    }
                    this.movies[0].time=12//不能响应式
                    this.movies.shift()//删除最前面的元素
                    this.movies.pop()//删除最后面的元素
                    this.movies.unshift(movie2)//最前面添加元素，可以一次加多个元素
                    this.movies.push(movie1)//后面添加元素，可以一次加多个元素
                    
                },
                sum(...num){
                    //这样的参数表示可以接受任意数量参数，而存储在num数组中
                    console.log('num',num)
                    
                }
            }
        })
    </script>