Vue基本指令v-for,v-show/if,v-else/else-if,v-bind,v-on以及综合业务

mutache 语法糖

• 基础模板语法

v-for

• v-for

  1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
  2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值
  3. json类型数据
  4. 嵌套类型数据

• key:
  给没一个循环的列表添加一个唯一的标识

• 使用指令 v-bind 来绑定 key

  div>
  

  !!!如果有id，那么我们就使用id，如果没有，我们才会选择index
  v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上

  简写

      
  div>
  

      // for( var i = 0 ; i < 100; i ++ ){}
  
      // for( var i in arr ){}
  
      // for ( var i of arr ) {}
  

v-show与v-if区别

• 指令： ( 是绑定在dom属性上 )

• v-show
  可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）

• v-if
  可以控制一个dom的存在与否（ 创建 和 销毁 ）

• 面试题（ 实用题 ） 【 钻石 】

1. v-if vs v-show 区别

2. 实用： 项目中 如何选择这两个使用

   • v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
   • v-show 操作的是dom元素的display属性
   • v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
   • v-show 只能写一个单路形式

3. 总结：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
   因此，如果需要非常频繁地切换，则使用 v-show 较好；
   如果在运行时条件很少改变，则使用 v-if 较好。

v-else / v-else-if

• 必须和v-if连用 不能单独使用 否则报错 模板编译错误

  	<div id="box">
      <div style="width: 100px;height: 100px;background: black;" v-if="show">div>
      <div style="width: 100px;height: 100px;background: aqua;" v-else-if="">div>
      <div style="width: 300px;height: 300px;background: blue" v-else="">div>
  div>
  
  
  
  <script>
      new Vue({
          
          el: "#box",
          data(){
          
              return {
          
                  show: true
              }
          }
      })
  script>
  

v-html/v-text

• v-html 解析html标签

  <div id="box">
      <div v-html="msg">div>
  div>
  
  <script>
      new Vue({
          
          el: "#box",
          data(){
          
              return {
          
                  msg:"
  121212
  "
              }
          },
          methods: {
          
              say() {
          
              }
          }
      })
  script>
  

• v-text 解析文本(v-text读取文本不能读取html标签)

   1 <div id="box">
   2     <div v-text="msg">div>
   3 div>
   4 
   5 <script>
   6     new Vue({
          
   7         el: "#box",
   8         data(){
          
   9             return {
          
  10                 msg:"11111"
  11             }
  12         },
  13         methods: {
          
  14             say() {
          
  15                 alert(111);
  16             }
  17         }
  18     })
  19 script>
  

v-bind:指令class类名绑定与style

• vue中如何给dom添加类名
  1. 直接在dom上绑定类名
  2. vue中类名绑定 - 对象形式
     目的： dom身上属性class 要和 数据绑定
     解决：v-bind
     数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样

         
     p>
             size是自定义的属性， 它的属性值是undefined， 相当于是false
         
     p>
             size也是自定义属性，他的属性是true,那么就会加上去
         
     p>
             格式： v-bind:class = "{ 属性   (默认true) }" 
             格式： v-bind:class = "{ 属性： boolean }" 
             格式： v-bind:class = "{ [data]： boolean }" 
     

          new Vue({
              
             el: '#app',
             data: {
              
             msg: 'hello Vue.js',
             s: 'size',
             bg_color: 'bg_color',
             flag: true
             }
         })
     

  3. vue中类名绑定的形式 - 数组的形式 【 推荐 】
     格式： v-bind:class = “[ 数据 ]”

         
     p>
         
     p>
         
     p>
         
     p>
     

  4. 类名绑定不会覆盖原先的类名
  5. 为什么要绑定类名
     指令是用来操作dom
     目的： 为了将来通过数据来操作类名，类名操作dom
• style样式的绑定
  v-bind: style = ""
  1. 对象的形式

         
     p>
     

  2. 数组的形式

         
     p>
         
     p>
     

v-on:指令event事件绑定

Vue事件引出:

• 问题： javascript事件添加有几种形式
  1. 事件绑定(普通事件)
     dom.onclick = function () {}
     dom: 事件源
     on: 绑定事件的形式
     click: 事件类型
     function（）{} 事件处理函数
  2. 事件监听 (事件绑定形式)：
     dom.addEventListener(‘click’,function(){},false)
     addEventListener (同一个对象绑定多个的事件不会被覆盖！)
     false:表示冒泡传递(默认)
     true:表示捕获传递
  3. 直接在标签中绑定事件

         
     div>
     

     vue采用了第三种，也是通过属性的形式绑定在dom身上

         
     div>
     

Vue中完整的事件流程:

    
div>

• 事件源
• 事件绑定形式 直接在标签中绑定
• 事件类型 click点击事件
• 事件处理程序 handerName
  • 参数
  • 事件对象
  • 简写 v-on: — > @
  • 问题： 函数调用有哪些方法？
    直接调用 ()
    事件

     点击 button>

解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象

• 事件对象也可以正常使用,在事件处理程序中， 写e就可以了
• 问题？：
  如果事件处理程序中有三个参数，第三个参数才是事件对象e,
• 如何实现分析？：
  我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined

综合业务： 点击这个按钮，添加一条新的数据放在列表数据中

• 问题： 下标是不能检测变动的，但是我们现在看到了它检测到了
• 问题： 如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动
  解决方法： 使用splice
• 问题： 我们直接修改一个数组下的一个数据时，发现下标不能检测变动了
  解决方法： 使用 Vue.set / this.$set

    <style>
        * {
      
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        ul li {
      
            border: 1px solid #000;
            height: 50px;
            position: relative;
        }

        ul li input {
      
            width: 99%;
            height: 96%
        }

        .remove {
      
            position: absolute;
            right: 5px;
            top: 15px;
        }

        .change {
      
            position: absolute;
            right: 50px;
            top: 15px;
        }

        #app {
      
            width: 500px;

        }
    style>
    <div id="app">
        <ul>
            <li v-show="addflag">
                <input type="text" v-model="tempdata">
            li>
            <li v-for="(list,index) in lists" :key="list.id">
                {
    {list.task}}
                <button @click="remove(index)" class="remove">删除button>
            li>
        ul>
        <button @click="addflag=!addflag" class="add">添加数据button>
        <button @click="add">提交数据button>
        <button @click="change">修改第二条数据button>
    div>

    new Vue({
     
            el: '#app',
            data: {
     
                addflag: false,
                lists: [
                    {
     
                        id: 1,
                        task: '任务一'
                    },
                    {
     
                        id: 2,
                        task: '任务二'
                    }
                ],
                tempdata: '',
            },
            methods: {
     
                add() {
     
                    this.lists.push({
     
                        id: this.lists.length + 1,
                        task: this.tempdata
                    });
                    this.tempdata = '';
                    this.addflag = !this.addflag;
                },
                remove(index) {
     
                    this.lists.splice(index, 1)
                },
                change() {
     
                    Vue.set(this.lists,'1',{
     
                        id:2,
                        task:"已修改"
                    })
                }
            }
        })