乐趣区

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

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

退出移动版