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: — > @
    • 问题: 函数调用有哪些方法?
      直接调用 ()
      事件
    

解决: 在函数执行时,传入一个实际参数 $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:"已修改"
                    })
                }
            }
        })

你可能感兴趣的:(Vue基础)