目录
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>