指令属性的基本使用
1.v-cloak 主要为了解决插值表达式的闪烁问题
4.插值表达式与v-text/v-html的区别
对于元素中已存在的值，只有插值表达式能够将原有的值保留，在原有的已经存在的值的基础上添加动态数据
使用 v-text和v-htmI之所以不能够保留元素标签对中原有的内容是因为在使用以上两个指定属性之前,会提前将标签对中的内容先清空掉,在赋予动态的值。如果未来的实际项目开发,需求为在原有的内容的基础上,追加动态的值,我们要选择使用插值表达式。
从另一个方面来看,插值表达式虽然会出现页面闪烁的现象( v-text和vhtm不会出现页面闪烁的情况),但是对于原有内容的保留,只有插值表达式能够完成,所以插值表达式具有不可替代的优势。
对比 v-text和 v-html
v-text:主要是用来赋予纯内容的如果赋予到元素中的内容本身包含html,那么 v-text会将htm原封不动的展现在页面上,这些内容是得不到浏览器的解析的
v-html:除了能够为前端元素赋予内容之外,更重要的是,如果内容本身含有htm代码,那么赋值后最终展现出来的结果,html元素会得到浏览器的解析的。
5.v-bind 提供用于 绑定属性的指令
简写形式 ： 去掉v-bind 只用：
<body>
<div id="app">
<input type="text" v-bind:value="str1">
<p v-bind:title="str2">content...</p>
<input type="button" value="submit" :title="str3">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa",
"str2":"bbbbbb",
"str3":"ccccccc"
}
})
</script>
</body>2-4 使用v-on事件绑定
简化 @
<body>
<div id="app">
<input type="text" :value="str1">
<input type="button" value="点击" v-on:click="fun1"/>
<input type="button" value="点击2" @click="fun1"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
//methods可以定义多个 函数，多个函数之间可以逗号分隔
methods:{
fun1(){
alert("abc");
}
}
})
</script>事件修饰符的使用
a.stop
使用.stop来对事件的冒泡机制进行阻止
js中的事件的冒泡指的是,在触发了内层元素的同时,也会随之继续触发外层元素(外层元素包惠了内层元素)在做点击的过程中,点击了内层元素,也可以认为是同时点击了外层元素。所以两个事件都会触发。
在实际项目开发中,几乎没有太多需求会使用到这种事件冒泡的机制,所以我们需要阻止事件的冒泡。阻止事件冒泡之后的效果是,在我们点击了内层元素之后内层元素绑定的事件触发触发完毕后,由于事件冒泡被阻止,就不会继续触发外层元素的事件了。
<body>
<div id="app">
<div style="width: 200px;height: 200px;background-color: red;"@click="fun1">
<div style="width: 100px;height: 100px;background-color: blue;"@click.stop="fun2">
</div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
})
</script>
</body>b.prevent 阻止链接的默认行为 禁止href
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击</a>
<a href="http://www.baidu.com" @click.prevent="fun2">点击</a>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
})
</script>
</body>c.capture
使用.capture 实现捕获触发事件的机制
加入了.capture修饰符之后,先触发的是外层的dⅳ事件,后触发的是内层div事件。被,.capture修改之后,事件优先触发。
d.self
self实现阻止事件冒泡行为的机制(之前我们讲过了一个stop)
使用self实现的是阻止自身冒泡的行为(它不会真正的阻止冒泡)
e.once
使用once修饰符，只触发一次事件处理函数
.once 需要结合.prevent 来使用
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击</a>
//阻止跳转
<a href="http://www.baidu.com" @click.prevent="fun1">点击2</a>
//第一次点阻止跳转，触发点击事件，第二次点直接跳转
<a href="http://www.baidu.com" @click.prevent.once="fun1">点击3</a>
</div>使用v-model实现双向数据绑定
v-bind 只能实现单向绑定，从m绑定到v
v-model 基本使用
双向数据绑定 不仅m可以影响v v也能改变m
使用v-mode可以对数据进行双向的綁定操作。值得注意的是,由于记载页面元素值的需求都是发生在表单元素中,所以v-mode只能运用在表单元素中。form
<input>系列 type: text; hidden, checkbox, radio。。。
<textarea> <select>
（1）class 样式的使用
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>好</title>
<style>
.style1{
background-color: brown;
}
.style2{
font-style:italic;
}
.style3{
font-size:30px;
}
</style>
</head>
<body>
<div id="app">
<span :class="['style1','style2',flag?'style3':'']">helloword</span>
<span :class="['style1','style2',{'style3':flag}]">helloword</span>
<span :class="{style1:true}">helloword</span>
<span :class="mystyle">helloword</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa",
flag:false,
mystyle:{style1:false,stylr2:true}
},
methods:{
}
})
</script>
</body>
</html>案例1:传递一个class样式的数组,通过 v-bind做样式的绑定该形式与之前的形式没有太大的区別
:class="[样式1,样式2]"
案例2:通过三目(元)运算符操作以上数组boolean?true执行 false执行
案例3:使用对象(json)来表达以上三目(元)运算符的操作{样式flag}
案例4:以对象引用样式
:class={};
案例5：mystyle:{style1:false,stylr2:true}
(2)style样式补充
在实际项目开发中,对于stye样式的使用,没有class使用的广泛,通常 style属性仅仅只是对个别指定元素的样式进行的进一步补充使用
案例1:引用样式对象
:style="引用样式对象"
注意:在写 color这样的样式属性的时候,由于仅仅只是一个单词,所以不需要加引号,开发中的大多数的样式都是包含横杠(-)的,例如: font-style, background- color等等,在使用这样带有-的演示属性的时候，必须套在引号中。
案例2：引用样式对象数组
:style="[样式对象1，样式对象2]"