Vue有什么特性，相对于其余框架都有那些优点！

时间 2020-02-07

标签 vue 什么特性相对于其余框架都有那些优点繁體版

原文原文链接

（给达达前端加星标，提高前端技能）javascript

Vue所提供的一些相对高级的特性，表单操做，自定义指令，计算属性，过滤器，侦听器，生命周期。css

表单操做的做用，用于用户的交互，经过表单来进行数据的交互。html

基于Vue的表单操做，input单行文本，textarea多行文本，select下拉多选，radio单选框，checkbox多选框。前端

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 form div {
  height: 40px;
  line-height: 40px;
 }
 form div span:first-child{
  display: inline-block;
  width: 100px;
 }
  </style>
 </head>
 <body>
 <div id="app">
 <form>
 <div>
 <span>姓名：</span>
 <span>
 <input type="text">
 </span>
 </div>
 <div>
 <span>性别：</span>
 <span>
 <input type="radio" id="male">
 <label for="male">男</label>
 <input type="radio" id="female">
 <label for="female">女</label>
 </span>
 </div>
 <div>
 <span>爱好：</span>
 <input type="checkbox" id="ball">
 <label for="ball">篮球</label>
 <input type="checkbox" id="sing">
 <label for="sing">唱歌</label>
 <input type="checkbox" id="code">
 <label for="code">写代码</label>
 </div>
 <div>
 <span>工做</span>
 <select>
 <option>请选择工做</option>
 <option>教师</option>
 <option>老师</option>
 </select>
 </div>
 <div>
 <span>我的简介</span>
 <textarea></textarea>
 </div>
 </form>
 </div>
 <script type="text/javascript" src="js/vue.js"></script>

表单操做，双向数据绑定v-model。表单修饰符，number转化为数值，trim去掉开头和结尾的空格，lazy将input事件切换change事件vue

<input v-model.number="phone" type="number">

自定义指令，为什么有自定义指令，就是内置指令不知足须要。java

如何自定义指令nginx

Vue.directive('focus' {
 inserted: function(el){
 // 获取元素的焦点
 el.focus();
 }
})


如何使用


<input type="text" v-focus>

钩子函数，一个指令定义对象能够提供如下函数。面试

bind只调用一次，指令第一次绑定到元素时调用，在这里能够进行一次性的初始化设置，inserted被绑定元素插入父节点时调用，update所在组件的VNode更新时调用，可是可能发生在其子VNode更新以前，apache

componentUpdated指令所在组件的VNode以及其子VNode所有更新后调用，unbind只调用一次，指令与元素解绑时调用。npm

自定义指令的用法

<input type="text" v-color="msgColor">


// 自定义指令
Vue.directive('color', {
 bind: function(el, binding) {
  el.style.backgroundColor = binding.value.color;
 }
});
var vm = new Vue({
 el: '#app',
 data: {
  msg: {
   color: 'red'
  }
 },
 methods: {
  handle: function() {
  }
 }
}

局部指令

directives: {
 focus: {
  // 指令的定义
  inserted: function(el) {
   el.focus()
  }
 }
}

局部指令的示例：

directives: {
 color: {
  bind: function(el, binding) {
   el.style.backgroundColor = binding.value.color;
  }
 }
}

局部指令只能在本组件中使用，局部指令的应用范围是有限制的。

计算属性，为何须要计算属性呢，表达式的计算逻辑可能会比较复杂，使用计算属性能够是模板内容更加简洁。

如何使用计算属性呢？

computed: {
 msgDa: function() {
  return this.msg.split('').reverse().join('')
 }
}


<div>{{msgDa}}</div>
// 直接调用函数名

计算属性和方法的区别

方法是不存在缓存的，计算属性是基于它们的依赖进行缓存的。只要值不变就不从新计算。方法不存在缓存的机制。

比较耗时的计算能够节省性能，一样的结果没有比较计算两次，用了两次，只执行一次，缓存的问题，计算属性计算的结果缓存起来了，再次访问，就访问计算后的结果。

<div> {{msgDa}} </div>
<div> {{msgDa}} </div>


computed: {
 msgDa: function() {
  console.log('只会打印一次');
  return this.msg.split('').reserse().join('');
 }
}

方法

methods: {
 msgDa: function() {
  console.log('ddd');
  return this.msg.split('').reverse().join('');
 }
}


<div>{{msgDa()}}</div>

侦听器，是用来侦听数据的变化，数据一旦发生变化就会通知侦听器所绑定的方法，侦听器绑定方法，数据变化时执行异步或开销较大的操做。计算属性只能用于一些简单的操做。

使用方法

watch: {
 firstName: function(val) {
  // val表示变化以后的值
  this.fullName = val + this.lastName;
 },
 lastName: function(val) {
  this.fullName = this.firstName + val; 
 }
}

验证用户名的例子，经过v-model实现数据绑定，须要提供提示信息，须要侦听器监听输入信息的变化。采用侦听器监听用户名的变化，调用后台接口进行验证，根据验证的结果调整提示信息，须要修改触发的事件。

表单域的修饰符

<input type="text" v-model.lazy="uname">

Vue中的数据渲染

{{}}

<div id="app">{{ message }}</div>


var vm = new Vue({
  el: '#app',
  data:{
        message:"达达前端"
    }
})

v-html是能够解读html标签渲染

<div id="app" v-html='message'>
    <input type="text"/>
    <div >{{ message }}</div>
 </div>
 
 var vm = new Vue({
  el: '#app',
  data:{
        message:"<div style='background:red;width:60px;height:60px'></div>"
    }
})

v-text

v-text是用于操做纯文本，它会替代显示对应的数据对象上的值。

<div id="app">{{ message }}</div>


var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

过滤器，什么是过滤器，它的做用是什么呢？

用来格式化数据，好比把字符串格式变为大写，将日期格式变化为指定的格式等。

自定义过滤器

Vue.filter('过滤器名称', function(value) {
 // 过滤器业务逻辑
})


// 过滤器的使用
<div> {{msg | upper}} </div>

Vue.filter('upper', function(val) {
 return val.chatAt(0).toUpperCase() + val.slice(1);
})

局部过滤器

filters: {
 capitalize；function() {}
}

Vue.filter('format', function(value, arg1){
})


使用
<div>{{date | format('yyyy-MM-dd')}}</div>

日期格式，y表示年，M表示年中的月份1-12，d表示月份中的天1-31，h表示小时0-23，m表示分0-59，s表示秒0-59等。

指令是用来操做dom，什么是组件，组件是html css js等的一个聚合体。组件化，能够加速项目的进度，能够在项目中复用，将一个完整功能的一部分能够多处使用。

Vue.component的主要功能是注册组件，不是建立组件。

全部的 Vue.js 组件都是被扩展的 Vue 实例，使用Vue.component注册组件时，建立Vue实例必须在注册组件的代码的后面，不然注册的组件不会被显示。

<div id="app">
    <Father></Father>
    <gd-da></gd-da>
  </div>
</body>
<script>


  Vue.component('Father',{
    template: '<div> 这里是全局注册 </div>'
  })




  new Vue({
    el: '#app',
    components: {
      'GdDa': {
        template: '<div> 这里是局部注册 </div>'
      }
    }
  })
</script>

template

类型：string

说明：

一个字符串模板做为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。

CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

NPM安装

npm install vue

完整代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <!--引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--建立一个Div-->
    <div id="app">
        <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
        {{message}}
    </div>


    <!--建立Vue的对象-->
    <script type="text/javascript">
        var app=new Vue({ // 建立Vue对象。Vue的核心对象。
            el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data:{    // Vue对象中绑定的数据
                message:'hello Vue!' // 自定义的数据
            }
        })
</script>
</body>
</html>

输出结果：

hello Vue!

内部指令

v-if 、v-else、 v-show、v-else-if

<div v-if="isLogin">你好</div>
<div v-else>请登陆后操做</div>
<div v-show="isLogin">你好</div>

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

v-if与v-show的区别

v-if：开销较高，在运行时条件不多改变时使用。

v-show：开销较小，在常频繁地切换时使用。

v-for

<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>


<!--JS代码 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[1,2,3,4]
        }
    })
</script>

对象遍历

<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }} - {{ value }}
        </li>
    </ul>
</div>


<!--JS代码 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            object: {
                firstName: 'da',
                lastName: 'dada'
            }
        }
    })
</script>

v-text，{{xxx}}取值有个弊端

当网速很慢或javascript出错时，会在页面显示{{xxx}}，Vue提供的v-text能够解决这个

v-html

用于输出html代码