Vue基本基础_基本指令

v-cloak

它的作用是等待vue.js加载完毕后就消失。

这样可以防止vue.js没有加载时，页面出现vue的元素。

<view v-cloak>{{msg}}</view>

[v-cloak]{
	display: none;
}

比如上面这样，如果vue.js没有加载，页面就不会显示{{msg}}，因为有v-cloak属性的标签是display:none。

v-cloak在vue.js加载后，就会消失，此时标签就会展示。

v-pre

带有这个指令的标签，内容不会被vue接管，不会被vue替换变量。

<view v-pre>{{msg}}</view>    //展示  {{msg}}
<view>{{msg}}</view>   // 展示  hello world

msg:"hello world"

此时上一个带v-pre的页面就会展示 {{msg}}，而不是 hello world。

v-bind

单向绑定指令，即将data中的内容绑定到html元素上，但是html上的内容改变并不会改变data中内容。

<input  v-bind:value="msg"/>
<input :value="msg"/>     //缩写方式

data(){
    return {
    	msg:"hello world"
    }
},

此时在页面中上面一个input输入内容，下面的input中内容并不会改变，因为input中内容并没有赋值给msg。

v-model

是用来双向绑定，即data中内容改变会影响html展示内容，html展示内容改变也会影响data中内容。

<input  v-model:value="msg"/>
<input v-model="msg"/>   //缩写方式

msg:"hello world"

上面一个input内容改变，下面input内容也会改变。

PS： 可以用watch来监听内容改变，方法名就是变量名。

watch:{
    msg(val){
    	console.log("watch:"+val)
    }
},

v-on

用来绑定方法的指令，简写是用@。

<text>{{msg}}</text>
<button v-on:click="showMsg">click me</button>
<button @click="showMsg">click me</button>

msg:"hello world"

showMsg(){
	this.msg = "ni hao";
}