目录
1、MVVM模式
- vue是一个很火的js MVVM库,它是数据驱动和组件化的思想构建的。数据驱动,无须操作DOM,将DOM和数据绑定起来,一单绑定,DOM和数据保持同步,也就是双向数据绑定。
- mvvm 是model view viewModel的简写,viewModel是vue的核心
- 使用vue的过程就是定义mvvm各个组成部分的过程
- 定义view(视图)
- 定义model(数据)
- 创建一个vue实例(viewModel),他用于连接view和model(实例)
2、v-if,v-else,v-else-if
v-if
是条件渲染指令,它根据表达式的真假来删除和插入元素,不符合v-if条件的,就不会出现在dom中,不会被渲染到html中,后面跟着的v-else,v-else-if也不会被渲染- expression是一个返回布尔值的表达式,也可以是一个布尔属性。
- v-if可以绑定在html元素上,也可以在template元素上使用v-if条件渲染分组。
- v-else必须跟在v-if或者v-else-if后面否则他不会被识别
1、语法:
v-if="expression"
2、直接绑定在html上:
<h1 v-if="age>=20">{{age}}</h1>
3、放在template元素上:
<template v-if="[1,2,3].length>5 ">
<div class="red">
呵呵哈哈哈或
</div>
</template>
4、v-if和v-else,v-else-if例子
<div v-if="type==='A'">
A
</div>
<div v-else-if="type==='B'">
B
</div>
<div v-else-if="type==='C'">
C
</div>
<div v-else>
Not A、B、C
</div>
3、v-show,v-else,v-else-if
- 另外一个用于根据条件展示元素的选项,用法大致与v-if一致。
- 唯一不同的是,v-show属性元素会渲染并保留在dom中,只是简单的切换元素的css属性display.
- 如果元素使用了v-show,后面跟着这使用的v-else,v-else-if也在被渲染在DOM中,
- v-else必须跟在v-if或者v-else-if后面否则他不会被识别
4、v-on指令
v-on
指令用于给监听DOM事件,比如click事件- v-on有两种调用方式:绑定一个方法(让事件指向方法的引用);使用内联语句
<div id="vueTpl"> <p><input type="text" v-model="message"></p> <p> <!--click事件直接绑定一个方法--> <button v-on:click="open">open</button> </p> <p> <!--click事件使用内联语句--> <button v-on:click="say('Hi')">Hi</button> </p> <p> <!--click事件简写--> <button @click="say('Hi')">Hi</button> </p> <p> <!--click事件传递参数,一个参数--> <button @click="fun1('single')">Hi</button> </p> <p> <!--click事件传递参数,两个参数--> <button @click="fun2('single','20')">Hi</button> </p> <p> <!--click事件传递参数,当前事件对象,可以获取当前元素,对元素做处理--> <button @click="fun3($event)">Hi</button> </p> <p> <!--click事件传递参数,参数变量,当前参数是vue实例里面的数据属性 item.name假如是vue对象属性--> <button @click="fun4(item.name)">Hi</button> </p> </div> <script> // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model var vm=new Vue({ el: '#vueTpl',//vm实例挂载再id为vueTpl的html元素上 data: {//这是model msg:'hello word' }, method:{ open:function(){ alert(this.msg);//this vm实例 }, say:function(msg){ alert(msg); }, fun1:function(val){ alert(val); }, fun2:function(val,val2){ alert(val1+val2); }, fun3:function(event){ var obj=event.currentTarget;//当前元素,obj是DOM对象 }, fun4:function(val){ alert(val); } } }) </script>
5、v-bind指令
- 属性绑定,v-bind:title可以简写成:title
- v-bind指令可以再其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是html元素的属性,例如:v-bind:class v-bind:src等等
-
动态地绑定一个或多个特性,或一个组件 prop 到表达式。
-
在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
-
没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
-
绑定计算属性,计算属性特性:只有被绑定的状态值发生变化时,则计算属性的值才会重新计算得出最新结果,因为计算属性会缓存计算结果。通过修改计算属性
computedClsObj
绑定的状态值,可以触发计算属性重新计算值,从而触发 UI 更新显示。 -
绑定数组:绑定数组的时候,数组元素可以是普通类型,如果需要绑定状态值来决定是否使用样式,则可以用三元符表达式最后取结果的值,也可以直接指定元素为对象。
-
绑定函数返回值
-
<!-- 绑定一个属性,定义样式 --> <span class="progress" v-bind:style="{width:list.percent+'%'}"></span> <!-- 绑定一个属性,把vue数据赋值给自定义属性 --> <div v-bind:data-code="list.code"></div> <!--数据不能直接展示,需要前端处理的时候,定义一个过滤器进行数据处理,initData方法名--> <input type="text" v-bind:value="list.coverageYear | initData" > <div v-bind:class="index==0? 'weui-cell__ft down': 'weui-cell__ft' "></div> <!--循环item.children,data-index的值等于第一循环的index索引,加上当前对象的索引,中间有个‘g’字符串,区分 --> <div v-for="(subItem,subIndex) in item.children" v-bind:data-sikeness="subItem.lable" v-bind:data-index="index+'g'+subIndex" > <!-- 绑定一个属性 -,class值为card1,card2--> <div v-for="(item,index) in page2Data.env_info" v-bind:class="'swiper-slide card'+(index+1)" ></div> <!--传递多个参数,参数之间以逗号分隔--> <a class="weui-cell download" v-bind:href="item.url,item.fileUrl | dealUrl" v-if="item.url.indexOf('pdf')>=0" v-for="item in list"></a> <!--绑定多个class,active对应的class名称--> <h1 :class="[active,active2]">{{msg}}</h1> <!--绑定多个style--> <h1 v-bind:style="[more]">{{msg}}</h1> <!-- 绑定字面量对象,class是active,根据isActive的值来决定是否添加样式active--> <div id="test" v-bind:class="{ active: isActive }">哈哈</h1></div> <!--绑定计算属性--> <div id="test" class="test" v-bind:class="computedClsObj">哈哈</div> <!--绑定数组,普通数组--> <div id="test" v-bind:class="[active,active1]">哈哈</div> <!--绑定数组,三元操作符--> <span v-bind:class="list.age>'18'?'s1 f30 red':'s1 f30 blue'">{{list.age}}</span> <!--绑定函数返回值--> <span :style="{background:!flag?deep:BackType(sign.status)}">{{list.age}}</span> </div> <script> var vm=new Vue({ el:'#vueTpl', data:{ msg:'hello world', active:'red', active2:'bolder', more:{ background:"yellow", color:"red" }, isActive:true,//显示class,false就不显示class error:null }, filters:{ initData:function(val){ if(val) return val.split(',')[0]; }, dealUrl:function(val1,val2){ //对val1 val2进行处理 return val1+val2 } }, computed:{ computedClsObj:function(){ return{ active:this.isActive && this.error, 'text-danger':this.error && this.error.type==='fatal' } } }, methods:function(){ BackType:function(status){ if(status=='1') return '#000'; else if(status=='2') return '#fff'; } } }); </script>
v-bind指令总结:绑定样式方式
-
类名 v-bind:class="focus"
-
类名数组 v-bind:class="['focus','shine']"
-
样式对象 v-bind:class="{'focus':true/false,'shine':true/false}",这种方式会根据样式名来作为键的值来决定是否采用,如果为false,就不显示样式
-
对象数组 v-bind:class="[{'focus':true},'shine':false]"
-
绑定内联样式对象形式:v-bind:class="{background:'red'}"
-
数组形式:v-bind:style="[{background: 'red'}, {fontSize: '22px'}]"
6、v-model双向数据绑定
7、计算属性与侦听器
- computed:fullname属性,根据firstname,lastname属性计算而来,当firstname,lastname的值不改变的时候,fullname会上线上一个缓存的值
- watch:侦听器,侦听一个值的变化,检测某个数据或者计算属性发生变化,在侦听器里面写自己的业务逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue基础</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstname">
名:<input type="text" v-model="lastname">
<div>{{fullname}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstname:'',
lastname:'',
count:0
},
computed:{//计算属性
fullname:function(){
return this.firstname+' '+this.lastname;
}
},
watch:{//侦听器
fullname:function() {
this.count++;
}
}
})
</script>
</body>
</html>
8、v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue基础</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<p>循环的时候加个key值,可以提高性能</p>
<ul>
<li v-for="(item,index) of list" :key="item">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in list" :key="index"> {{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
list:[1,2,3,4]
}
})
</script>
</body>
</html>