指令
- 完成一定功能的方式
{{example}} 插值表达式
<div id="app">
{{msg}}
</div>
var vm = new Vue({
el:"#app",
data:{
msg:"我是标题";
})
输出=> 我是标题
v-html 渲染文本内容(可识别标签)
<div id="app">
<p v-html="msg"></p>
</div>
var vm = new Vue({
el:"#app",
data:{
msg:"<h1>我是标题</h1>";
})
输出=> 我是标题
v-text渲染文本内容(不可识别标签)
<div id="app">
<p v-text="msg"></p>
</div>
var vm = new Vue({
el:"#app",
data:{
msg:"<h1>我是标题</h1>";
})
输出=> <h1>我是标题</h1>
v-bind:name 绑定属性,name表示属性名
简写:name
<a v-bind:href="url" :title="oti">...</a>
var vm = new Vue({
el:"#app",
data:{
url:"https://www.baidu.com",
oti:'我是title'
})
v-if 条件渲染,指令的表达式返回值为true是添加元素到文档中(注意:如元素需频繁控制添加删除,会影响性能,建议使用v-show)
同时配套还有v-else-if和v-if,跟原生的if..else意义相同
//模拟淘宝收货评价按钮
<div id="app">
<button @click="confirmGoods" v-if="states==0">确认收货</button>
<button @click="confirmGoods" v-else-if="states==1">点击评论</button>
<button v-else="states==2">追加评论</button>
</div>
var appEl = document.getElementById('app');
var app = new Vue({
el:`#app`,
data:{
states:0
},
methods:{
confirmGoods(){
this.states = ++this.states;
console.log(this.states)
}
}
})
v-show 控制元素是否显示,方式为设置display属性的值
<div id="app">
<button v-show="seen">确认收货</button>
</div>
var app = new Vue({
el:`#app`,
data:{
seen:true
}
})
v-on:name 绑定事件,name:表示事件类型
简写:@name
<div id="app">
<button v-on:click="controlEl">点我</button>
<p v-show="seen">lorel ipsum</p>
</div>
var app = new Vue({
el:`#app`,
data:{
seen:true
}
methods:{
controlEl(){
this.seen=!this.seen
}
}
})
v-for:"(val,index) in arr" 列表渲染,val表示数组arr的元素(也可以是对象Object),index表示数组arr里面的下标值
- 使用
v-for时建议添加key属性,给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素,提高性能
<div id="app" key >
<ul>
<li v-for="(val,index) in arr" :key="val.id">{{val.val}} ------ {{index}}</li>
</ul>
</div>
var app = new Vue({
el:'#app',//vue作用的对象范围
//为数组的每个元素创建id
created(){
var _id = 1;
var newA = [];
this.arr.forEach((val)=>{
var obj = {
val,
id:_id
}
_id++;
newA.push(obj);
})
this.arr = newA
},
data:{
arr:['html','css','js','vue']
}
})
输出:
html ------ 0
css ------ 1
js ------ 2
vue ------ 3
同时,v-for="(value, key, index) in Object"还可以通过Object进行迭代渲染列表
index代表下标,value代表值,key代表属性
<div id="app">
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
</div>
new Vue({
el: '#app',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
输出
0:firstName:John
1:lastName:Doe
3:age:30
v-cloak 当数据未渲染的时候该指令生效,数据渲染之后则失效
主要作用是防止进入网页时,数据还没渲染出来,出现满屏的插值表达式{{}}
<style>
[v-cloak]{
display:none;
}
</style>
<div id="app" v-cloak></div>
v-slot 插槽
组件模板中建立插槽,当需要插入内容时在HTML中编写需要插入的内容
- 无名插槽:直接写需要插入的内容即可,内容将会插入到所有无名插槽中.
- 具名插槽:使用的时候将需要的内容写在template标签中,并且通过v-slot:name(name表示插槽的名字)
<div id="app">
<tab>
<template v-slot:header>//插入到名为header的插槽里
<div>我是插到header里面的元素</div>
</template>
<template v-slot:section>//插入到名为section的插槽里
<div>我插入到了section元素里面</div>
</template>
<div>hello world</div>//插入到无名插槽中
</tab>
</div>
//编写局部组件
var tab = {
template:`
<div>
<header>
<input type="text" placeholder="新不了情" />
<slot name="header"></slot>//具名插槽
</header>
<section>
<slot name="section"></slot>//具名插槽
</section>
<footer>
<slot></slot> //无名插槽
</footer>
</div>
`
}
//实例化Vue
var vm = new Vue({
el:"#app",
components:{
tab//注册局部组件
}
})
自定义指令
全局注册:
directive(name,callback(el,binding))
name:指令名称
callback(el,binding)回调函数,el渲染的元素,binding自定义属性
<div id="app">
<p v-color="red">hello world</p>
</div>
Vue.directive('color',function(el,binding){
//如果自定义指令内有指定参数就渲染里面的参数
if(binding.value){
el.style.backgroundColor=binding.value;
//否则渲染固定的
}else{
el.style.backgroundColor='green';
}
console.log(binding)
})
//实例化red
var vm = new Vue({
el:"#app",
data:{
red:"red"
}
})
