关于vue.js:vue基础之必备指令及使用

40次阅读

共计 6721 个字符，预计需要花费 17 分钟才能阅读完成。

Vue 是什么？

  • vue 是一套用于构建用户界面的渐进式框架，vue 外围库只关注视图层，不仅易上手还便于与第三方库或既有我的项目的整合
  • 指令：实质就是属性，Vue 中以 v - 结尾的属性就是指令

  • v-clooak 避免页面加载时呈现闪动问题

      v-clooak 的应用
     <style type="text/css">
  /* 
    1、通过属性选择器 抉择到 带有属性 v -cloak 的标签让他暗藏
 */
  [v-cloak]{
    /* 元素暗藏    */
    display: none;
  }
  </style>
  <body>
    <div id="app">
        <div  v-cloak  >{{msg}}</div>
    /* 让带有插值愈发的增加  v-cloak 在数据渲染实现之后，v-cloak 属性会被主动去除  v-cloak 一旦移除也就是没有这个属性了，属性选择器就抉择不到该标签也就是对应的标签会变为可见 */
    </div>
    // 引入 vue 文件
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
          //el 指定元素 id 是 app 的元素  
          el: '#app',
          //data 外面存储的是数据
        data: {msg: 'Hello Vue'}
      });
    </script>
  </body>

  • v-text

    `1. v-text 指令用于将数据填充到标签中，作用于插值表达式相似，然而没有闪动问题 `
`2. 如果数据中有 HTML 标签会将 html 标签一并输入 `
`3. 留神：此处为单向绑定，数据对象上的值扭转，插值会发生变化；然而当插值发生变化并不会影响数据对象的值 `
v-text 的应用
    <div id="app">
    **<!-- 留神：在指令中不要写插值语法，间接写对应的变量名称 -->
    <!-- 所以在 v -text 中赋 ** 值的时候不要写插值语法个别不加 {{}} 间接写数据名 -->
     <p v-text="msg"></p>
     <!--vue 中只有在标签的内容中采纳插值语法 -->
     <p>{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
     new Vue({
          el: '#app',
          data: {msg: 'Hello Vue.js'}
       });
</script>

  • v-html

    `1. 用法和 v -text 类似  然而他能够将 HTML 片段填充到标签中 `
`2. 可能有平安问题，个别只在信赖的内容上应用 v -html，永远不必在用户提交的内容上 `
`3. 它与 v -text 区别在于 v -text 输入的是纯文本，浏览器不会对其再进行 html 解析，但 v -html 会将其当 html 标签解析后输入。`
    <div id="app">
    <!-- 输入：html 标签在渲染的时候被解析 -->
    <p v-html="html"></p>
    <!-- 输入：<span> 通过双括号绑定 </span> -->
    <p>{{message}}</p>
    <!-- 输入：<span>html 标签在渲染的时候被源码输入 </span> -->
    <p v-text="text"></p>
</div>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
           message: "<span> 通过双括号绑定 </span>",
           html: "<span>html 标签在渲染的时候被解析 </span>",
          text: "<span>html 标签在渲染的时候被源码输入 </span>",
         }
     });
</script>

  • v-pre
    1. 显示原始信息跳过编译过程
    2. 跳过这个元素和它的子元素的编译过程。
    3. 一些动态的内容不须要编译加这个指令能够放慢渲染

    <div id="app">
     <span v-pre>{{this will not be compiled}}</span> 
     <!--  显示的是{{this will not be compiled}} -->
     <span v-pre>{{msg}}</span>   
     <!-- 即便 data 外面定义了 msg 这里依然是显示的{{msg}} -->
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {msg: 'Hello Vue.js'}
    });
</script>
  • v-once

执行一次性的插值【当数据扭转时，插值处的内容不会持续更新】

<div id="app">
<!-- 即便 data 外面定义了 msg 前期咱们批改了
 依然显示的是第一次 data 外面存储的数据即 Hello Vue.js  -->
      <span v-once>{{msg}}</span> 
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {msg: 'Hello Vue.js'}
    });
</script>
  • 双向数据绑定

1. 当数据发生变化的时候，视图也就发生变化
2. 当视图产生扭转的时候，数据也会跟着同步变动

  • v-model

v-model 是一个指令，限度在 <input>、<select>、<textarea>、components 中应用

 <div id="app">
      <div>{{msg}}</div>
      <div>
         <!--- 当输入框中内容扭转的时候, 页面上的 msg 会自动更新 -->
        <input type="text" v-model='msg'>
      </div>
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {msg: 'Hello Vue.js'}
    });
</script>
  • v-on

用来绑定事件的: 模式如：v-on:click 缩写为 @click

<div id="app">
      <div>{{num}}</div>
      <div>
              <!--- 通过 v -on 或者其缩写模式 @来给元素绑定事件 -->
              <button v-on:click='num++'> 点击 1 </button>
              <button @click='num++'> 点击 2 </button>
      </div>
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {num:1}
    });
</script>
- **v-on 事件函数中传入参数 **
```html
<div id="app">
      <div>{{num}}</div>
      <div>
               <!-- 如果事件间接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
              <button v-on:click='handle1'> 点击 1 </button>
              <!-- 
                  如果事件绑定函数调用，那么事件对象举荐作为最初一个参数显示传递，事件对象的名称为 $event
              -->
              <button @click='handle2(12,23,$event)'> 点击 2 </button>
      </div>
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {num:1},
        methods:{handle1:function(e){
                this.num++
                 <!-- 事件对象中有能够拿到相应的值 -->
                 <!-- 这个拿的是是按钮外面的值：点击 1 -->
                console.log(e.target.innerHTML)
            }
            handle2:function(p,p1,e){console.log(p+p1)
                <!-- 这个拿的是是按钮外面的值：点击 2 -->
                console.log(e.target.innerHTML)
                this.num++
            }
        }
    });
</script>
```
  • 事件修饰符

1. 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是十分常见的需要。
2. Vue 不举荐咱们操作 DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
3. 修饰符是由点结尾的指令后缀来示意的

    <!-- 阻止单击事件持续流传 -->
    <a @click.stop="doList"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符能够串联   即阻止冒泡也阻止默认事件 -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只当在 event.target 是以后元素本身时触发处理函数 -->
    <!-- 即事件不是从外部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
 ` 应用修饰符时，程序很重要；相应的代码会以同样的程序产生。因而，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素本身的点击。`
  • 按键修饰符

在做我的项目中有时会用到键盘事件，在监听键盘事件时，咱们常常须要查看具体的按键。Vue 容许为 v-on 在监听键盘事件时增加按键修饰符

    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input v-on:keyup.13="submit">
    <!-- - 当点击 enter 时调用 vm.submit() -->
    <input v-on:keyup.enter="submit">
    <!-- 当点击 enter 或者 space 时  时调用 vm.alertMe()   -->
    <input type="text" v-on:keyup.enter.space="alertMe" >
    <!--
        罕用的按键修饰符
        1. .enter =>    enter 键
        2. .tab => tab 键
        3. .delete (捕捉“删除”和“退格”按键) =>  删除键
        4. .esc => 勾销键
        5. .space =>  空格键
        6. .up =>  上
        7. .down =>  下
        8. .left =>  左
        9. .right =>  右
    -->
    <script>
        var vm = new Vue({
            el:"#app",
            methods: {submit:function(){},
                  alertMe:function(){},
            }
        })
   </script>
  • 自定义按键修饰符别名

在 Vue 中能够通过 config.keyCodes 自定义按键修饰符别名

<div id="app">
    <!-- 事后定义了 keycode 116（即 F5）的别名为 f5，因而在文字输入框中按下 F5，会触发 prompt 办法 -->
     <input type="text" v-on:keydown.f5="prompt()">
</div>
<script>
    Vue.config.keyCodes.f5 = 116;
    let app = new Vue({
    el: '#app',
    methods: {prompt: function() {alert('我是 F5！');
        }
    }
});
</script>
  • v-bind

v-bind 指令被用来响应地更新 HTML 属性 '
v-bind:href 能够缩写为 :href;

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
  • 绑定对象

咱们能够给 v -bind:class 一个对象，以动静地切换 class。
留神：v-bind:class 指令能够与一般的 class 个性共存

<style>
    .textColor{
        color:#f00;
        background-color:#eef;
        }
  .textSize{
        font-size:30px;
        font-weight:bold;
     }    
</style>
    <!-- 
        v-bind 中反对绑定一个对象
        如果绑定的是一个对象则键为对应的类名值为对应 data 中的数据
    --->
<div id="app">
    <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
        <li> 学习 Vue</li>
        <li> 学习 Node</li>
        <li> 学习 React</li>
    </ul>
</div>
<script>
    var vm= new Vue({
        el:'.box',
        data:{
            isColor:true,
            isSize:true，}
    })
</script>

  • 绑定 class

    <style>
    .textColor{
        color:#f00;
        background-color:#eef;
     }
  .textSize{
        font-size:30px;
        font-weight:bold;
     }    
</style>
<!-- v-bind 中反对绑定一个数组, 数组中 classA 和 classB 对应为 data 中的数据 --->
<div id="app">
    <ul class="box" v-bind:class="[classA, classB]">
        <li> 学习 Vue</li>
        <li> 学习 Node</li>
        <li> 学习 React</li>
    </ul>
</div>
<script>
    var vm= new Vue({
        el:'.box',
        data:{
            classA:‘textColor‘,
            classB:‘textSize‘}
    })
</script>
  • 绑定对象和绑定数组 的区别

1. 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
2. 绑定数组的时候数组外面存的是 data 中的数据

  • 绑定 style

    <div id="app">
     <div v-bind:style="styleObject"> 绑定款式对象 </div>
     <!-- CSS 属性名能够用驼峰式 (camelCase) 或短横线分隔(kebab-case 记得用单引号括起来)-->
     <div v-bind:style="{fontSize: fontSize,background:'red'}"> 内联款式 </div>
     <!-- 组语法能够将多个款式对象利用到同一个元素 -->
     <div v-bind:style="[styleObj1, styleObj2]"></div>
</div>
<script>
    new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px',
          background:'red'
        },
           fontSize: "30px",
           styleObj1: {
             color: 'red',
             width:'100px'
       },
       styleObj2: {fontSize: '30px'}
     } 
</script>
  • 分支构造
  • v-if 应用场景

1. 多个元素 通过条件判断展现或者暗藏某个元素。或者多个元素
2. 进行两个视图之间的切换

<div id="app">
   <!--  判断是否加载，如果为真，就加载，否则不加载 -->
   <span v-if="flag">
       如果 flag 为 true 则显示,false 不显示!
   </span>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{flag:true}
    })
</script>
  • v-show 和 v-if 的区别

1. v-show 实质就是标签 display 设置为 none/block，控显示暗藏

     `v-show 只编译一次，前面其实就是管制 css，而 v -if 不停的销毁和创立，故 v -show 性能更好一点 `

2. v-if 是动静的向 DOM 树内增加或者删除 DOM 元素
v-if 切换有一个部分编译 / 卸载的过程，切换过程中适合地销毁和重建外部的事件监听和子组件

  • 循环构造
  • v-for

用于循环的数组外面的值能够是对象，也能够是一般元素 

<ul id="example-1">
       <!-- 循环构造 - 遍历数组  
        item 是咱们本人定义的一个名字  代表数组外面的每一项  
        items 对应的是 data 中的数组 -->
      <li :key="item.id" v-for="item in items">
        {{item.message}}
      </li> 
       <!--  循环构造 - 遍历对象 
           v 代表   对象的 value
           k 代表   对象的键 
         i 代表   索引 ---> 
       <div  v-for='(v,k,i) in obj'>{{v + '-' + k + '-' + i}}</div>
</ul>
<script>
     new Vue({
      el: '#example-1',
      data: {
        items: [
          { 
               id:1,
              message: 'Tom'
           },
          { 
             id:2,
              message: 'Jerry' 
          }
        ]，obj: {
            uname: 'lfang',
            age: 13,
            gender: 'female'
        }
      }
    })
</script>
  • key 的作用 个别循环都会增加 key 目标是

1. key 来给每个节点做一个惟一标识
2. key 的作用次要是为了高效的更新虚构 DOM

正文完
vue.js
发表至： vue.js
2020-08-10
 0
关于vue.js:Vue项目之使用EditorConfig-Eslint和Prettier实现代码规范
关于vue.js:vueelementPlus-table自动滚动
关于vue.js:Vue2中虚拟DOM和Snabbdom
vue30-diff算法详解超详细