VUE的使用

Posted 2021-01-16 changwoo

一、VUE介绍

二、VUE的指令系统

三、计算属性和帧听器

四、表单输入绑定

 

 

一、VUE介绍

 

1.在前端框架技术中有三大框架：Angularjs：谷歌公司生产  React：Facebook公司   Vue:尤雨溪（中国）

 

2.vue的介绍

vue官网说：Vue.js（读音 /vju?/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

 

3.vuejs的优点

1.易用。已经会了 html、CSS、javascript？即刻阅读指南开始构建应用！

2.灵活。不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

3.高效。20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化

 

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想

(1) 提供一种方便的工具，使得开发效率得到保证(2) 保证最小化的DOM操作，使得执行效率得到保证

虚拟dom的渲染速度要比我们真实的dom渲染速度快

 

 

二、VUE的指令系统

 

1.导入vue.js

<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>

2.创建实例对象

<div class="app">{{msg}}</div>

var app = new Vue({

 

    el:‘.app‘,

    data:{

        msg:‘hello, world!‘

    }

})

 

下面开始介绍用法：

• {{ msg }} 两个花括号之间可以传入一个变量；
• {{1==1?‘yes‘:‘no‘}} 插入判断

 

指令系统：

1、v-if

<div v-if = ‘show‘>显示</div>

<div v-else-if = ‘no‘>不确定</div>

<div v-else>隐藏</div>

show:true,

 

2、v-show

v-if 和 v-show的区别在于v-if是真正的销毁节点，而v-show只是隐藏了节点。（display：none）

<p v-show=‘is_show‘>显示</p>

is_show:false

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

 

 

class与style绑定：

1、v-bind

<p v-bind:title=‘time‘>{{time}}</p>

time: `现在时间${new Date().toLocaleString()}`,

.col1 {color: red;}

<div v-bind:class=‘{col1:is_red}‘>11111</div>

is_red: true,

 

2、v-on

.col1 {color: red;}

 

<div v-bind:class=‘{col1:is_red}‘>11111</div>

<button v-on:click=‘clicker‘>click me</button>

 

var app = new Vue({

 

    el:‘.app‘,

    data:{

        msg:‘hello, world!‘,

 

        is_red: true,

    },

    methods:{

        clicker(){

            this.is_red = !this.is_red;

        }

    }

})

 

3、三元表达式

<div v-bind:class="[isActive ? activeClass : ‘‘, errorClass]"></div>

为了简便，可以这样写

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 

事件处理：

可以用v-on来监听DOM事件，并在触发时运行一些js代码

<button v-on:click=‘counter+=1‘>{{counter}}</button>

counter: 0,

 

4.为什么在HTML中监听事件？

 

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

在这里多补充一点：v-bind可以简写为：、v-on: 可以简写@

 

 

三、计算属性和帧听器

 

1.计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div>

    {{ message.split(‘‘).reverse().join(‘‘) }}

</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

<div id = ‘com‘>

        <h3>{{msg}}</h3>

        <p>{{currentMsg}}</p>

        <button @click=‘clickHandler‘>更改</button></div>

 

    var com = new Vue({

            el:‘#com‘,

            data:{

                msg:‘学习computed‘

            },

            methods:{

                clickHandler(){

                    this.msg = ‘我更改了数据‘

                }

            },

            computed:{

                currentMsg(){

                    // computed方法中默认只有getter

                    return this.msg

                 }

            }

        })

 

当我点击按钮的时候更改了当前的数据，同时h3和p标签中数据也随时改变。

 

2.为什么会这样呢？

因为Vue知道com.currentMsg依赖与com.msg,因此当com.msg发生改变时，所有依赖com.currentMsg的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系。：计算属性的getter函数是没有副作用的，这使它更易于测试和理解。

同样的上面操作，我们不用computed声明的计算属性方法，而仅仅通过methods中声明的方法也能完成上面的效果，那么为什么又要使用computed方法呢？

因为计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要msg还没有发生变化，多次访问currentMsg计算属性会立刻返回之前计算的结果，而不比再次执行函数。同样的。每当触发重新渲染时，调用方法将总会执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

 

3.计算属性的getter

计算属性默认只有getter，不过在需要时你也可以提供一个setter。

 

  var com = new Vue({

            el:‘#com‘,

            data:{

                msg:‘学习computed‘

            },

            methods:{

                clickHandler(){

                    this.currentMsg = ‘我更改了数据‘

                }

            },

            computed:{

                currentMsg:{

                   set : function(newValue){

                      this.msg = newValue;

                   },

                   get : function(){

                     return this.msg;

                   }

                 }

            }

        })            

当点击按钮的时候，会触发computed中的setter方法，从而将newValue的值，赋值给msg。因为计算属性方法的getter方法因为跟msg有依赖关系，从而会相应的发生改变。

 

四、表单输入绑定

 

vue的核心：声明式的指令和数据的双向绑定。

1.那什么是数据的双向绑定?

另外，大家一定要知道vue的设计模式：MVVM

M是Model的简写，V是View的简写，VM就是ViewModel。

 

单向绑定和双向绑定的区别？

单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。

有单向绑定，就有双向绑定。

如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

什么情况下用户可以更新View呢？填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定。

其实单项数据也有双向绑定的意思，不过页面变动后数据的变化不会发生自动更新。

我们可以这样认为：双向数据绑定=单向数据绑定+UI事件监听。

 

我们先看个vue中双向数据绑定的例子：

 

<body>

  <div id="app">

    <input type="text" v-model="meg">

    <p>{{data}}</p>

  </div>

  <script>

    var app = new Vue({

      el:‘#app‘,

      data :{

        meg:‘‘

      }

     

    })

  </script></body>

再简单不过了，效果显示，当我们在input输入框中输入内容的时候，下面p标签同步显示内容。这就是最典型的双向数据绑定的例子。vue里使用v-model实现此想法。

 

那么我们看一下v-model的实现原理是怎样的呢？

通过官网的介绍，我们知道v-mode指令是v-bind:vlaue 和v-on:input的结合体。

 

2.看个例子吧，同时给大家介绍了计算属性getter的用法。

<!-- <input type="text" v-model = ‘usernameValue‘> -->

 

        <!-- 等价于： -->

        <input type="text" v-bind:value=‘usernameValue‘ @input=‘inputHandler‘>

        <button @click=‘commitHandler‘>提交</button>

        <!-- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 -->

        <div class="list" ref = ‘item‘></div>

 

         var set = new Vue({

            el:‘#set‘,

            data:{

                username:‘‘,

                txt:‘‘

            },

            methods:{

                commitHandler(){

                    this.$refs.item.innerHTML = this.usernameValue;

                },

                inputHandler(e){

                    this.usernameValue = e.target.value;

                }

            },

            computed:{

                usernameValue:{

                    get(){

                        return this.username;

                    },

                    set(newValue){

                        this.username = newValue;

                    }

                }

            }

 

看完上个例子之后，相信大家对v-model实现双向数据绑定和计算属性的setter方法一定有个新的认识了。

 

3.接下来我们看看v-model的一些基础用法！

v-model

v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model只适用在表单控件中

比如：表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。内容太多，就不给大家一一阐述了。大家一定要去阅读vue的官网文档

https://cn.vuejs.org/v2/guide/forms.html