1 属性指令
-v-bind:href='变量/三目运算符/js代码'
-:属性='变量'
2 style和class
-他俩也是属性，绑定变量也是使用属性指令
-class可以绑定字符串，数组，对象
-style：对象（横杠去掉，转成字母的大写）
3 条件
-v-if：如果符合这个条件，就会显示这个标签下的内容
-v-else-if
-v-else
4 购物车的显示与不显示
-v-if+v-for
5 v-for的使用
-循环数字，对象
-index和value：反的
6 事件处理
-click
-input：change，blur，input
-过滤案例
7阻止事件冒泡，a链接.html
-click.self:只处理自己的事件，子控件冒泡的不处理
-click.stop:阻止子事件的冒泡
-prevent:阻止a连接的跳转
-noce：只能点击一次
1 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" @keyup.enter="handle" v-model="search">-->
<!-- <input type="text" @keyup="handle" v-model="search">-->
<input type="text" @keydown="handle" v-model="search">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search:''
},
methods: {
handle(){
console.log('enter建被放开了')
location.href='https://www.baidu.com/s?wd='+this.search
}
}
})
</script>
</html>
2 数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
请输入您的名字：<input type="text" v-model="name">
<hr>
请输入您的密码：<input type="password" v-model="password"> <span>{{error}}</span>
<hr>
您输入的名字是：{{name}}
<hr>
<button @click="submit_1">登录</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'',
password:'',
error:''
},
methods:{
submit_1(){
if(this.name=='lqz' && this.password=='123'){
location.href='http://www.baidu.com'
}else {
this.error='用户名或密码错误'
}
}
}
})
</script>
</html>
3 表单控制之单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
请输入您的名字：<input type="text" v-model="name">
<hr>
请输入您的密码：<input type="password" v-model="password"> <span>{{error}}</span>
<hr>
记住密码： <input type="checkbox" v-model="check_1">
记住密码： <input type="radio" v-model="radio_1" value="1">
<hr>
<button @click="submit_1">登录</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'',
password:'',
error:'',
check_1:false,
radio_1:false
},
methods:{
submit_1(){
if(this.name=='lqz' && this.password=='123'){
location.href='http://www.baidu.com'
}else {
this.error='用户名或密码错误'
}
}
}
})
</script>
</html>
4 表单控制之多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
请选择您的爱好
<hr>
<ul>
<li v-for="hobby in hobbys">
<!-- {{hobby}}<input type="checkbox" v-model="check_group" :value="index" >-->
{{hobby.name}}<input type="checkbox" v-model="check_group" :value="hobby.name">
</li>
</ul>
<hr>
{{check_group}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// hobbys:['篮球','足球','双色球','美女'],
hobbys: [{id: 1, name: '篮球'}, {id: 2, name: '美女'}, {id: 3, name: '汉子'}],
check_group: []
},
methods: {}
})
</script>
</html>
5 购物车案例
5.1 基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="./js/vue.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="margin-top: 20px">
<div id="app">
<table class="table">
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>选择</td>
</tr>
<tr v-for="good in goods">
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
<td><input type="checkbox" v-model="checkGroup" :value="good" @change="sum_price"></td>
</tr>
</table>
选中的商品是：{{checkGroup}}
<hr>
总价格：{{sum_price()}}
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goods: [{id: 1, name: '金瓶没', price: 16, count: 2}, {id: