vue指令问题

挂载点：最外层标签就是vue实例的挂载点，即id或者类对应的
dom节点

模板：指挂载点内部的内容，在实例里使用template标签来构

建

h1标签放在body里面不使用 “template”是一样的效果；
{{msg}}：插值表达式

new Vue({
el:"#root",

template:'<h1>hello {{msg}}</h1>',

data:{
msg:"world" ,
content:"this is content"
}
})

指令：v-text 会转义即会将标签名原样输出
v-html 不会转义，即只会输出标签内的内容不会输出

标签
v-on:click = @click

核心：对数据进行操作，数据改变了页面内容也就随着一起改变

数据决定页面的显示，页面无法左右数据的内容

属性绑定：
模板指令
v-bind:title="title" == ：title="title"
<div v-bind:title="title"></div>
<input />
外部的content内容：<div>{{content}}</div>
<input :value="content"/>表示输入框的值就是

content的值，实现了单向数据绑定
但是输入框的值改变时外部的content并没有跟着一起改变。
<input v-modal="content"/>模板指令：当输入框的值

改变时，外部的contnet会跟着一起改变，实现了数据双向绑定

<input v-modal="firstName"/>
<input v-modal="lastName"/>
<div>{{fullName}}</div>

计算属性：当firstName的值没有改变且lastName值也没有改

变时，fullName会使用之前的计算缓存的结果输出，当依赖的

属性lastName或firstName其中一个值改变时 fullName才能改

变
new Vue({
el:"#root",

template:'<h1>hello {{msg}}</h1>',

data:{
firstName:'',
lastName:'',
count:0
},
computed:{//计算属性：
fullName:function(){
return this.firstName+''+this.lastName
},
watch:{//侦听器

fullName:function(){
this.count++
}
}
}
});

指令：
<div v-if="show">hello world</div>
<div v-show="show">hello world</div>
//表示要循环的列表是list：循环后放在item中,每次item的

值不同，:key="index"可以换成:key="item"。
<ul>
<li v-for="(item,index) of list" :key="index">

{{item}}</li>
</ul>
<button @click="change"></button>
new Vue({
el:"#root",

data:{
show:true,
list:[1,2,3]
},
methods:{
change:function(){
this.show=!this.show;//控制显示或隐藏
}
}
});

v-if 指令实现的效果是显示或者隐藏，但是实质是当show值

为false时，整个被操作的标签完全删除，当show值为true时

，被操作的整个div又重新生成并显示出来

v-show：指令：也是实现了显示或隐藏，但是
当show值为false时，被操作的标签元素会自动加上一个属性

：display:none。

v-for：指令：当有数据需要循环展示时：就使用该指令输出

巴特西

vue指令问题

最新文章

热门文章