二、Vue实例中的数据、事件和方法（v-text、v-html、v-on）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{msg}}</h1>
</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world"
}
})
</script>
</body>
</html>
上述例子中，data中的数据怎么表现到模板上：
上述的模板不仅仅可以写成<h1>{{msg}}</h1>，还可以写成<h1 v-text= "msg"></h1>，
还有一种写法是v-html：<h1 v-html="msg"><h1>,对于数据是简单的字符串，v-text和v-html所表现出来的内容是一样的，都是hello world；但是两种还是有所区别的：当上述主要内容改成：
<body>
<div id="root">
<div v-text="content"></div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"<h1>hello world</h1>"
}
})
最后显示出来的为:<h1>hello world</h1>
但是当v-text改成v-html，代码最后显示出来的内容就是hello world，
故v-text所要表达的内容是已经转义过的内容，<h1></h1>这两个符号都已经被转义成为内容；v-html所要表达的是未被转义过的内容，所以<h1></h1>标签没有显示出来。
那么在HTML中绑定文本，现在就有了三种方法：1、mustache，即差值表达式；
2、v-text；3、v-html
差值表达式和v-text的区别在哪里？
在网速比较慢的情况下，差值表达式中的内容会立即显现，但是不会显现出渲染的情况，即就是只会显现出双花括号和括号中的内容，等待一切都加载完毕，渲染效果才会出现；但是使用v-text的话，如果在网速较慢的情况下，根本不会显示任何内容，等待一切都加在完毕，才会显现出内容（即内容和渲染的效果一起出现）；
在Vue的框架中，v-什么，等于号后面的引号内不是字符串，是Vue的特定写法，如果确实想加字符串，以上面的为例，可以写成：
<div v-text="content+'world'"></div>
这样的话最后的结果会显示成：hello worldworld。
如何给模板上的标签绑定一个事件：
举个例子，例子的主要内容如下：
<body>
<div id="root">
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"hello"
}
})
</script>
</body>
现在要绑定的事件为：点击显示的结果（hello），结果会变成其他内容（world）。
可以写成这样：<div v-on:click="handleClick">{{content}}<div>
在模板的div标签中加入模板指令v-on：，v-on：的作用是向所在的标签中绑定所要绑定的事件，click为所要绑定的事件，事件触发时，会执行handleClick方法,
方法定义:在Vue实例中方法定义在methods属性中，可以写成：
methods:{
handleClick:function(){
this.content = "world"
}
}
现在例子的主要内容变成：
<body>
<div id="root">
<div v-on:click="handleClick">{{content}}<div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"hello"
},
methods:{
handleClick:function(){
this.content = "world"
}
}
})
</script>
</body>
点击hello，结果hello将变成world
另：模板指令v-on：可以写成@，所以v-on:click可以写成@click
网友评论