Vue常见指令

书写规范：

       书写位置：任意 HTML 元素的开始标签内
        如：<p v-if="seen">现在你看到我了</p>
        一个开始标签 内可写入多个指令，多个指令间使用空格分隔
        如<a href="javascript:;" :class="{active:timeflag}" @click="queryAll('time')">全部</a>

插值表达式 {{表达式}}

作用在HTML中
如 <h1> {{ msg }} </h1> msg为我们data中的数据变量
插值表达式可以是 JSON数据、数字、字符串、插值表达式

1.v-if="表达式"

根据表达式结果的真假，确定是否显示当前元素
表达式为true 表示显示该元素 为 false表示隐藏该元素

<div id="root">
    <h1 v-if="ifFlag">快看我</h1>
</div>
   
<script>
    vm=new Vue({
            el:"#root", //绑定根目录 挂载点
            data:{
                ifFlag:true
            }   // //储存数据
        })
</script>

v-if 指令将根据表达式 ifFlag 的值(true 或 false )来决定是否插入 p 元素。

反之当表达式 ifFlag 的值为false 的时候 元素将消失 当前的位置将会被隐藏并留下注释
 

 2.v-eles

v-else指令为v-if添加一个“else块”，v-else元素必须立即跟在v-if元素的后面，否则不能被识别 

 <h1 v-if="isFlag">表达式的值为真，我就能显示</h1>
 <h1 v-else>v-if不成立的时候，我就显示出来了</h1>

v-if为true，后面的v-else不会渲染到HTML
v-if为false，后面的v-else才会渲染到HTML

3.v-show="表达式"

根据表达式结果的true和false来确定是否显示隐藏当前元素

 <div id="root">
        <h1 v-show="showFlag">我是v-show</h1>
 </div>
 <script>
        vm=new Vue({
            el:"#root", //绑定根目录 挂载点
            data:{
                showFlag:true
            }   // //储存数据
        })
 </script>

当元素为true的时候将会进行显示

当元素为false的时候将会将当前元素添加display样式进行隐藏

v-if 和 v-show的区别

相同点： 都是通过表达式的true和fales来切换元素的显示状态
不同点：
v-if:本质是通过操作Dom元素来切换显示状态 表达式为true 元素存于Dom树 为false从dom树中移除
v-show:通过真假来切换元素显示与隐藏 原理是改变元素的display 实现显示隐藏
如果频繁的切换可以使用 v-show 反之使用v-if   
前者切换性能消耗较小(只是通过样式进行显示隐藏) 后者是通过对Dom树的插入和移除进行实现...

v-for(‘(迭代名，索引)’ in 数据源)

本质是通过迭代名来进行循环获取数据源中的数据  

<div id="root">
        <ul>
                //     迭代名  索引      数据源
            <li v-for="(item,index) in list">
                姓名：{{item.name}} 
                年龄：{{item.age}} 
                性别：{{item.sex}}
            </li>
        </ul>
</div>
<script>
        vm = new Vue({
            el: "#root", //绑定根目录 挂载点
            data: {
                list: [
                    {
                        name: '小明',
                        age: '18',
                        sex: '男'
                    }, {
                        name: '小美',
                        age: '19',
                        sex: '女'
                    }, {
                        name: '李华',
                        age: '20',
                        sex: '男'
                    }
                ]
            }  //数据源
        })
</script>

其中我们的 item为迭代名 index为item的索引(可选参数) list 数据源(可以为数组/对象)

 v-on ：事件名='函数名(可选参数)'

为HTML元素绑定监听事件(触发事件如：click  change ...)
简写语法：@事件名称 =‘函数名称()’ 函数定义在 methods 配置项中进行处理

<div id="root">
        //      v-on:click='on'
        <button @click="on">点击我</button>
</div>
<script>
        vm = new Vue({
            el: "#root", //绑定根目录 挂载点
            data: {},  //储存数据
            methods:{
                on(){
                    alert("真棒棒！！")
                }
            }, //编写方法
        })
</script>

v-bind:属性名 = ‘表达式’

给元素进行绑定属性 如 v-bind:class="{'绑定类名':表达式(true/flash)}
当表达式为true时将会绑定类型 如果为flash则会解绑类 可以实现动态添加属性
简写形式：v-bind可以省略，直接书写为 :属性名 = ‘表达式’

//css样式
.box{
            background-color: pink;
}

//html代码
<div id="root">
         <!-- v-bind:class="{'绑定类名':根据true和flash进行显示隐藏}" -->
        <div @click="Up"  :class="{'box':isFlag}">
            我是div
        </div>
</div>

//vue.js代码
var vm = new Vue({
        el: "#root",
        data: {
            isFlag: false,
        },
        methods: {
            Up() {
                if(this.isFlag==false){
                    this.isFlag = true
                }else{
                    this.isFlag = false
                }
               
            }
        }
})

 

v-model="变量"

能轻松实现表单输入和应用状态之间的双向绑定
双向绑定：指的是我们在vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据

//html
 <div id="root">
        <!-- 能够轻松的实现双向绑定 -->
       <input type="text" v-model="val">
       <br>
       {{val}}
 </div>


//vue.js
var vm = new Vue({
        el: "#root",
        data: {
            val:"",
        }
})

tip：v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上 !!!
 

v-html=“变量”

 可以将当前的标签中的内容替换成变量的元素 原本的内容会被覆盖掉

  <div id="root">
      <h1 v-html="a" @click="add">点一下</h1>
  </div>

// vue.js
 var vm = new Vue({
        el: "#root",
        data: {
            a:'点一下'
        },
        methods:{
            add(){
                this.a='<a href="https://www.baidu.com/">百度一下</a>'
            }
        }
})

 v-text="变量"

可以将 标签中的内容替换成变量的内容(文本) 用法与v-html 一致

//html
<div id="root">
      <h1 v-text="a" @click="add">点我变文本</h1>
</div>

//vue.js
 var vm = new Vue({
        el: "#root",
        data: {
            a:'点我变文本'
        },
        methods:{
            add(){
                this.a='<a href="https://www.baidu.com/">百度一下</a>'
            }
        }
    })

tip:会将原有的内容 替换成v-text 变量里的内容