Vue本地应用——内容绑定，事件绑定

内容绑定和事件绑定用到的命令有：

v-text
v-html
v-on

v-text

设置标签的文本值（textContent）

<div id="app">
	<h2 v-text="message+'!'"></h2>
	<h2>深圳{{message+"!"}}</h2>
</div>

var app = new Vue({
	el:"#app",
	data{
		message:"hello,world!"
	}
})

v-text指令的作用是：设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式01可以替换指定内容
内部支持写表达式

v-html

设置标签的innerHTML

<div id="app">
	<p v-html="content"></p>
</div>

var app = new Vue({
	el:"#app",
	data{
		content:"<a href='#'></a>"
	}
})

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

v-on

为元素绑定事件

<divid="app">
	<input type="button"value="事件绑定"v-on:click="dolt">
	<input type="button"value="事件绑定"v-on:monseenter="dolt">
	<input type="button"value="事件绑定"v-on:dblclick="dolt">
	<input type="button" value="事件绑定"@dblclick="dolt">
</div>

var app = new Vue({
	el:"#app"
	methods:{
		dolt:function(){
		}
	}
})

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为**@**
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

运用实例

实现一个计数器

 var app = new Vue({
	el:"#app",
	data:{
		num:1
	},
    methods:{
		add:function(){
    		if(this.num<10){
    			this.num++
        	}else{
        		alert("已达上限")
        	}
    	},
   		sub:function(){
			if(this.num>0){
				this.num--
			}else{
        		alert("已达下限")
        	}
		}
	}
})

<div class="input-num">
	<button @click="sub">-</button>
	<span>{{num}}</span>
	<button @click="add">+</button>
 </div>

总结

创建Vue示例时：el(挂载点)，data(数据)，methods方法
v-on指令的作用是绑定事件，简写为**@**
方法中通过this关键字获取data中的数据
v-text指令的作用是：设置元素的文本值简写为**{{}}**
v-html指令的作用是：设置元素的innerHTML