Vue指令与事件

其他 2019-06-22 16:22:33 阅读次数: 0

1.{{ msg }}问题：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
  <div id="app">
    <p> {{ this.msg }} </p>
    <p> {{ this.$data.msg }} </p>
    <p> {{ this._data.msg }} </p>
    <p> {{ msg }} </p>
  </div>
</body>
<script>
  /* 
    jsx: javascript + xml
      可以让我们在dom结构中输写javascript

    {{ msg }}
      是   this.msg 简写

      this.$data.msg -> this.msg -> msg
  */
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello vue.js'
    }
  })
  // var vm = new Vue({
  //   el: `
  //     <div id="app">
  //       <p> {{ ${ this.msg } }} </p>
  //     </div>
  //   `,
  //   data: {
  //     msg: 'hello vue.js'
  //   }
  // })
  console.log('====================================');
  console.log( vm );
  console.log('====================================');
</script>
</html>

2. mustache语法糖对数据类型的支持（ js语法的支持 ）

    数据类型：
      第一种划分：
        基础数据类型： number string boolean
        复杂数据类型: Object( array  function )
        特殊数据类型: null undefined
      第二种划分：
        初始数据类型: number string boolean null undefined
        引用数据类型: object( array function )

    结论： mustache支持我们js的数据类型的

    conosle.log  和  alert  在我们mustache语法中是不支持的

3.三元运算写法

    <p> null: {{ nul?'1':'2' }} </p>
    <p> undefined: {{ und && 1 || 2 }} </p>
    在Vue中写第二种

4.VUe中 MVVM分别对应什么？

    <body>
      <!-- V -->
      <div id="app"></div>
    </body>
    <script>
      /* 
        问题： 我们说vue是 MVVM 框架， 那么谁是 M   谁是 V  谁是 VM
    
          M： Model    数据
          V： View     视图
          VM: ViewModel  视图模型（  new Vue() ）
      */
      var vm = new Vue({
        el: '#app',//给跟实例一个模板（ 挂载 ）
        data: { //M
          msg:'Hello'
        }
      })
    </script>

二 、 Vue指令

v-html 与 v-text

  • v-html 识别标签
  • v-text识别不了标签
    <body>
      <div id="app">
        <p v-html = "h"></p>
        <p v-text = "msg"></p>
        <p v-text = " flag && 1 || 2 " > </p>
      </div>
    </body>
    
    
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
             msg: 'hello Vue.js',
             h: '<h3> hello Vue.js </h3>',
             flag: true
        }
    })
    <script/>
    
    
    
     mustache 绑定 dom的属性

    案例： v-html
    分析： 发现dom元素直接有了一个内容
          这种属性绑定就是为了操作dom

    结论： 这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字
            Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）
            Vue 2.0 统称为 ‘指令’

            指令是用一个  v-xxx   表示

            指令是用来操作dom

        Vue中不允许直接操作dom

        mustache语法   ---  属性写法 的属性值是直接写数据的，不需要使用 {{ }}

v-if v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3> v-show </h3>
      <p v-show = "showFlag"> v-show指令 </p>
    <hr>
    <h3> v-if - 单路分支 </h3>
      <p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
    <h3> v-if - 双路分支 </h3>
      <p v-if = "ifFlag">  双路分支 成立  </p>
      <p v-else> 双路分支不成立 </p>

    <h3> v-if - 多路分支 </h3>
    <p v-if = " type === 'A'"> A </p>
    <p v-else-if = " type === 'B'"> B </p>
    <p v-else> C </p>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',//给根实例一个模板（ 挂载 ）
    data: { 
      showFlag: true,
      ifFlag: false,
      type: 'A'
    }
  })
</script>
</html>

总结
指令： ( 是绑定在dom属性上 )
    v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了  innerHTML ）)
    v-text：可以将一个数据展示在一个dom的内容中（ 相当于使用了  innerText ）
    条件渲染的指令
      v-show 
        可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）
      v-if
        可以控制一个dom的存在与否（ 创建 和 销毁 ）
      v-else
      v-else-if 

面试题（ 实用题 ） 【 钻石 】
    1. v-if  vs  v-show 区别
    2. 实用： 项目中 如何选择这两个使用

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

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

v-for

  1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
  2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值
  3. json类型数据
  4. 嵌套类型数据
举例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3> 数组 </h3>
    <ul>
      <li v-for = " (item,index) in arr ">
        <p> item :{{ item }} --  index: {{ index }}</p>
      </li>
    </ul>
    <hr>
    <h3> 对象 </h3>
    <ul>
      <li v-for = "(item,key,index) in obj"> 
        <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> json </h3>
    <ul>
      <li v-for = "(item,index) of json">
        <p> id: {{ item.id }} </p>
        <p> task: {{ item.task }} </p>
        <p> {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> 嵌套 </h3>
    <ul>
      <li v-for = " item in lists ">
        <p> id: {{ item.id }} </p>
        <ul>
          <li v-for = "todo in item.todos">
            todos中的数据 -- {{ todo }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
<script>
  /* 
    v-for
      1. 数组  v-for = " (item,index) in arr "       item是arr中每一个元素
      2. 对象  v-for = "(item,key,index) in obj "        item是obj的属性值
      3. json类型数据
      4. 嵌套类型数据
  */

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

  // for( var i in arr ){}

  // for ( var i of arr ) {}

  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: '骏哥',
        sex: 'man',
        age: 18
      },
      json: [
        {
          id: 1,
          task: '敲代码1'
        },
        {
          id: 2, 
          task: '敲代码2'
        }
      ],
      lists: [
        {
          id: 1,
          todos: {
            id: 1,
            name: '连城'
          }
        },
        {
          id: 2,
          todos: {
            id: 2,
            name: '文武'
          }
        }
      ]
    }
  })
</script>
</html>

for-key

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

      使用指令 v-bind 来绑定 key

      <div v-for = " (item,index) in lists" v-bind:key = " item.id "></div>

      如果有id，那么我们就使用id，如果没有，我们才会选择index

      v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上

      简写

      <div v-for = " (item,index) in lists" :key = " item.id "></div>

添加class名

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

              <p :class = "{ size,bg_color }"></p>
                  size是自定义的属性， 它的属性值是undefined， 相当于是false
              <p :class = "{ size: true, bg_color: true }"></p>
                  size也是自定义属性，他的属性是true,那么就会加上去
              <p :class = "{ [s]: true, [bg_color]: true }"></p>
                
          格式： v-bind:class = "{ 属性： boolean }"
          格式： v-bind:class = "{ [data]： boolean }"
3. vue中类名绑定的形式 - 数组的形式    【 推荐 】
    格式： v-bind:class = "[ 数据 ]"

4. 类名绑定不会覆盖原先的类名

5. 为什么要绑定类名
-  指令是用来操作dom
- 目的： 为了将来通过数据来操作类名，类名操作dom

style

样式的绑定： 
  v-bind: style = ""
  1. 对象的形式
  2. 数组的形式
  
  
<!DOCTYPE html>

<div id="app">
    <h3> style </h3>
    <hr>
    <h3> style - 对象形式 </h3>
    <p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>

    <h3> style - 数组的形式 </h3>

    <p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>

    <p :style = "[ size,bg ]"></p>
  </div>
</body>
<script>
  /* 
    样式的绑定： 
      v-bind: style = ""
      1. 对象的形式
      2. 数组的形式
  */
  new Vue({
    el: '#app',
    data: {
      size: {
        width: '100px',
        height: '100px'
      },
      bg: {
        background: 'purple'
      }
    }
  })
</script>

event

问题： javascript事件添加有几种形式

  1. 事件绑定
    dom.onclick = function () {}
    dom: 事件源
    on: 绑定事件的形式
    click: 事件类型
    function（）{} 事件处理函数
  1. 事件监听 ： addeventListener
  2. 直接在标签中绑定事件
    <div onclick = "事件名称"></div>

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

<div v-on:click = "事件名称"></div>

v-on的使用

    v-on:eventType = " handlerName "

       简写  v-on:    --- > @

例子：

<body>
  <div id="app">
    <button v-on:click = "helloHandler"> 点击 </button>
    <button @click = "helloHandler"> 点击 </button>
  </div>
</body>
<script>
  /* 
    事件
       v-on使用

       事件源
       事件绑定形式
       事件类型
       事件处理程序

       v-on:eventType = " handlerName "

       简写  v-on:    --- > @

   */
  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler () {
        alert( 'hello' )
      }
    }
  })
  console.log( 'vm', vm )
</script>
</html>

            参数
            事件对象
            <button v-on:click = "helloHandler(100)"> 点击 </button>
  • 问题： 函数调用有哪些方法？
  • 直接调用 ()
  • 事件
事件对象e :
事件对象也可以正常使用

        在事件处理程序中， 写e就可以了

   */
  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler ( e ) {
        console.log( e )
      }
    }
  })
问题： 如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现
分析： 我们发现事件处理程序中的第三个参数 e 不再是事件对象了，而是一个undefined

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

例子：

<body>
  <div id="app">
    <!-- <button v-on:click = "helloHandler"> 点击 </button> -->
    <button @click = "helloHandler( 10,20,$event)"> 点击 </button>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler ( a,b,e ) {
        console.log( a )
        console.log( b )
        console.log( e )
      }
    }
  })
  console.log( 'vm', vm )
</script>
</html>

<body>
  <div id="app">
    <button @click = "add"> + </button>
    <button @click = "remove"> - </button>
    <button @click = "indexHandler"> 修改第二条数据 </button>
    <ul>
      <li v-for =" item in lists " :key = "item.id">
        {{ item.task }}
      </li>
    </ul>
    <hr>
    <button @click = "arrChange"> 修改第二条数据 </button>
    <ul>
      <li v-for = " (item,index ) in arr " :key = "index">
        {{ item }}
      </li>
    </ul>
  </div>
</body>
<script>
  /* 
    业务： 点击这个按钮，添加一条新的数据放在列表数据中


    问题： 下标是不能检测变动的，但是我们现在看到了它检测到了

    问题： 如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动 
    
    解决方法： 使用splice

    问题： 我们直接修改一个数组下的一个数据时，发现下标不能检测变动了

    解决方法： 使用 Vue.set / this.$set

   */
  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3],
      lists: [
        {
          id: 1,
          task: '锻炼1'
        },
        {
          id: 2,
          task: '敲代码'
        }
      ]
    },
    methods: {
      add () {
        // console.log( this )
        this.lists.push({
          id: this.lists.length + 1,
          task: '打篮球'
        })
      },
      remove () {
        this.lists.pop()
      },
      indexHandler () {
        //将列表中的第二个数据中的task任务修改为 撸猫
          this.lists[1] = {
            id: 2,
            task: '骏哥'
          }
        
        // 将整个列表清空
          // this.lists.length = 0

          // this.lists.splice( 0 )

      },
      arrChange () {
        // this.arr[ 1 ] = '骏哥'  不可以检测到的

        // this.$set( this.arr,'1','骏哥' )
        Vue.set( this.arr,'1','骏哥')
        //注意此处1要写成 "1"
      }
    }
  })
</script>
</html>

v-model

  • 双向数据绑定
  • 默认绑定value值
  • v-model应用于表单元素

例子：

<body>
  <div id="app">
    <input type="text" v-model = "msg">
    <p> {{ msg }} </p>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js'
    }
  })
</script>

猜你喜欢

转载自blog.csdn.net/weixin_45213847/article/details/92847125
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022