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(){