style和class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.red {
color: red;
}
.size {
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<h1>class的使用</h1>
<div :class="classStr"> 我是字符串写法class </div>
<div :class="classList"> 我是数组写法的class </div>
<div :class="classObj"> 我是对象写法的class </div>
<h2>style的使用</h2>
<div :style="styleStr"> 我是字符串写法的style </div>
<div :style="styleList"> 我是数组写法的style </div>
<div :style="styleObj"> 我是对象写法的style </div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
// class 的字符串使用
classStr: 'red size',
// class 的数组写法 因为类本身可以写多个 用数组最合适
classList: ['red', 'size'],
// class 的对象写法
classObj: {red: true, size: false},
// style 的字符串写法
styleStr: 'background-color:aquamarine; font-size: 30px',
// 数组写法的style 注意样式如果是多个单词用- 链接的形式可以写成驼峰
// styleList: [{background-color:aquamarine;}, {'font-size': '80px'}]
styleList: [{backgroundColor: 'green'}, {fontSize: '80px'}],
// 对象写法的style 因为样式本就是键值对的形式 所以推荐使用对象写法
styleObj: {backgroundColor: 'blue', fontSize: '40px'}
},
})
</script>
</html>
总结：
class推荐使用数组写法
<div :class="classList">xxx</div>
classList: ['red', 'size'],
style推荐使用对象写法
<div :style="styleObj">xxx</div>
styleObj: {backgroundColor: 'blue', fontSize: '40px'}
注意样式如果是多个单词用 - 链接的形式(例如background-color)可以写成驼峰
条件渲染
写在标签上，控制标签的显示与不显示
v-if='布尔值/运算完是布尔值'
v-else-if='布尔值/运算完是布尔值'
v-else
<body>
<div id="app">
<h1>条件渲染</h1>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80 && score<90">良好</p>
<p v-else-if="score>=60 && score<80">及格</p>
<p v-else="60>score">不及格</p>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
score: 20
}
})
</script>
列表渲染
v-for 放在标签上 可以循环显示多个此标签
<div id="app">
<div class="container-fluid">
<div class="row ">
<div class="col-md-6 col-md-offset-3 text-center">
<button @click="handleClick" class="btn btn-success">点击加载购物车</button>
<table class="table table-bordered">
<thead>
<tr>
<th>商品id号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
goodList: []
},
methods: {
handleClick() {
this.goodList = [
{id: 1, name: '钢笔', price: '9元', count: 2},
{id: 2, name: '铅笔', price: '4元', count: 10},
{id: 3, name: '苹果', price: '2元', count: 3},
]
}
}
})
</script>
v-for循环数组、字符串、数字、对象
# v-for 可以循环数组，数字，字符串，对象
# 每次循环的标签上，一般都会带一个属性： :key='xx' 该值必须唯一，一般为id
-key值的解释：为了加速虚拟dom的替换，不加也可以
1.不带索引的循环
<div v-for="i in obj"> {{i}} </div>
-如果是数组：i就是数组的一个个元素
-如果是数字：i就是从1开始的一个个数字
-如果是字符串：i就是一个个字符
-如果是对象：i就是一个个键值对的value的值
2.带索引的循环
<div v-for="(i,j) in obj">{{i}}, {{j}}</div>
-如果是数组：i就是数组的一个个元素,j就是索引
-如果是数字：i就是从1开始的一个个数字,j就是索引
-如果是字符串：i就是一个个字符,j就是索引
-如果是对象：i就是键值对中的value，j就是键值对中的key
<body>
<div id="app">
<div v-for="i in str">{{i}}</div>
<div v-for="i in list">{{i}}</div>
<div v-for="i in obj">{{i}}</div>
<div v-for="(i,j) in str">{{i}}, {{j}}</div>
<div v-for="(i,j) in list">{{i}}, {{j}}</div>
<div v-for="(i,j) in obj">{{i}}, {{j}}</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
str: 'asdfgh',
list: ['a', 'b', 'c', 'd'],
obj: {name: 'jason', age: 19}
}
})
</script>
数组的检测与更新
vue实现 数据变，页面跟着变的原理是：通过vm监测model层的数据变化，vm通过dom操作显示到view层上，如果监测不到这个变化，数据的更细就失效了
js中某些方法使数组/对象发生了改变，但却不能被vm监测到，这时候我们就应该手动更新数据
// 可以检测到变动的数组操作
push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转
// 不能检测到的数组操作
filter()：过滤
concat()：追加另一个数组
slice()：
map()：
// 原因：作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
双向数据绑定
input标签专属：v-model:数据双向绑定
-使用： 属性指令绑定
:value='变量' 数据单项绑定
v-model='变量' 数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>数据单向绑定</h1>
<p>用户名：
<input type="text" :value="name">
</p>
<h1>数据双向绑定</h1>
<p>用户名：
<input type="text" v-model="name">
</p>
<p>密码：
<input type="text" v-model="pwd">
</p>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
pwd: '',
}
})
</script>
</html>
事件处理
事件绑定 v-on:事件名='函数'---> @事件名='函数'
input 的事件：
-blur：失去焦点触发
-change：发生变化触发
-input：输入触发
过滤案例
补充知识：
1.js内置的数组过滤方法：filter
需要传入一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行。
匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃。
eg：
let l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'dddd',]
l = l.filter(function (item) {
console.log(item)
return item
})
console.log(l)
2.判断某个字符(串)是否在字符串中
let s1 = 'tom'
let s2 = 'a'
let s3 = 't'
console.log(s1.indexOf(s2)) // -1
console.log(s1.indexOf(s3)) // 0
3.箭头函数
3.1 普通箭头函数的写法：
普通函数：
let sum = function(a, b) {
return a + b;
}
箭头函数：
let sum1 = (a, b) => {
return a + b;
}
从上面的例子可以得知箭头函数的简单用法：(参数) => { 函数体 }
3.2 箭头函数的省略写法：
如果只有一个参数，可以不加括号，如果没有参数或则有多个参数，需要加括号
let sum = x => { return x }; // 只有一个参数，可以加括号也可以不加
let sum = () => { return aaa }; // 没有参数 必须加括号
let sum = (a,b) => { return a+b }; // 有两个参数 必须加括号
箭头函数可以省略大括号，但这样写：箭头后面就只能有一行代码，且不能写return
let sum = (a,b) => a+b; // 相当于 return a+b;
3.3 箭头函数的this指向
箭头函数没有自己的this,箭头函数的this是继承父执行上下文里面的this ，
<div id="app">
<div>
<input type="text" v-model="search" placeholder="请输入搜索内容" @input="handleInput">
<ul>
<li v-for="item in newList">{{item}}</li>
</ul>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
search: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'dddd',],
newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'dddd',],
},
methods: {
handleInput() {
this.newList = this.newList.filter(item => item.indexOf(this.search)>=0)
}
}
})
</script>
事件修饰符
js的事件冒泡：
子控件的事件执行之后会冒泡到父控件，执行父控件的事件。我们不想让他冒泡。于是：
.stop 放在子控件标签中，表示只处理自己的事件，不向父控件冒泡
.self 放在父控件标签中，表示只处理自己的事件，子控件的冒泡不处理
.prevent 阻止a链接的跳转
.once 表示事件只会触发一次(适用于秒杀、抽奖界面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件修饰符</h1>
<ul @click.self="ulClick">
<li @click.stop="liClick">
我是li
</li>
<li @click.once="clickOnce">点我秒杀</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
pwd: '',
},
methods: {
ulClick: function (){
console.log('ul被点了')
},
liClick: function (){
console.log('li被点了')
},
clickOnce: function () {
console.log('秒杀')
}
}
})
</script>
</html>
按键修饰符
<!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="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: ''
},
methods: {
handleUp(event) {
console.log('火车被按了')
// if (event.code == 'Enter') {
// console.log('回车键被案例', event)
// }
}
}
})
</script>
</html>
