第一章 - 1.vue基础入门 - 《Vue，React，Angular三大框架》

一、vue中的插值表达式
二、v-for必须加:key
三、事件@click
四、v-html
五、v-once
六.v-show
七、v-if v-else
八、v-for
九、key的作用为了区分元素
- 1.1 for-key
十、filters—过滤器
- 1.1 filters传参

一、vue中的插值表达式

<template>
  <div id="app">
    <div>{{msg}}</div>
  </div>
</template>
<script>
   export default {
      name: "app",
      data() {     //data是一个函数，因为是组件
         return {
            msg: "hello world"
         };
     };
</script>

二、v-for必须加:key

<template>
  <div id="app">
    <p v-for="item of arr" :key="item">{{item}}</p>
  </div>
</template>
<script>
   export default {
      name: "app",
      data() {
         return {
              arr: ["html", "css", "javascript"]
         };
      },
</script>

三、事件@click

<template>
  <div id="app">
     <div @click="handleClick">{{msg}}</div>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      msg: "hello world",
    };
  },
  //事件集中写在methods属性中
  methods:{
    handleClick(){
      this.msg = "change"
    }
  }
};
</script>

四、v-html

<div>
  <div v-html="msg"></div>
</div>
<script>
    var vm =  new Vue({
      el:"#app",
      data:{
        msg:"<h1>hello world</h1>"
      }
    })
</script>

五、v-once

只渲染一次,不重新更新视图。

六.v-show

如果频繁去切换DOM可以使用v-show

七、v-if v-else

八、v-for

九、key的作用为了区分元素

key就是为了给DOM元素一个唯一的标识符

<body>
    <div id="app">
        <div v-if="flag">
            <span>网易云音乐</span>
            <input type="text">
        </div>
        <div v-else>
            <span>qq音乐</span>
            <input type="text">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
              flag:true
            }
        })
    </script>
</body>

不加key,input输入框qq的值改变,网易云的输入框应该是没变的切换过去,还是qq的输入框。

解决方案给input输入框添加key

   <div id="app">
        <div v-if="flag">
            <span>网易云音乐</span>
            <input type="text" key="wangyi">
        </div>
        <div v-else>
            <span>qq音乐</span>
            <input type="text" key="qq">    
        </div>
    </div>

1.1 for-key

<body>
    <div id="app">
        <p v-for="(item,index) of arr"><input type="checkbox">{{item.id}} {{item.name}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arr:[
                    {id:1,name:"小米"},
                    {id:2,name:"苹果"},
                    {id:3,name:"华为"},
                ]
            }
        })
    </script>
</body>

不使用key,使用unshift方法添加数组,勾选checkbox会出问题。

我选中的是苹果,结果变为小米。因为这里没有添加key,默认选中的是第二个,重新渲染还是第二元素被选中。

十、filters—过滤器

类似于小程序的中wxs

   <div id="app">
        {{msg | format}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"99"
            },
            filters:{
                format(value){
                    return "$"+value
                }
            }
        })
    </script>

1.1 filters传参

<div id="app">
        {{msg | format("好的")}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"99"
            },
            filters:{
              //value是mgs  add是format传递过来的参数
                format(value,add){
                    return "$"+value+add
                }
            }
        })
    </script>