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的使用
#js数组操作，增加值，修改值，删除值，vue的页面都会变
可以检测到变动的数组页面也跟着编号的操作：
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(){
//去后台加载数据
this.goods=[{name:'特斯拉',price:10000,count:1},{name:'包子',price:3,count:10},{name:'花卷',price:5,count:12}]
}
}
})
</script>
</html>
5 v-for
<!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">
<ul>
<!-- <li v-for="l in list">{{l}}</li>-->
<li v-for="(value,index) in list">第{{index}}个人------名字是：{{value}}</li>
</ul>
<hr>
<h1>循环对象</h1>
<div>
<span v-for="o in obj"><p>{{o}}</p></span>
</div>
<div>
<span v-for="(value,key) in obj"><p>key值是：{{key}}，value值是{{value}}</p></span>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
//数组
list: ['张三', '李四', '王五'],
//对象
obj: {name: 'lqz', age: '19', sex: '男'}
}
})
</script>
</html>
6 事件处理
事件处理
<!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 class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-offset-3">
<div id="app">
<!-- <input type="text" v-model="name" placeholder="光标移开触发-blur" v-on:blur="handle_blur">-->
<!-- <input type="text" v-model="name" placeholder="请输入要搜索的内容-change" v-on:change="handle_change">-->
<!-- <input type="text" v-model="name" placeholder="请输入要搜索的内容-input" v-on:input="handle_input">-->
<input type="text" v-model="name" placeholder="请输入要搜索的内容-input" @input="handle_input">
<ul>
<li v-for="l in list">{{l}}</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
list_old: ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm'],
list: ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm']
},
methods: {
handle_input() {
//只要输入框文字发生变化，就会触发它
//根据输入的值，过滤list
// let _this=this
// this.list.filter(function (item) {
// console.log(_this.list_old)
//
// })
this.list = this.list_old.filter(item => {
if (item.indexOf(this.name) > -1) {
return true
} else {
return false
}
})
},
handle_change() {
console.log('change')
console.log(this.name)
},
handle_blur() {
console.log('blur')
console.log(this.name)
},
}
})
// let list = ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm']
// let list_new=list.filter(function (item) {
// if(item.length>=3){
// return true
// }else{
// return false
// }
//
// })
//箭头函数---es6的语法
// let list_new = list.filter(item => {
// if (item.length >= 3) {
// return true
// } else {
// return false
// }
// })
// console.log(list_new)
//
//
// var a = (data, a) => {
//
// }
// var b = function (data, a) {
//
//
// }
let a='efy'
let str_a='abcdefg'
console.log(str_a.indexOf(a))
</script>
</html>
阻止事件冒泡
<!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 class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-offset-3">
<div id="app">
<div v-on:click="div_click">
<button @click.stop="button_click">点我看美女</button>
</div>
<hr>
<div v-on:click.self="div_click">
<button @click="button_click">点我看美女2</button>
<span>dadfafdasdfadsf</span>
</div>
<hr>
<a href="http://www.baidu.com" @click.prevent="handle_a">点我看没办</a>
<hr>
<button @click.once="handle_one">我只能点一次</button>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
div_click() {
alert('div被点击了')
},
button_click() {
alert('button被点击了')
},
handle_a(){
alert('a链接跳转阻挡了')
location.href='http://www.baidu.com'
},
handle_one(){
alert('我只会谈一次')
}
}
})
</script>
</html>