Vue 语法-Vue 中的 v-for？

🎉v-for 的遍历数组基本语法？

当我们有一组数据需要进行渲染时，我们就可以使用 v-for 来完成。

v-for 的语法类似于 JavaScript 中的 for 循环。

如果在遍历的过程中不需要使用索引值

1	<li v-for="item in items">{{item}}</li>

如果在遍历的过程中需要拿到元素在数组中的索引值

1 2	<li v-for="(item, index) in items">{{index+1}}{{item}}</li> //其中的index就代表了取出的item在原数组的索引值。

🎉v-for 的遍历对象基本语法？

在遍历对象的时候，如果知识获取一个值只能获取一个值 value。

如果想显示 key 则需要加（）。

1 2	<li v-for="(item, key) in items">{{key}}-{{item}}</li> //其中的key就代表了取出的item在原数组的key值。

🎉 在使用 v-for 时给对应的组件添加:key 属性？

<div id="app">
  <ul>
    <li v-for="item in letters" key="item">{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好！',
      letters:['A','B','C','D','E']
    }
  })
</script>
<!-- 在数组中插入一个值 -->
app.letters.splice(2,0,"F")

没有 key 的 Diff 算法

有 key 的 Diff 算法

所以我们需要使用 key 来给每个节点做一个唯一标识

Diff 算法就可以正确的识别此节点

找到正确的位置区插入新的节点

🎉 哪些数组的方法是响应式的？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<ul> <li v-for="item in letters">{{item}}</li>
</ul>
  <button @click="btnClick">增加</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好！',
      letters:["a","b","c","d","e"]
    },
    methods:{
      btnClick(){
        //1.push方法
        //this.letters.push("aaa")
        //2.通过索引值修改数组中元素（不能做到响应式）！！！
        //this.letters[0] = "bbbb"
        //3.从最后一项删除
        //this.letters.pop()
        //4.从第一项删除
        //this.letters.shift()
        //5.在数组最前面添加元素
        //this.letters.unshift("ssss")
        //6.在数组最前面删除元素、添加元素、替换元素
        //this.letters.splice()
        //splice(start)
        //删除元素，删除几个元素
        //splice(start,4)
        //替换元素
        //splice(start,4,"a","b","c","d")
        //插入元素
        //splice(start,0,"a","b","c","d")
        //7.在数组中排序
        //this.letters.sort()
        //8.在数组中反转
        //this.letters.reverse()
        //9.vue的修改方法
        //vue.set(要修改的对象，索引值，修改后的值)
        vue.set(this.letters,0,"bbbb")
      }
    }
  })
</script>
</body>
</html>

Vue 语法-Vue 实现购物车？

🎉 实现效果？

🎉 实现代码？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container">
<div id="app" class="row">
  <table class="table table-striped table-bordered">
    <tbody>
    <tr>
      <th></th>
      <th> 书籍名称 </th>
      <th> 出版日期 </th>
      <th> 价格 </th>
      <th> 购买数量 </th>
      <th> 操作 </th>
    </tr>
    <tr v-show="havenobook" ><td style="text-align: center" colspan="6">购物车为空！</td></tr>
    <tr v-for="(item,index) in books">
      <td> {{index + 1}} </td>
      <td> <b>{{item.name}} </b></td>
      <td> {{item.date}} </td>
      <td> {{item.price}} </td>
      <td>
        <button class="btn btn-default btn-sm" @click="numdown(index)">-</button>
        <span >{{item.num}}</span>
        <button class="btn btn-default btn-sm"  @click="numup(index)">+</button>
      </td>
      <td> <button class="btn btn-default btn-sm"  @click="reducebook(index)">移除</button> </td>
    </tr>
    <tr style="text-align: center">
      <td colspan="6">总价：￥{{Math.round(totalprice)/100}}</td>
    </tr>
    </tbody>
  </table>
</div>
</div>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好！',
      books:[
          {name:"《算法导论》",date:"2006-9",price:"￥85.12",num:1},
          {name:"《UNIX编程艺术》",date:"2006-2",price:"￥59.25",num:1},
          {name:"《编程珠玑》",date:"2008-10",price:"￥39.34",num:1},
          {name:"《代码大全》",date:"2006-3",price:"￥128.45",num:1}
      ],
      havenobook:false
    },
    methods:{
      numup(index){
       this.books[index].num++
      },
      numdown(index){
        if(this.books[index].num > 1){this.books[index].num--}
      },
      reducebook(index){
        this.books.splice(index,1);
        if(this.books.length === 0){
          alert("购物车为空!");
          this.havenobook = true
        }
      }
    },
    computed:{
      totalprice:function () {
        let result = 0 ;
        for(let i=0; i< this.books.length;i++){
          let prices = this.books[i].price.split("￥")
          result += parseFloat(prices[1]) * 100 * this.books[i].num
        }
        return result
      }
    }
  })
</script>
</body>
</html>

Vue 语法-Vue 过滤器？

在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue 中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）

补充：

过滤器分全局过滤器和局部过滤器，下边我着重说下全局过滤器，因为全局过滤器在项目中使用频率非常高！

🎉 局部过滤器：

过滤器可以用在两个地方：双花括号插值或 v-bind 表达式。

<div id="app">
    <p>电脑价格：{{price | addPriceIcon}}</p>
</div>

<script>
 let vm = new Vue({
    el:"#app",
    data:{
        price:200
    },
    filters:{
        //处理函数
        addPriceIcon(value){
            console.log(value)//200
            return '¥' + value
        }
    }
 })
</script>

上边代码，我的需求是想把价格前面加上人民币符号（¥），模板中文本后边需要添加管道符号（ | ）作为分隔，管道符 | 后边是文本的处理函数，处理函数的第一个参数是：管道符前边的——文本内容，如果处理函数上边传递参数，则从第二个参数依次往后是传递的参数。可能有人会问：你手动加上去不就得了！如果页面有上千个价格需要添加，怎么办？几十个页面需要添加怎么办呢，手动加能累晕！所以这种通用机制很重要。

🎉 全局过滤器使用：

Vue.filter( filterName，( )=>{ return // 数据处理结果 } )

<div id="app">
    <h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
    Vue.filter("addNamePrefix",(value)=>{
        return "my name is" + value
    })

    let vm = new Vue({
        el:"#app",
        data:{
            viewContent:"吕星辰"
        }
    })
</script>