mutache 语法糖
- 基础模板语法
v-for
-
v-for
- 数组 v-for = " (item,index) in arr " item是arr中每一个元素
- 对象 v-for = "(item,key,index) in obj " item是obj的属性值
- json类型数据
- 嵌套类型数据
-
key:
给没一个循环的列表添加一个唯一的标识 -
使用指令 v-bind 来绑定 key
<div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>!!!如果有id，那么我们就使用id，如果没有，我们才会选择index
v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上简写
<div v-for = " (item,index) in lists" :key = " item.id "></div>// for( var i = 0 ; i < 100; i ++ ){} // for( var i in arr ){} // for ( var i of arr ) {}
v-show与v-if区别
-
指令： ( 是绑定在dom属性上 )
-
v-show
可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ） -
v-if
可以控制一个dom的存在与否（ 创建 和 销毁 ） -
面试题（ 实用题 ） 【 钻石 】
-
v-if vs v-show 区别
-
实用： 项目中 如何选择这两个使用
- v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
- v-show 操作的是dom元素的display属性
- v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
- v-show 只能写一个单路形式
-
总结：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。
v-else / v-else-if
- 必须和v-if连用 不能单独使用 否则报错 模板编译错误
<div id="box"> <div style="width: 100px;height: 100px;background: black;" v-if="show"></div> <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div> <div style="width: 300px;height: 300px;background: blue" v-else=""></div> </div> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-html/v-text
- v-html 解析html标签
<div id="box"> <div v-html="msg"></div> </div> <script> new Vue({ el: "#box", data(){ return { msg:"<h1>121212</h1>" } }, methods: { say() { } } }) </script> - v-text 解析文本(v-text读取文本不能读取html标签)
1 <div id="box"> 2 <div v-text="msg"></div> 3 </div> 4 5 <script> 6 new Vue({ 7 el: "#box", 8 data(){ 9 return { 10 msg:"11111" 11 } 12 }, 13 methods: { 14 say() { 15 alert(111); 16 } 17 } 18 }) 19 </script>
v-bind:指令class类名绑定与style
- vue中如何给dom添加类名
- 直接在dom上绑定类名
- vue中类名绑定 - 对象形式
目的： dom身上属性class 要和 数据绑定
解决：v-bind
数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样<p :class = "{ size,bg_color }"></p> size是自定义的属性， 它的属性值是undefined， 相当于是false <p :class = "{ size: true, bg_color: true }"></p> size也是自定义属性，他的属性是true,那么就会加上去 <p :class = "{ [s]: true, [bg_color]: true }"></p> 格式： v-bind:class = "{ 属性 (默认true) }" 格式： v-bind:class = "{ 属性： boolean }" 格式： v-bind:class = "{ [data]： boolean }"new Vue({ el: '#app', data: { msg: 'hello Vue.js', s: 'size', bg_color: 'bg_color', flag: true } }) - vue中类名绑定的形式 - 数组的形式 【 推荐 】
格式： v-bind:class = “[ 数据 ]”<p :class = "['size','bg_color']"></p> <p :class = "[ s, bg_color ]"></p> <p :class = "[ flag? s:'box', bg_color]"></p> <p :class = "[ flag? s:'box', bg_color]" class = "yyb"></p> - 类名绑定不会覆盖原先的类名
- 为什么要绑定类名
指令是用来操作dom
目的： 为了将来通过数据来操作类名，类名操作dom
- style样式的绑定
v-bind: style = ""- 对象的形式
<p :style = "{ width: size.width,height: size.height,background: 'red'}"></p> - 数组的形式
<p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p> <p :style = "[ size,bg ]"></p>
- 对象的形式
v-on:指令event事件绑定
Vue事件引出:
- 问题： javascript事件添加有几种形式
- 事件绑定(普通事件)
dom.onclick = function () {}
dom: 事件源
on: 绑定事件的形式
click: 事件类型
function（）{} 事件处理函数 - 事件监听 (事件绑定形式)：
dom.addEventListener(‘click’,function(){},false)
addEventListener (同一个对象绑定多个的事件不会被覆盖！)
false:表示冒泡传递(默认)
true:表示捕获传递 - 直接在标签中绑定事件
vue采用了第三种，也是通过属性的形式绑定在dom身上<div onclick = "事件名称"></div><div v-on:click = "事件名称"></div>
- 事件绑定(普通事件)
Vue中完整的事件流程:
<div v-on:clcik = "handlerName"></div>
- 事件源
- 事件绑定形式 直接在标签中绑定
- 事件类型 click点击事件
- 事件处理程序 handerName
- 参数
- 事件对象
- 简写 v-on: — > @
- 问题： 函数调用有哪些方法？
直接调用 ()
事件
<button @click = "helloHandler( 10,20,$event)"> 点击 </button>
解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象
- 事件对象也可以正常使用,在事件处理程序中， 写e就可以了
- 问题？：
如果事件处理程序中有三个参数，第三个参数才是事件对象e, - 如何实现分析？：
我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined
综合业务： 点击这个按钮，添加一条新的数据放在列表数据中
- 问题： 下标是不能检测变动的，但是我们现在看到了它检测到了
- 问题： 如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动
解决方法： 使用splice - 问题： 我们直接修改一个数组下的一个数据时，发现下标不能检测变动了
解决方法： 使用 Vue.set / this.$set
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
border: 1px solid #000;
height: 50px;
position: relative;
}
ul li input {
width: 99%;
height: 96%
}
.remove {
position: absolute;
right: 5px;
top: 15px;
}
.change {
position: absolute;
right: 50px;
top: 15px;
}
#app {
width: 500px;
}
</style>
<div id="app">
<ul>
<li v-show="addflag">
<input type="text" v-model="tempdata">
</li>
<li v-for="(list,index) in lists" :key="list.id">
{{list.task}}
<button @click="remove(index)" class="remove">删除</button>
</li>
</ul>
<button @click="addflag=!addflag" class="add">添加数据</button>
<button @click="add">提交数据</button>
<button @click="change">修改第二条数据</button>
</div>
new Vue({
el: '#app',
data: {
addflag: false,
lists: [
{
id: 1,
task: '任务一'
},
{
id: 2,
task: '任务二'
}
],
tempdata: '',
},
methods: {
add() {
this.lists.push({
id: this.lists.length + 1,
task: this.tempdata
});
this.tempdata = '';
this.addflag = !this.addflag;
},
remove(index) {
this.lists.splice(index, 1)
},
change() {
Vue.set(this.lists,'1',{
id:2,
task:"已修改"
})
}
}
})
扫一扫
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
