1、el挂载点和data
- Vue会管理el选项命中的元素及其内部的后代元素，可以使用其他的选择器，但是建议使用id选择器
- Vue中用到的数据定义到data中，data中可以写复杂类型的数据，渲染复杂类型数据时，遵守js的语法就可以
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<span>{{message}}</span>
</div>
<div class="app2">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",//挂载点
data:{
message:"hello vue"
}
});
var app2=new Vue({
el:".app2",
data:{
message:"hello vue2"
}
})
</script>
</body>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<h2>
{{stus.name[1]}}
</h2>
<h3>
{{stus.name[2]}}
</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello data",
stus:{
name:["mike","amy","jack"],
num:111111111
},
city:["guangzhou","beijing","shanghai"]
}
})
</script>
</body>
2、v-text
设置标签的文本值
- 若使用
v-text指令，将会把标签内的文字全部替换 - 或者用差值表达式进行部分替换
- 在
v-text指令内进行字符串拼接，内部支持写表达式
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-text="message">1111111</h2>
<h2 v-text="name">11111111</h2>
<h2>{{message}}11111111</h2><!--只有这个的111才显示-->
<h2 v-text="message+'11111111'"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"v-text",
name:"mike"
}
})
</script>
</body>
3、v-html
设置标签的innerHTML
v-html指令作用式设置元素的innerHTML，内容中有html结构会被解析成标签v-text指令不论是什么内容，只会解析成文本- 解析文本用
v-text，解析html结构使用v-html
<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-html="baidu"></p>
<p v-text="baidu"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
baidu:"<a href='https://www.baidu.com/'>百度<a>"
}
})
</script>
</body>
4、v-on
为元素绑定事件
- 事件名不用写on
- 指令可以
v-on简写为@ - 绑定的方法定义在
methods属性中 - 方法内部通过
this关键字可以访问修改定义在data中的数据
<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">
<button v-on:click="sayHi">按钮</button>
<button @click="sayHi">按钮</button>
<button @dblclick="addReally">really</button>
<p> {{feeling}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
feeling:"happy"
},
methods:{
addReally:function(){
this.feeling+="really!"
},
sayHi:function(){
alert("你好呀");
}
}
})
</script>
</body>
