码迷,mamicode.com
首页 > 其他好文 > 详细

VUE的使用

时间:2018-11-02 14:29:39      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:字符   事件   注意   date()   官网文档   性能   angular   set   不可   

一、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
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
 

VUE的使用

标签:字符   事件   注意   date()   官网文档   性能   angular   set   不可   

原文地址:https://www.cnblogs.com/changwoo/p/9895663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!