vue.js的指令

1.{{ }} 双花括号用于标签体内显示数据

<div id="app">
        <p>{{msg}}</p>
</div>

{{ }} 双花括号内可以写js表达式

<div id="app">
        <p>{{score+1}}</p>   //可以写js表达式
</div>

2. v-once 写在标签内，表示一次性插槽，之后不再随Vue中data的变化而变化

<div id="app">
        <p v-once>{{score}}</p>
</div>

3.v-html=" " 输出html效果会解析html代码，不会解析js代码

<div id="app">
        <p>{{message}}</p>    //以普通文本输出
        <p v-html="message"></p>    //可识别html标签
</div>

4.v-pre

<div v-pre>{{Hello,world!}}</div> 将花括号渲染到dom中，并跳过这个元素和子元素的编译过程，加快编译。

<div id="app">
    <div v-pre>{{Hello,world!}}</div>
</div>

5.v-text="msg"写在标签中，等价于{{ }}, v-text不会造成闪烁，

<div v-text="msg"></div>

6.v-cloak 用于结局{{ }}的闪烁问题

先在style中添加属性选择器[v-cloak] ，添加样式display:none;

然后在Vue管理的入口标签中写上v-cloak

<style>
[v-cloak]
{
    display:none;
}
</style>

    <div id="app" v-cloak>
    <div >{{msg}}</div>
    </div>

7.v-model= " " 用于表单数据双向绑定 v-model的值为表单中的value值，即将表单中的value值与Vue中的data值相互绑定，其中一方数据的变化，都可以使另一方的数据同步更新。

针对text,textarea,radio,checkbox,select类型

    <div id="app">
        Hello world {{msg}} <br/>         //{{}}双花括号用于标签体内显示数据
        <input type="text" v-model="msg">    //v-model 用于数据的双向绑定 写在input标签中
    </div>
    <script src="./node_modules/vue/dist/vue.min.js" ></script>
    <script>
    new Vue({
el:"#app",                       //指定Vue被管理的入口，值为选择器，不可以指定body和html
data:{
    msg: "Vue.js"
}
    })
    </script>

8.v-bind元素绑定标签属性

v-bind：属性名="属性值" 或者：属性名="属性值" 属性值可以动态获取Vue中的data

<div id="app"> 
        <img :src="imgUrl" alt=""> 
</div>

9.v-bind绑定标签中的class

语法：v-bind:"表达式" 或者 :"表达式"

class的表达式可以为

字符串：class=“字符串” 字符串为vue中的data

对象：class=“{active：isActive}” active是style中的类名 isActive为Vue中的data isActive的属性值为布尔类型

数组：class=“['active',color]” 'active'加了单引号是style中的类名 color 不加单引号为Vue中的data

10.v-bind绑定style

语法 v-bind:style="{color:activeColor}" 或者:style="{color:activeColor}" color为css样式属性 activeColor 为Vue中的data

<div :style="{color:color,fontSize:fs}">四大皆空</div>

11.事件绑定指令

v-on：事件名称=“事件处理函数名” 或者 @事件名称="事件处理函数名" 函数写在Vue的mothods中

    <div id="app">
        <input type="text" v-model="msg">
        <button @click="fn">点击+1</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: 1,
            },
            methods: {
                fn: function () {
                    this.msg += 1
                }
            }
        })

在方法中传入参数e，表示dom的原生事件 Vue.js会将他自动传进来

  methods: {
say: function (e) {
  console.log(e.target);

}
}

对于有参数的函数，

<button @click="say('zhangsan',$event)">say：{{msg}}</button> $event表示dom的原生事件

<div id="app">
                <input type="text" v-model="msg">
                <button @click="say('zhangsan',$event)">say：{{msg}}</button>   // 回调函数需要传入$event，将dom事件传给函数
            </div>
            <script src="./node_modules/vue/dist/vue.js"></script>
            <script>
                new Vue({
                    el: "#app",
                    data: {
                        msg: "哈哈哈",
                    },
                    methods: {
                        say: function (name,event) {         // 函数中需要写上event 形参，将原生事件传进来
                            console.log(name,event.target);
                            
                        }
                    }
                })
           </script>

12.事件修饰符

@click.stop="fn" .stop 阻止事件的传播

<div id="app">
        <div @click="fm" id="out">
            <button @click.stop="fn" id="inner">内部盒子</button>
        </div>
</div>

@click.prevent="fs" .prevent 阻止事件的默认行为

<a href="http://www.baidu.com" @click.prevent="fs">梦雪谷</a>

@click.once="fn" .once 点击事件只会触发一次

<button @click.once="fn" >点击加1：{{num}}</button>

13.按键修饰符

@keydown.按键名=“函数名”
常用的按键名 .left 左.right 右 .up 上 .down 下 .delete 删除 .space 空格 .esc 退出

14.计算属性

计算属性名函数写在Vue的computed中计算属性函数要有返回值 return

<div id="app">
        数学：<input type="text" v-model="mathScore"><br>
        英语：<input type="text" v-model="englishScore"><br>
        总分：<input type="text" v-model="sumScore">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
    var vm = new Vue({
    el: '#app',
    data: {
        mathScore:"",
        englishScore:""
    },
    methods: {
    
    },
    computed: {
        sumScore:function(){
            return (this.mathScore-0)+(this.englishScore-0)   //"-0"可以将字符串转化成数字类型
        }
    },
    })
        
        
    </script>

15.计算属性双向绑定 get（）获取数据 set（）设置数据不添加get（）和set（），默认只有get方法

<div id="app">
    <input type="text" v-model="mathScore">
    <input type="text" v-model="englishScore">
    <input type="text" v-model="sumScore">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                mathScore:"0",
                englishScore:"0" 
            },
            methods: {
           
            },
            computed: {
                sumScore:{
    
            get:function(){
            return (this.mathScore-0)+(this.englishScore-0)
            },
            set:function(sum){                      //sum代表sumScore的值

          this.mathScore=Math.floor((sum-0)*2/3);
          this.englishScore=sum-this.mathScore } } } }) 

         </script>

16.watch 监听器

监听Vue数据的某一个值的变化时，回调函数才会被调用，回调函数有两个参数一个是更新后的值，一个是更新前的值

    watch:{
        mathScore:function(newValue,oldValue){
        this.scoreSum=(newValue-0)+(this.englishScore-0)
        }
    }

17.v-if 元素显示与隐藏

语法： v-if="isShow" isShow为Vue中的data 隐藏的元素从dom中消失了

<input type="checkbox" v-model="isShow"> 是否显示红色方框 
        <div class="box" v-if="isShow"></div>    
        <div  v-else >红色方框隐藏了</div>

使用标签<template v-if="isShow" > 渲染分组

如果要切换多个元素，可以将v-if添加到template标签上，template标签是被当做一个不可见的包裹标签，主要用于分组的条件判断和列表渲染

<div id="app">
   <template v-if="isShow">
       <div>1</div>
       <div>2</div>
       <div>3</div>
   </template>
    </div>

18.v-show 元素显示与隐藏

语法： v-if="isShow" isShow为Vue中的data 隐藏的元素存在dom中，只是把display改为none

<input type="checkbox" v-model="isShow"> 是否显示红色方框 
        <div class="box" v-show="isShow"></div>

19.遍历数组

v-for="(e,index) in arr" arr是Vue中的data，e是数组arr中的每一项，index是arr数组的下标

:key="index"使用key的特殊属性，如果arr中有id，可以写为:key="e.index"

<ul>
        <li v-for="( e ,index) in emps" :key="index">
    编号：{{index+1}},姓名：{{e.name}},年龄：{{e.age}}
        </li>
    </ul>

20.遍历对象

v-for="(value,key,index) in obj" obj是Vue中的data，value是每个对象的属性值，key是每个对象的属性名，index是对象的索引

<ul>
        <li v-for="( value,key,index) in obj" >
            第{{index+1}}个属性是{{key}}，属性值是{{value}}
        </li>
    </ul>

vue.js的指令

推荐阅读