指令集:指令集是指指令的集合 ,而指令:凡是v-开头的都是vue指令
详细代码看最后
v-text v-html
1.初始化vue
这里使用setTimeout函数设置延迟1s后生成Vue对象(有用)
<script>
setTimeout(() => {
var vm= new Vue({
el:"#app",
data:{
msg:"<b>hello</b>",
count:1,
arr:[1,23,4],
obj:{
name:"zengyu",
age:14
},
isShow:false
},
mounted(){
console.log(this.msg);
},
methods:{
}
});
}, 1000);
2.在div为#app的代码html中,使用v-text,v-html
<div id="app">
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
v-html,v-text的作用
1.插入式与整体式的数据渲染
例如:
<p>{{msg}} niubi</p>
<p v-text="msg">niubi</p>
第一个会显示msg的数据+niubi,属于插入式的数据渲染
第二个只会显示msg的数据 属于整体式的数据渲染(v-html相同)
2.延迟加载
如果设置了延迟加载,v-text,v-html在延迟时间未到时,不会展示。插值表达式则显示{{msg}}字样的数据
<p v-text="msg">sdfs</p>
<p v-html="msg">sdfs</p>
<p>{{msg}}</p>
第一,第二个是没有数据的。甚至在生成代码的时候,如果vue对象未生成,该行数据就是空的
3.v-text与v-html的区别
这两个的区别可以与js中的innetText和innerHtml相比较:
如果指定的数据中有html标签,会将其渲染出来
注意:如无必要,尽量不使用或者禁止使用v-html,避免xss跨站脚本攻击。
v-if v-show
同样生成vue对象,与上面一致,省略
使用:
<p v-if="isShow">{{msg}}</p>
<p v-else> v-else --{{count}}</p>
<p v-show="isShow">{{msg}}</p>
v-if的作用就是如果条件为真,展示数据
v-show的作用与v-if相似
比较:
v-if:有更大开销,适用于不频繁切换显示状态,并且初始渲染时不必渲染 如果结果为false,则不显示任何数据。可以搭配v-else
v-show:开销较小 ,适用于频繁切换显示状态 。如果结果为false,则会添加一个style为none的样式
click
1.初始化vue
此时在methods中添加几个函数
PS:这里除了el和data,其他名称都是复数-_-
var vm=new Vue({
el:"#app",
data:{
msg:"hello",
count:1,
arr:[1,23,4],
obj:{
name:"zengyu",
age:14
},
isShow:false
},
mounted(){
},
methods:{
clickMe(){
this.msg="惦记我也没有用"
},
clickThis(param){
this.msg=param
},
clickOnce(){
alert("触发了我")
},
clickPrevent(){
alert("我也被触发了");
}
}
});
2.使用
1.基本写法是:v-on:click。@click是它的简写
例如:
<button v-on:click="clickMe">惦记我</button>
<button v-on:click="clickThis(`这下有用`)">惦记我1</button>
<button @click="clickThis(`这下有用`)">惦记我2</button>
如果函数无参,此处clickMe函数加不加()都无所谓
2.@click.stop,@click.prevent@click.once
以上三个是click中最常用的
stop :防止冒泡事件。其实就是在当前div中,除该事件外,外部事件不能触发
prevent:取消默认事件,如果本标签还有其他的默认事件,比如跳转页面等
once:只生成一次,即只能点击一次,后续点击无效(除非刷信本页面)
<!-- 只触发一次 -->
<button @click.once="clickOnce(`这下有用`)">惦记我一次</button>
<!-- 取消默认事件 -->
<a href="https://baidu.com" @click.prevent="clickPrevent" > 禁止跳转百度</a>
<!-- 取消冒泡事件(嵌套的事件) 可以阻止外层的事件-->
<div @click="alert(1)">
<div @click.stop="alert(2)">
<div @click="alert(3)">阻止冒泡</div>
</div>
</div>
chage input
change:每次失去/获取焦点都会触发事件
input:每次输入都会触发事件
@是v-on的简写
<input type="text" @change="loseFocus">
<input type="text" @input="inputChage">
详细代码1:v-text,v-html,v-if ,v-isShow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>vue指令 1 v-text v-if</title>
<!-- 凡是v-开头的都是vue指令 -->
</head>
<body>
<div id="app">
<!-- v-text,v-html可以与innerText,innerHtml相比较 -->
<!-- 此处v-text,v-html与插值表达式的区别是:
1.如果设置了延迟加载,v-text在延迟时间未到时,不会展示,差值表达式则显示{{msg}}字样的数据
2.<p>{{msg}} niubi</p> 会显示niubi -插入式的数据渲染
<p v-text="msg">niubi</p> 此时插值表达式将niubi替代掉,只显示msg的值 --整体式的数据替换 -->
<!-- 注意:如无必要,尽量不适用或者禁止使用v-html,避免xss跨站脚本攻击 -->
<p v-text="msg"></p>
<p v-html="msg"></p>
<!-- v-if 有更大开销,适用于不频繁切换显示状态,并且初始渲染时不必渲染 如果结果为false,则不显示任何数据
可以搭配v-else
v-show 开销较小 ,适用于频繁切换显示状态 如果结果为false,则会添加一个style为none的样式 -->
<p v-if="isShow">{{msg}}</p>
<p v-else> v-else --{{count}}</p>
<p v-show="isShow">{{msg}}</p>
</div>
<script>
var vm= new Vue({
el:"#app",
data:{
msg:"<b>hello</b>",
count:1,
arr:[1,23,4],
obj:{
name:"zengyu",
age:14
},
isShow:false
},
mounted(){
console.log(this.msg);
},
methods:{
}
});
</script>
</body>
</html>
详细代码2:click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>指令集 click </title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- 无参时,此处clickMe函数加不加()都无所谓 -->
<!-- @表示v-on:click的简写形式 -->
<button v-on:click="clickMe">惦记我</button>
<button v-on:click="clickThis(`这下有用`)">惦记我1</button>
<button @click="clickThis(`这下有用`)">惦记我2</button>
<!-- @click.once @click.prevent @click.stop 最常用的 -->
<!-- 只触发一次 -->
<button @click.once="clickOnce(`这下有用`)">惦记我一次</button>
<!-- 取消默认事件 -->
<a href="https://baidu.com" @click.prevent="clickPrevent" > 禁止跳转百度</a>
<!-- 取消冒泡事件(嵌套的事件) 可以阻止外层的事件-->
<div @click="alert(1)">
<div @click.stop="alert(2)">
<div @click="alert(3)">阻止冒泡</div>
</div>
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"hello",
count:1,
arr:[1,23,4],
obj:{
name:"zengyu",
age:14
},
isShow:false
},
mounted(){
},
methods:{
clickMe(){
this.msg="惦记我也没有用"
},
clickThis(param){
this.msg=param
},
clickOnce(){
alert("触发了我")
},
clickPrevent(){
alert("我也被触发了");
}
}
});
</script>
</body>
</html>
详细代码3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>指令集 change</title>
</head>
<body>
<div id="app">
<!-- change文本框失去焦点时触发 input 只要改变就会触发 -->
<input type="text" @change="loseFocus">
<input type="text" @input="inputChage">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"hello",
count:1,
arr:[1,23,4],
obj:{
name:"zengyu",
age:14
},
isShow:false
},
methods:{
loseFocus(){
alert("失去焦点了")
},
inputChage(){
console.log( "输入框被改变了");
}
}
});
</script>
</body>
</html>