VUE学习笔记（一）-指令

一 ： 指令的概念：

指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能

二 ： 指令的语法：

v-指令名 = “表达式判断或者是业务模型中属性名或者事件名”

三 ： 具体指令

一丶指令：v-if

作用：用于判断是否加载html 的DOM

html：

<div v-if='isvif'>你好，我是v-if</div>

main.js：

new Vue({

     data:{

     isvif:false

     }

})

二丶指令：v-show

作用：调整css中的Display属性

html：

<div v-show='isvif'>你好，我是v-if</div>

main.js：

new Vue({

     data:{

     isvif:false //不显示

     }

})

v-if和v-show两者区别：

• v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
• v-show：调整css dispaly属性，可以使客户端操作更加流畅。

三丶指令：v-for

作用：循环出data中的数组，指令需要以 item in items 形式

html：

<li v-for="item in items">

     {{item}}

</li>

main.js：

new Vue({

     data:{

     items:[1,2,3,4,5]

     }

})

四丶指令：v-text

作用：在网速太慢或者js报错 的情况下，会暴露{{xxx}}的问题，用v-text可以解决

<span>{{ message }}</span>=<span v-text="message"></span><br/>

五丶指令：v-html

作用：操作元素中的HTML标签
v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出

<div id="app3">
    {{ message }}
</div>
var app3 = new Vue({
    el : "#app3",
    data : {
        message : "![](img/1.jpg)"
    }
})

六丶指令：v-on  可以用@代替

作用：绑定时间监听器

html：

<button v-on:click="jiafen">加分</button>

<button v-on:click="jianfen">减分</button>

main.js:

<script type="text/javascript">

        var app=new Vue({

            el:'#app',

            data:{

                count:1

            },

            methods:{

                jiafen:function(){

                    this.count++;

                },

                jianfen:function(){

                    this.count--;

                }

            }

        })

    </script>

六丶指令：v-model

作用：绑定数据源

• .lazy：取代 imput 监听 change 事件。
• .number：输入字符串转为数字。
• .trim：输入去掉首尾空格。

文本区域加入数据绑定

<textarea  cols="30" rows="10" v-model="message"></textarea>

多选按钮绑定一个值

<h3>多选按钮绑定一个值</h3>

<input type="checkbox" id="isTrue" v-model="isTrue">

<label for='isTrue'>{{isTrue}}</label>

多选框绑定数据

<h3>多选框绑定数据</h3>

<p>

  <input type="checkbox" id="a1"  value="a1" v-model="webname1" >a1</input>

  <input type="checkbox" id="a2" value="a2"  v-model="webname1"/>a2</input>

  <input type="checkbox" id="a3" value="a3"  v-model="webname1"/>a3</input>

</p>

{{webname1}}

<hr>

单选按钮绑定数据

<h3>单选框绑定</h3>

<p>

  <input type="radio" id="one"  value="男" v-model="sex" />

  <label for="one">男</label>

  <input type="radio" id="two"  value="女" v-model="sex" />

  <label for="two">女</label>

</p>

你选择的是：{{sex}}

七丶指令：v-bind

作用：v-bind主要用于绑定DOM元素属性（attribute），

即元素属性实际的值是有vm实例中的data属性提供的。

要注意对象在Vue中声明，报错，未定义

img :src="imgSrc" width="200px">

<a :href="webUrl" target="_blank">baidu</a>

<div :class="className">1.绑定ClassA</div>

<div :class="[classA,classB]">1.绑定ClassA</div>

<div :class="isOk?classA:classB">1.绑定ClassB</div>

<div :style="{color:red,fontSize:font}">6.绑定ClassB</div>

<div :style="styleObject">7.绑定ClassB</div>

message:"hello",

id:"123",

imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518173720238&di=a9c6b08476fcf40df5a2e4ae2ae2c8e6&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F503d269759ee3d6db032f61b48166d224e4ade6e.jpg',

webUrl:'https://image.baidu.com/',

className:'classA',

classA:'classA',

classB:'classB',

red:'red',

font:'150px',

styleObject:{

  color:'green',

  fontSiz:'24px'

},

isOk: false

八丶指令：v-pre

作用： 直接在网页中显示{{message}}

<div v-pre>{{message}}</div>

指令：v-cloak

作用： 在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用

<style>

[v-cloak]

     display:none;

</style>

<div v-cloak>

     {{message}}

</div>

指令：v-once

九丶指令：v-bind

作用： 绑定标签属性，：后面是标签属性名

<style>

[v-cloak]

     display:none;

</style>

<div v-cloak>

     {{message}}

</div>