1 Vue，js框架，渐进式框架（局部，全部用）（混合开发可以用，前后端分页也可以用（用的最多））
2 mvvm架构：model，viewmodel，view
3 单页面开发（全部用vue开发，就一个index.html页面），其他都是组件间的替换
4 组件化开发：页面组件，普通组件
5 编译---》1个index.html,css,js,图片
6 插值语法
-{{ 变量，js语法，三目运算符}}
7 文本指令
-v-html
-v-text
-v-show
-v-if
8 事件指令
-v-on:click='函数'
-@click='函数'
1 属性指令
v-bind:src/href/name/='变量'
缩写成
:src='变量'
2 style和class的使用
可以检测到变动的数组页面也跟着编号的操作：
push：最后位置添加 pop：最后位置删除 shift：第一个位置删除 unshift：第一个位置添加 splice：切片 sort：排序 reverse：反转
检测不到变动的数组页面不变化的操作：
filter()：过滤 concat()：追加另一个数组 slice()： map()：
原因：
作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
3 条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<div v-if="a=='A'">A</div>
<div v-else-if="a=='B'">B</div>
<div v-else>其他</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
a:'A'
},
methods: {
handle() {
this.style_obj.fontSize = '90px'
}
}
})
</script>
</html>
4 列表渲染(购物车)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div id="app">
<button @click="handld">点我加载数据</button>
<hr>
<table class="table" v-if="!goods.length==0">
<thead>
<tr>
<th>商品名字</th>
<th>价格</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goods">
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr>
</tbody>
</table>
<div v-else>
什么东西都没有
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goods:[]
},
methods:{
handld(){