核心思想:数据驱动视图
MVVM
声明式指令
一、条件渲染
1、v-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> other </div>
script
var app = new Vue({ el: '#app', data: { name: "tom", age: 24, show: false, type: 'B', isShow: false, },
2、v-show
<h2 v-show="isShow">嘿嘿嘿</h2>
注意:区别
v-if : 真正的条件渲染,切换开销高
v-show: 惰性条件渲染,初始化开销高,利用css的display:none
3、v-if与v-for一起使用
v-for的优先级高于v-if,一般v-if和v-for不一起使用
二、class 与 style
1、v-bind
绑定字符串
与属性进行绑定
格式:v-bind:属性名称="变量名称"
<img v-bind:src="imgSrc" v-bind:alt="alt" v-bind:title="title">
currentTime = new Date().toLocaleString();
data
imgSrc: "./images/1.jpg", title: '老婆', // 模板字符串 alt: `加载时间${currentTime}`,
绑定style
style
<style> .c1 { height: 200px; width: 200px; background-color: brown; } .c2 { height: 200px; width: 200px; background-color: blue; } </style>
html
<div class="c1" v-bind:class="{c2: isBlue}"></div> <button v-on:click="changeColor">切换颜色</button>
data
isBlue: false,
methods
changeColor(){ this.isBlue = !this.isBlue; }
绑定html
v-html
<div v-html="s"></div>
s:"Hi",
三、事件监听
v-on:操作="函数名"
简写@操作="函数名"
methods
1.clcik 2.mouseenter 3.mouseleave
四、列表渲染
<div>
<img v-bind:src="currentSrc" alt="">
<ul>
<li v-for="(item, index) in imgArr" @click="clickImg(item)">{{index+1}}</li>
</ul>
</div>
data
imgArr: [ {id:1, src: "./images/1.jpg"}, {id:2, src: "./images/2.jpg"}, {id:3, src: "./images/3.jpg"}, {id:4, src: "./images/4.jpg"}, ], currentSrc: "./images/1.jpg", currentIndex: 0,
methods
clickImg(item){ // console.log this.currentSrc = item.src; }, nextImg(){ // alert(123) console.log(this.currentIndex) console.log(this.imgArr.length-1) if(this.currentIndex==this.imgArr.length-1){ this.currentIndex = 0; } this.currentIndex += 1; console.log(this.imgArr[this.currentIndex].src); this.currentSrc = this.imgArr[this.currentIndex].src; }
五、声明周期
created(){}方法
六、计算属性
computed
1.
<div id="computed">
<div>
{{reverseStr}}
</div>
<button @click="clickHandler">修改</button>
</div>
computed:{ reverseStr(){ return this.msg.split('').reverse().join(''); }, },
methods:{ clickHandler(){ // alert(123) this.msg = "Hello China"; }, },
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>计算属性</title> </head> <body> <div id="computed"> <div> {{reverseStr}} </div> <button @click="clickHandler">修改</button> </div> <script src="./js/vue.js"></script> <script> var com = new Vue({ el: '#computed', data:{ msg: "Hello World", }, methods:{ clickHandler(){ // alert(123) // this.msg = "Hello China"; this.reverseStr = "Hello China"; }, }, computed:{ reverseStr:{ set:function(newValue){ this.msg = newValue; }, get:function(){ return this.msg.split('').reverse().join(''); }, }, }, }) </script> </body> </html>
六、v-model 只和form组件有关
双向监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="computed"> <input type="text" v-model='msg'> <p>{{msg}}</p> </div> <script src="./js/vue.js"></script> <script> var con = new Vue({ el: "#computed", data:{ msg: "123", }, methods:{}, computed:{}, }) </script> </body> </html>
双向监听 = 单向监听 + UI
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="computed"> <!-- <input type="text" v-model='msg'> --> <input type="text" :value="getValue" @input="msgChange"> <p>{{getValue}}</p> </div> <script src="./js/vue.js"></script> <script> var con = new Vue({ el: "#computed", data:{ msg: "", }, methods:{ msgChange(e){ this.getValue = e.target.value; }, }, computed:{ getValue:{ set:function(newValue){ this.msg = newValue; }, get:function(){ return this.msg; } }, }, }) </script> </body> </html>
lazy
<input type="text" v-model.lazy='msg'>
当点击其它地方时,数据同步
number
<input type="number" v-model.number='msg'>
只显示数字
trim
<input type="text" v-model.trim='msg'>
去除前后空格
阻止表单提交
<form id="computed" @submit.prevent> <!-- <input type="text" v-model='msg'> --> <!-- <input type="text" v-model.lazy='msg'> --> <input type="text" v-model.trim='msg'> <!-- <input type="text" :value="getValue" @input="msgChange"> --> <p>{{msg}}</p> <input type="submit" value="提交"> </form>