vue学习笔记-第一课
2019/07/02
第一课：
vue 减少dom操作，关注于数据的变化
vue两大特性：数据驱动，试图组件化
=====================
现代开发模式？ 20%表现层
vue/react
------------------------------------
传统开发模式？ 80%表现层
jQuery
传统dom方式：
oBtn.onClick=function(){
this.data++;
oDiv.innerHTML=data;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" charset="utf-8"></script>
</head>
<body>
<div id='div1'>
name:{{name}}
age:{{age}}
<strong v-bind:title="age+'岁'" :id="age" :style="styleJSON">{{name}}</strong>
<input type="text" v-model="name"/>
<p>{{name}}</p>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el: '#div1',
data: {
name: 'blue', //数据和input之间是双向绑定
age: 18,
styleJSON: {color: 'yellow',width: '200px'}, //style属性推荐json格式
classArr: ['aaa','bbb'] //class推荐数组格式
}
});
</script>
</html>
1.表达式赋值：{{}}
指令(directive)——补充了html的属性
2.v-bind
可以用于任何属性，有两个属性有另外的写法
class、style
class="aaa bbb ccc active"
style="width: 200px; height: 200px; background: red;"
v-bind:xxx=""
:xxx=""
3.v-model：数据双向绑定
数据(data)和input之间双向绑定
输入组件
v-model进来的数据，都是字符串
4.vue事件
v-on:click="fn(x,x,x...)"
@click="fn(x,x,x...)"
<body>
<div id="div1">
{{a}}
<input type="button" value="+1" v-on:click="fn(5)">
</div>
</body>
<script>
let vm=new Vue({
el: '#div1',
data: {
a: 12
},
methods: {
fn(n){
this.a+=n;
}
}
});
</script>
5.v-show display
v-if 删除元素
6.非常有用的指令 v-for
:key属性 1.不能重复 2.不能变
A.循环数组 v-for="item,index in array"
<body>
<div id="div1">
<ul>
<li v-for="user in users">
用户名：{{user.name}} 密码：{{user.password}}
</li>
</ul>
</div>
</body>
<script>
let vm=new Vue({
el: '#div1',
data: {
users: [
{name: 'blue', password: '123456'},
{name: 'zhangsan', password: '654321'},
{name: 'lisi', password: '111111'},
]
}
});
</script>
B.json v-for="val,key in json"
<body>
<div id="div1">
<ul>
<li v-for="val,name in style">
{{name}}: {{val}}
</li>
</ul>
</div>
</body>
<script>
let vm=new Vue({
el: '#div1',
data: {
style: {
width: '200px',
height: '300px'
}
}
});
</script>
C.字符串 v-for="char,index in str"
<body>
<div id="div1">
<ul>
<li v-for="s in str">
{{s}}
</li>
</ul>
</div>
</body>
<script>
let vm=new Vue({
el: '#div1',
data: {
str: 'sdfsfgfdgh'
}
});
</script>
D.数字 v-for="i in num"
<body>
<div id="div1">
<ul>
<li v-for="i in 50">
{{i}}
</li>
</ul>
</div>
</body>
<script>
let vm=new Vue({
el: '#div1',
data: {
}
});
</script>
1.vm结构
new Vue({
el, data, methods
computed, props, watch, template, router, ...
})
2.概念
数据同步
双向绑定
虚拟DOM
3.指令
----------------------------------------------------------
虚拟DOM：
合并请求
快速查询
局部刷新
