Vue基础(二)
一、模板语法的插值操作(其他不常用指令)
-
v-html 往标签内部插入html文本
-
v-text 往标签内部插入普通文本(解析不了标签)
-
v-pre 在界面上直接展示胡子语法
-
v-cloak 隐藏数据渲染到页面之前，胡子语法在界面上的展示
<div id="app">
<p v-cloak>{
{str1}}p>
div>
<script>
setTimeout(function() {
new Vue({
el:"#app",
data:{
str1:"这是span标签"
}
})
}, 1500)
script>
二、v-for中的key属性
<div id="app">
<button @click="add">按钮button>
<ul>
<li v-for="i,key in list" :key="i.id">{
{i.name}}li>
ul>
div>
<script>
new Vue({
el:"#app",
data:{
list:[
{
id:1,name:'html'},
{
id:2,name:'css'},
{
id:3,name:'javascript'},
{
id:4,name:'JQuery'},
],
},
methods:{
add(){
this.list.unshift({
id:5,name:'Vue'});
}
}
})
script>
官方推荐我们使用v-for时，给对应的元素或组件添加一个key属性。
为什么需要这个key属性呢（了解）
1、这个其实和Vue的虚拟DOM的Diff算法有关系。
当某一层有很多相同节点时，也就是列表节点时，我们插入一个新的节点到列表中
2、在B和C之间加一个F，Diff算法默认执行起来时这样的；即把C更新成F，D更新成C，E更新成D，最后再插入一个新的E，这样的效率也太低了。
当我们使用key来为每一个节点做唯一标识：Diff算法会以key作为标识来识别此节点，找到正确的位置区插入新的节点，所以key的作用是为了高效的更新虚拟DOM
这里需要注意:
1、key属性是判断需不需要更新DOM节点的依据，这个key的值的内容变了，则需要更新DOM(删除后重建DOM)，内容没变则不需要操作到DOM节点
2、key的作用是为了高效的更新虚拟DOM
三、reduce方法的使用
利用reduce方法遍历数组的每一个元素，reduce()调用结果最后返回一个最终值（最后一次return值）。
var arr = [
{
name: 'Vuejs入门', price: 99, count: 3},
{
name: 'Vuejs底层', price: 89, count: 1},
{
name: 'Vuejs从入门到放弃', price: 19, count: 5},
]
//数组名.reduce(回调函数，pre的初始值)
arr.reduce(function(pre, current){
// reduce这个方法被调用时，会遍历arr这个数组的每一个元素，每遍历一个元素，就执行一次这里的代码
// current表示当前正在遍历的这个元素
// pre 是上一次的这个函数return的值
// 因为第一次遍历没有上一个return值，所以，交给了第二个参数，设置pre的初始值
console.log(pre, current)
return 10
},0)
//！！！并且reduce方法最终会返回最后一次的return值
上面代码的输出结果：
0 {name: "Vuejs入门", price: 99, count: 3}
10 {name: "Vuejs底层", price: 89, count: 1}
10 {name: "Vuejs从入门到放弃", price: 19, count: 5}
理解了上面的案例之后，就可以提一个需求：计算上面购物车的总价（每一个 price*count 的和），
var arr = [
{
name: 'Vuejs入门', price: 99, count: 3},
{
name: 'Vuejs底层', price: 89, count: 1},
{
name: 'Vuejs从入门到放弃', price: 19, count: 5},
]
let total = arr.reduce(function(pre, current) {
// 每一次返回 上一次的价格+(这次的单价*这次的数量)
return pre + current.price * current.count
}, 0)
console.log(total);
备注：上面这个reduce()方法和Vue本身没有关系，纯粹是一个js数组的方法。
四、(重点)Vue的计算属性computed 的使用
<div id="app">
总价为: {
{total}}
div>
<script>
new Vue({
el:"#app",
data:{
arr:[
{
name: 'Vuejs入门', price: 99, count: 3},
{
name: 'Vuejs底层', price: 89, count: 1},
{
name: 'Vuejs从入门到放弃', price: 19, count: 5},
],
},
computed:{
// total是属性名,是我们自己写的名字
// 计算属性的函数中需要有返回值,在页面中{
{total}}就是这个返回值
total(){
let ret = this.arr.reduce(function(pre, current){
return pre + current.price * current.count
},0)
return ret
}
}
})
script>
五、(重点)computed内部方法有缓存的作用
以下代码total调用了三遍，却只执行了1遍，这是computed内部方法的缓存起了作用
<div id="app">
{
{total}}
{
{total}}
{
{total}}
{
{getTotal()}}
{
{getTotal()}}
{
{getTotal()}}
div>
<script>
var vm = new Vue({
el:"#app",
data:{
arr: [
{
name: 'Vuejs入门', price: 99, count: 3},
{
name: 'Vuejs底层', price: 89, count: 1},
{
name: 'Vuejs从入门到放弃', price: 19, count: 5},
]
},
methods:{
getTotal(){
console.log("getTotal")
var a = this.arr.reduce(function(pre, current){
// var total = 当前这次的 price*count + 上一次的total
var total = current.price*current.count + pre
return total
},0)
return a
}
},
computed:{
//computed里面的方法必须有返回值！这个return值将来在视图中被{
{total}}引用
total(){
console.log("total")
var a = this.arr.reduce(function(pre, current){
// var total = 当前这次的 price*count + 上一次的total
var total = current.price*current.count + pre
return total
},0)
return a
}
}
})
script>
六、computed内部方法的另一种写法(get和 set)
....
computed:{
//computed里面的方法必须有返回值！这个return值将来在视图中被{
{total}}引用
total:{
get(){
console.log("total_get")
var a = this.arr.reduce(function(pre, current){
// var total = 当前这次的 price*count + 上一次的total
var total = current.price*current.count + pre
return total
},0)
return a
},
set(){
console.log("total_set")
},
}
}
...
vm.total = 100 //触发调用set方法
七、v-model的原理
v-model 本质上包含了两个操作：
v-bind绑定input元素的value属性v-on指令绑定input元素的input事件
即：:value=“txtVal” 和 @input=“handleInput”
<div id='app'>
<input type="text" :value="txtVal" @input="changeVal" />
<p>{
{txtVal}}p>
div>
<script>
new Vue({
el:'#app',
data:{
txtVal: "默认值"
},
methods:{
changeVal(e) {
// console.log(e.target.value);
// 修改txtVal的值
// this.txtVal = 用户输入的内容
this.txtVal = e.target.value
}
}
})
script>
即：
<input type="text" v-model="textVal"/>
<input type="text" v-bind:value="textVal" v-on:input="textVal = $event.target.value"/>
八、(重点)数组常用的操作(方法)
8.1、常用方法使用
push pop unshift shift splice concat
var arr = [1, 2, 3]
let length = arr.push(4); // 给最后面添加元素,返回数组长度
let length = arr.unshift(5); // 给最前面添加元素,返回数组长度
let last = arr.pop(); // 删除最后一个元素, 返回被删除的元素
let first = arr.shift() // 删除第一个元素, 返回被删除的元素
// let ret = arr.splice(要操作的元素的下标, 要删除的个数, 要增加的元素)
let ret = arr.splice(2,1 ,7,8,9 ) // 返回的是删除的元素组成的数组
console.log(arr, ret)
let ret = arr.concat([7, 8, 9, 10])
console.log(arr,ret); // 返回合并后的新数组
console.log([...arr, ...[7,8,9,10]]);
8.2、filter、map
var arr = [1, 2, 3];
// filter
let newArr = arr.filter((item, index, self) => {
// 遍历数组中每一个元素,每遍历一次元素就执行1遍
// item 就是当前遍历到的元素
// return 过滤条件 (满足我们需求的条件)
// index 表示当前遍历到的这个元素的索引
// self 表示当前遍历到的这个数组arr
return item > 2
})
console.log(newArr);
// map
let newArr2 = arr.map(item => {
// 遍历数组中每一个元素,每遍历一次元素就执行1遍
// item 就是当前遍历到的元素
// return {id:item}
return item*2
})
console.log(newArr2);
8.3、数组去重
<script>
var arr2 = [1, 2, 3, 1, 6, 2, 3]
//ES6
console.log([...new Set(arr2)]);
console.log(Array.from(new Set(arr2)));
// 古老方法
let newArr = [];
for (var i = 0; i < arr2.length; i++) {
if (newArr.indexOf(arr2[i]) == -1) {
newArr.push(arr2[i])
}
}
// filter方法
// 第1个元素-不重复元素 arr2.indexOf(1) 0 0
// 第2个元素-不重复元素 arr2.indexOf(2) 1 1
// 第3个元素-不重复元素 arr2.indexOf(3) 2 2
// 第4个元素-重复元素 arr2.indexOf(1) 0 3
// 第5个元素-不重复元素 arr2.indexOf(6) 4 4
let newArr2 = arr2.filter((item, index, self) => {
// return 满足的条件 (不重复的数据的特点)
// console.log(self);
return self.indexOf(item) == index
})
console.log(newArr2);
</script>
九、(重点)Vue的过滤器和全局过滤器
9.1、过滤器的使用
Vue的过滤器用来对数据展示之前做一定的处理
<div id="app">
<p>{
{ num | formatNum }}p>
div>
<script>
var vm = new Vue({
el:"#app",
data:{
num:10
},
filters:{
formatNum(val){
// 这个形参接收 | 符号前面的变量数据
return val + 50 //return后面的值就是将来展示在页面上的值(即过滤之后的值)
}
}
})
script>
过滤一个时间戳：
<div id="app">
<p>{
{ timestamp | formatDate }}p>
div>
<script>
// var timestamp = new Date().getTime() // 获取时间戳
// console.log("日期是：",timestamp)
var vm = new Vue({
el:"#app",
data:{
timestamp:new Date().getTime()
},
filters:{
formatDate(val){
// 这个形参接收 | 符号前面的变量数据
var now = new Date(val)
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
}
}
})
script>
9.2、全局过滤器
多个app共用的过滤器可以作为全局过滤器来书写
<div id="app">
<p>{
{ timestamp | formatDate }}p>
div>
<div id="app2">
<p>第二个： {
{ timestamp | formatDate }}p>
div>
<script>
//全局过滤器
// Vue.filter("过滤器名字",(val)=>{})
Vue.filter("formatDate",(val)=>{
var now = new Date(val)
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
})
var vm2 = new Vue({
el:"#app2",
data:{
timestamp:new Date().getTime()
}
})
// var timestamp = new Date().getTime() // 获取时间戳
// console.log("日期是：",timestamp)
var vm = new Vue({
el:"#app",
data:{
timestamp:new Date().getTime()
},
// filters:{
// formatDate(val){ // 这个形参接收 | 符号前面的变量数据
// var now = new Date(val)
// var year=now.getFullYear();
// var month=now.getMonth()+1;
// var date=now.getDate();
// var hour=now.getHours();
// var minute=now.getMinutes();
// var second=now.getSeconds();
// return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
// }
// }
})
script>
十、图书购物车例子
<div id="app">
<table>
<thead>
<tr >
<th v-for="(title, tidx) in titles" :key="tidx">{
{title}}th>
tr>
thead>
<tbody>
<tr v-for="(book,bidx) in books" :key="book.name">
<td>{
{bidx}}td>
<td>{
{book.name}}td>
<td>{
{book.price}}td>
<td>{
{book.date}}td>
<td>
<button @click="sub(bidx)">-button>
{
{book.num}}
<button @click="add(bidx)">+button>
td>
<td>
<button @click="remove(bidx)">移除button>
td>
tr>
tbody>
table>
<div>总价格:{
{total}}div>
div>
<script>
new Vue({
el: '#app',
data: {
titles: ['编号', '书籍名称', '出版日期', '价格', '数量', '操作'],
books: [
{
name: '算法导论',
date: '2006-9',
price: 85,
num: 1
},
{
name: 'UNIX编程艺术',
date: '2006-2',
price: 59,
num: 1
},
{
name: 'Vue程序设计',
date: '2008-10',
price: 35,
num: 1
},
{
name: '颈椎康复',
date: '2006-3',
price: 129,
num: 1
},
]
},
// 定义方法的地方
methods: {
add(idx) {
console.log(idx)
this.books[idx].num++
},
sub(idx) {
if (this.books[idx].num) {
this.books[idx].num--
}
},
// 移除方法
remove(idx) {
// 修改 增加 删除(下标, 删除数量, .....增加的元素)
this.books.splice(idx, 1)
}
},
// 计算属性
computed:{
total() {
return this.books.reduce((pre, current) => {
return pre + current.price * current.num
}, 0)//总价格
}
}
})
script>