本地应用
1. 内容绑定,事件绑定
2. 显示切换,属性绑定
3. 列表循环,表单元素绑定
v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>data</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" >
<p></h2><h2>{
{message+'打工人'}}</h2></p>
<h3 v-text="message+'打工人'"></h3>
<h4 v-text="info+'打工人'"></h4>
<h5>{
{message+'打工人'}}</h5>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"今天也要加油哦!",
info:"加油"
}
})
</script>
</body>
</html>
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式{
{}}可以替换指定内容
- 内部支持写表达式
v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>今天也要加油哦!</a>"
}
})
</script>
</body>
</html>
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
v-on基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doit"></input>
<input type="button" value="v-on简写" @click="doit"></input>
<input type="button" value="双击事件" @dblclick="doit">s</input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
methods:{
doit:function(){
alert("做IT");
}
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"</