Vue(常用指令、事件、属性、模板、修饰符)

陆先森

一、Vue.js简介

1. Vue.js是什么？

• 是一个构件用户界面的框架
• 是一个轻量级MVVM(Model-View-ViewModel)框架，和angular、react类似，其实就是所谓的数据双向绑定
• 数据驱动+组件化的前端开发(核心思想)
• 通过简单的API实现响应式的数据绑定和组合的视图组件
• 更容易上手、小巧

2.vue和angular的区别

2.1 angular

• 上手较难
• 指令以ng-xxx开头
• 所有属性和方法都存储在$scope中
• 由google维护

2.2 vue

• 简单、易学、更轻量
• 指令以v-xxx开头
• HTML代码和JSON数据，再创建一个vue实例
• 由个人维护：尤雨溪

  共同点：都不兼容低版本IE

二、常用指令

1.什么是指令？

• 答：用来扩展html标签的功能

  2.vue中常用的指令

• v-mode 双向数据绑定，一般用于表单元素

  <template>
      <div>
          {{name}}
          <input type="text" v-model="name"/>
      </div>
  </template>
  <script>
      export default{
          data(){
              return{
                  name: "tom"
              }
          }
      }
  </script>

• v-for 对数组或对象进行循环操作，使用的是v-for

  <template>
      <ul>
          // 指定:key属性绑定唯一key,当更新元素时可重用元素，提高效率
          <li v-for="item,key in arr" :key="key">{{item}}</li>
      </ul>
  </template>
  <script>
      export default{
          data(){
              return{
                  arr:{"one":1,"two":2}
              }
          }
      }
  </script>

• v-on 用来绑定事件 用法：v-on:事件名="函数"

  <template>
      <div>
          // v-on:onmouseover v-on:dblclick ......
          <button v-on:click="show">点我</button>
      </div>
  </template>
  <script>
      export default{
          methods:{
              show(){
                  console.log(1);
              }
          }
      }
  </script>

• v-show / v-if 用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后在重新创建

  <template>
      <div v-show="onOff" @click="show"></div>
  </template>
  <script>
      export default{
          data(){
              return{
                  onOff:true;  
              }
          }
          methods:{
              show(){
                  this.onOff = false;
              }
          }
      }
  </script>
  <style lang="scss" scoped>
      div{
          width:100px;
          height:100px;
          border:1px solid red;
      }
  </style>

三、事件和属性

1.事件

1.1 事件简写

• v-on:click=""
• 简写方式 @click=""

1.2 事件对象$event

• 包含事件相关相关信息，如事件源、事件类型、偏移量

1.3 事件冒泡

• 阻止事件冒泡
• @click.stop="clickMe"

1.4 默认行为

• 阻止默认行为
• @click.prevent="clickMe"

1.5 键盘事件

• 键盘事件：@keydown、@keypress、@keyup
• @keydown.enter="print"
• 默认没有@keydown.a/b/c/d...z
• 可以自定义键盘事件，也称为自定义键码或自定义键位别名! 文档

2.属性

2.1 属性绑定和属性的简写

• v-bind 用于属性绑定，v-bind:属性=""

  属性的简写

• v-bind:src="" 简写 :src=""   

2.2 class属性

class想同时设置两个类名数组方式(不常用)

        <template>
            <div :class="[one,two]"></div>
        </template>
        <script>
            export default{
                data(){
                    return {
                        one:"class1",
                        two:"class2"
                    }
                }
            }
        </script>

class想同时设置两个类名对象方式(常用)

        <template>
            <div :class="{class1:true,class2:'0' === '0' ? true:false}"></div>
        </template>

四、模板

1.简介

• Vue.sj使用HTML的模板语法，可以将DOM绑定到Vue实例中的数据模板也就是{{}}，用来进行数据绑定，显示在页面中也称为Mustache语法

2.数据绑定的方式

a)双向绑定
    v-model
b)单向绑定

方式1：使用两对大括号{{}}，可能会出现闪烁问题，可以使用v-cloak

    /* 必须配置css样式，否则没效果 */
    [v-cloak]{
        display:none;
    }

    <div v-cloak> {{message}} </div>

方式2：使用v-text、v-html

    <template>
        <div v-text="message"></div>
    </template>

    <script>
        export default{
            data(){
                return{
                    message:"你好"
                }
            }
        }
    </script>

3.其它指令

v-once="message" 数据只绑定一次，不会监视数据，后面数据改变也不会更改
v-pre 不编译模板，直接原样显示