核心思想：数据驱动视图
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; 200px; background-color: brown; } .c2 { height: 200px; 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>