一、设置标签的文本值——v-text
通过v-text可以对标签的属性值进行设置,把data中的定义的数据实时绑定在标签上,
但是如果标签内部有内容,是会把里边的内容覆盖哦。
调试下边的代码试试吧!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vue学习(三)</title>
</head>
<body>
<div id="app">
<h3 v-text="message"> </h3>
<h3 v-text="message"> 你好! </h3>
<h3>你好!{{message}} </h3>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "吃饭了吗?",
}
})
</script>
</body>
</html>
当然对于v-text属性是可以使用字符串的拼接的,直接使用表达式的规则就可。
//div部分
<div id="app">
<h3 v-text="message+'我是'+name"> </h3>
<h3> {{message+'我是'+name}} </h3>
</div>
//script部分
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好!",
name: "默默"
}
})
</script>
二、设置innerHTML——v-html
用法与v-text相似,只是对于赋给他的值如果是HTML结构,就可以直接解析成相应的结构。
//div部分
<div id="app">
<h3 v-text="message"> </h3>
<h3 v-html="message"> </h3>
</div>
//script部分
<script>
var app = new Vue({
el: "#app",
data: {
message: "<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
三、绑定事件——v-on
书写方式:v-on:事件名="方法名"
简写方式:@事件名="方法名"
定义方法时写在methods里
下边的例子用的是最简单的单击事件,其他事件可以再官方文档中查看。
//div部分
<div id="app">
<input type="button" value="事件绑定" v-on:click="dolt">
<input type="button" value="事件绑定" @click="dolt">
</div>
//script部分
<script>
var app = new Vue({
el: "#app",
methods:(){
dolt:function(){
alert("你好呀!")
}
}
})
</script>
同样,函数也是可以传递参数的,用法同.net 语言,不再赘述。