Vue常用指令及使用
Vue 常用指令
指令是以数据去驱动DOM行为，简化DOM操作。常用指令如下
v-text innertext，不能解析文本中的html标签
v-html innerhtml，可解析文本中的html标签
v-show 控制元素的显示、隐藏
v-if、v-else-if、v-else 满足条件才显示对应的元素
v-for 遍历数组、对象
v-bind 单向数据绑定
v-model 双向数据绑定
v-on 事件绑定
demo v-text、v-html、v-show
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
new Vue({
el:'#div1',
template:'', //相当于'{{info}}
'
data:function(){
return{
info:"are you ok?" //如果里面含有html标签，不解析，直接作为文本输出
}
}
});
new Vue({
el:'#div2',
template:'',
data:function(){
return{
info:"are you ok?
" //会解析里面的html标签
}
}
});
new Vue({
el:'#div3',
template:'are you ok?
', //指定一个变量，变量名不一定要是display，什么都行。display不是指的css属性名
data:function(){
return{
display:true //boolean值，true——显示，false——不显示（隐藏），不再占据空间
}
}
});
</script>
demo v-if系列 条件判断
<div id="app">
<p v-if="score>80">优秀</p>
<p v-else-if="score>60">及格</p>
<p v-else>不及格</p>
</div>
<script>
new Vue({
el:'#app',
data:function(){
return{
score:85
}
}
});
</script>
满足条件才显示对于的元素。
new Vue()中，template、data均可选。
所谓template 模板，就是内容的模板，内容（包括指令）可以写在元素里、也可以写在template里
<div id="app1">姓名：{{name}}</div> <!--直接写在元素里-->
<div id="app2"></div>
<script>
new Vue({
el:'#app1',
data:function(){
return{
name:'chy'
}
}
});
new Vue({
el:'#app2',
template:'姓名：{{name}}
', //写在template里
data:function(){
return{
name:'chy'
}
}
});
</script>
效果是一样的。
return { } 返回的是一个对象。
data的2种写法
data:function(){ //指向匿名函数
return {
content:20
}
},
data(){ //直接作为函数名
return {
content:20
}
},
效果都是一样的。
demo v-for 遍历数组、对象
<ul id="app1">
<li v-for="(item,index) in array">第{{index}}项：{{item}}</li> <!-- index从0开始。一个元素填充一个li -->
</ul>
<ul id="app2">
<li v-for="(key,value) in object">{{key}}：{{value}}</li> <!-- item、index、array、key、value、object都是变量，可以自己指定，不是固定的 -->
</ul>
<script>
new Vue({
el:'#app1',
data:function(){
return{
array:["手机","平板","电脑"] //数组
}
}
});
new Vue({
el:'#app2',
data:function(){
return{
object:{name:'chy',age:20} //对象
}
}
});
</script>
demo v-bind、v-model 单双向数据绑定
<div id="app1"></div>
<div id="app2"></div>
<script>
new Vue({
el:'#app1',
//单向绑定，value指定变量名，内存中变量值的变化会同步到视图，但视图中值的变化不会影响|同步到内存中的变量
//如果其他属性要使用此变量值，属性名前面加冒号，比如这局代码的class="chy"
template:' 值是{{name}}',
data:function(){
return{
name:'chy' //内存中的变量值
}
}
});
new Vue({
el:'#app2',
//双向绑定，内存中变量值的变化会同步到视图，视图中值的变化也会同步到内初变量
template:' 值是{{age}}',
data:function(){
return{
age:20
}
}
});
</script>
可以 v-bind|model:value=“变量名” 来绑定，也可以 v-bind|model=“变量名” 来绑定，相比而言，后者更简单。
v-bind|model与绑定时，是与的value绑定。
demo v-on 事件绑定
<div id="app1"></div>
<div id="app2"></div>
<script>
new Vue({
el:'#app1',
//可以修改内存中的变量，但不能直接执行alert()、console.log()之类的语句
template:'',
data:function(){
return{
content:'btn1'
}
}
});
new Vue({
el:'#app2',
// 也可以调用方法，要执行什么语句需要放在方法中。指定方法名
template:'',
data:function(){
return{
content:'btn2'
}
},
methods:{
showInfo:function(){ //冒号前面写方法名
alert("you clicked btn2");
}
// 可以写多个方法，逗号分隔
}
});
</script>
template中可以写很多内容
<div id="app"></div>
<script>
new Vue({
el:'#app',
template:'this is a title
this is first paragraph
this is second paragraph
',
data:function(){
return{
content:'btn1'
}
}
});
</script>