[Vue]介绍、常用指令

一.介绍

1. Vue是什么？优点？

是优秀的前端JavaScript框架。
轻量级框架：只关注视图层，是一个构建数据的视图集合。
简单易学：国人开发。
双向数据绑定：在数据操作方面更为简单。
视图、数据、结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
虚拟dom：不再使用原生的dom操作节点，但是具体操作的还是dom，节省性能。

2. 术语解释

• 表达式：是由运算符连接变量或者直接量构成。表达式的值就是它的计算结果，它的类型就是它的计算结果的类型。
  • 插值表达式：
    • 作用：将绑定的数据实时显示
    • 注意：不能写js语句
• 指令： 是带有v-前缀的特殊特性
  • 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

3. 起步

每个 Vue 应用都需要通过实例化 Vue 来实现，语法格式如下：

var vm = new Vue({
  el:'#app',
  data:{
  },
  methods:{
  }
})

vue构造器中包含el、data、methods。
el

• 作用：当前Vue实例所管理的html视图
• 值：通常是id选择器
• 不能管理html或者body
  data
• Vue 实例的数据对象，是响应式数据(数据驱动视图)
• 可以通过 vm.$data 访问原始数据对象
• Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
• 视图中绑定的数据必须显式的初始化到 data 中
  methods
• 其值为一个对象
• 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用
• 方法中的 this 自动绑定为 Vue 实例
• 不能使用箭头函数定义method函数，因为此时箭头函数绑定了父级作用域的上下文，所以this不会指向vue

二.常用指令

1. v-text和v-html
   与innerText和innerHtml很像

• 相同点：都是用来更新标签中的内容
• 不同点：v-html可以渲染内容中的html内容，但是容易造成危险（XSS跨站脚本攻击）

2. v-if和v-show

• 相同点：都能根据表达式的bool值判断是否渲染该元素
• 不同点：v-if有更高的切换开销，v-show有更高的初始渲染开销，因此如果在运行时条件很少改变，使用v-if；多次切换则用v-show

3. v-on

• 作用：绑定DOM事件，在事件触发时执行一些js代码
• 语法：@事件名.修饰符 ="methods中的方法名"
• 注意：$event可以传形参

4. v-for

• 作用：根据一组数组或对象的选项列表进行渲染
• 语法：item in items，items是源数据数组/对象

5. v-bind

• 作用：可以绑定标签上的任何属性
• 绑定src和id属性
• 绑定class类名
  • 对象语法
    就是传给 v-bind:class 一个对象，动态地切换 class

.active {
 color: red;
 }

<div id="app">
    <div v-bind:class="{active: isActive}">
        hei
    </div>
    <button @click="changeClassName">点击切换类名</button>
</div>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true
        },
        methods: {
            changeClassName: function() {
                this.isActive = !this.isActive;
            }
        }
    });
</script>

• 数组语法
  传给 v-bind:class 一个对象数组

<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
</script>

• 简化语法

<div v-bind:class="{active: isActive}">
</div>
<!-- 可以简化为 :，简化语法更常用 -->
<div :class="{active: isActive}">
</div>

6. v-model

• 作用：表单元素的绑定
• 特点：双向绑定，即数据发生变化可以更新到界面，通过界面可以更改数据
• 注意：v-model总是将vue实例的数据作为数据来源，应在data选项中生命初始值

 <div id="app">
        <p>{{message}}</p>
        <input type='text' v-model='message'>
        <hr>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默认值'
            }
        });
    </script>

• v-model是一种语法糖，是对如下写法的一个简化

<input v-bind:value='message' v-on:input='message = $event.target.value' />

• 本质上是对input输入事件的一个监听，并将监听事件中的数据放入到input

7. v-cloak

• 作用：解决渲染页面时的变量闪烁

<div id="app" v-cloak>
       <p>{{message}}</p>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
   <script>
       var vm = new Vue({
           el: '#app',
           data: {
               message: '我是data中message的数据'
           }
       });
   </script>

在以上写法中，如果页面加载速度较慢，则会看到{{message}}，为了解决这个问题，在vue管理的视图div上使用v-cloak指令即可。

8. v-once

• 作用：只渲染元素和组件一次

 <div id="app">
     <p v-once>{{message}}</p>
     <input type="text" v-model="message">
</div>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '我是data中message的属性的值'
        }
    });
</script>

9. 过滤器

• 作用：处理数据格式
• 使用位置：插值表达式和v-bind表达式
• 分类：局部注册和全局注册

1. 局部注册

• 在vm对象的选项中配置过滤器filters:{}
• 过滤器的名字：（要过滤的数据）=>（return 过滤的结果）
• 在视图中使用过滤器：{{过滤的数据|过滤器的名字}}
• 过滤器只适用于当前vm对象

<div id="app">
    <!-- 3. 调用过滤器 -->
    <p>{{ msg | upper | abc }}</p>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'kfc'
        },
        // 1. 设置vm的过滤器filters选项
        filters: {
            upper: function(v) {
                // 2. 在过滤器的方法中操作数据并返回结果
                return v.toUpperCase();
            }
        }
    });
</script>

2. 全局注册

• 创建 Vue 实例之前定义全局过滤器Vue.filter()
• Vue.filter('过滤器名字',(要过滤的数据)=>{return 对数据的处理结果})
• 在视图中通过{{数据 | 过滤器的名字}}或者v-bind使用过滤器
• 过滤器是可以串联使用的, 比如 {{msg | upper1 | upper2}}
• 过滤器是可以传参数的,比如{{msg | upper1(自己传的参数)}}

<div id="app">
    <!-- 3. 调用过滤器: (msg会自动传入到toUpper中)-->
    <p>{{msg | toUpper}}</p>
</div>
<script src="./vue.js"></script>
<script>
    // 1. 定义全局过滤器
    Vue.filter('toUpper', (value) => {
        console.log(value);
        // 2. 操作数据并返回
        value = value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
        console.log(value);
        return value;
    });

    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        methods: {

        }
    });
</script>

10. ref操作DOM

• 作用：在vue中操作DOM元素
• 使用步骤：
  • 给DOM元素设置ref属性的值
  • 在Vue中的mounted选项下通过this.$ref.属性获取到要操作的DOM

<div id="app">
    <!-- 1. 给要操作的DOM元素设置ref属性 -->
    <input type="text" ref="txt">
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        // mounted当页面加载完毕执行
        mounted() {
            console.log(this.$refs.txt);
            // 2. 用this.$refs.属性 去操作DOM
            this.$refs.txt.focus();
        },
    });
</script>

11. 自定义指令

• 作用：对普通DOM元素进行操作
• 分类：局部注册、全局注册

1. 局部注册

• vm对象的选项中设置自定义指令directives:{}
• directives:{'指令的核心名称':{inserted:(使用指令时的DOM对象)=>{具体的DOM操作}}}
• 在视图中通过标签去使用指令

<div id="app">
  <input v-focus type="text" />
</div>
<script>
  var vm = new Vue({
    el:'#app',
    directives:{
      focus:{
        inserted: function(el){
          el.focus();
        }
      }
    }
})

</script>

2. 全局注册

• 创建 Vue 实例之前定义全局自定义指令Vue.directive()
• Vue.directive('指令的名称',{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } );

<div id="app">
  <input v-focus type="text">
</div>
<script>
      Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时,inserted会被调用
        inserted: (el) => {
            // el 就是指令所在的DOM对象
            el.focus();
        }
    });

        var vm = new Vue({
        el: '#app'
    });
</script>

12. 计算属性

• Vue实例的一个选项computed:{}
• 作用：在计算属性中处理data中的数据

<div id="app">
  <p>{{a}}</p>
  <p>{{b}}</p>
  <p>{{comC}}</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            a: 0,
            b: 0
        },
        // 计算属性
        /*
             * 计算属性是Vue实例的一个选项
             * 计算属性的值是一个对象
             * 计算属性也是属性,只不过值是带有返回值的函数
             * 当data中的属性一发生变化, 会自动调用计算属性的方法
             */
        computed: {
            comC: function() {
                return this.a + this.b
            }
        }
    });
</script>

computed和methods区别

• computed
  • 一旦data中的数据发生变化,就会触发计算属性的方法
  • 会将data中属性的结果进行缓存
• methods
  • 一调用就会触发, 和数据的变化与否无关