Vue有什么特性,相对于其他框架都有那些优势!

178 阅读9分钟

(给达达前端加星标,提升前端技能)

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

表单操作的作用,用于用户的交互,通过表单来进行数据的交互。

基于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事件

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

自定义指令,为何有自定义指令,就是内置指令不满足需要。

如何自定义指令

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


如何使用


<input type="text" v-focus>

钩子函数,一个指令定义对象可以提供以下函数。

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

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

自定义指令的用法

<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代码

<span v-html="msgHtml"></span>

生命周期

阶段一:创建和挂载

  • beforecreated:el 和 data 并未初始化

  • created:完成了 data 数据的初始化,el没有

  • beforeMount:完成了 el 和 data 初始化

  • mounted :完成挂载

阶段二:更新

  • beforeUpdate:虚拟DOM中根据data变化去更新html

  • updated:将虚拟DOM更新完成的HTML更新到页面中

阶段三:销毁

  • beforeDestroy:销毁之前调用

  • destroyed:销毁之后调用,之后再执行app.message= ‘hello vue’,页面不会同步更新。

推荐阅读 点击标题可跳转

【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await

【面试需要-Vue全家桶】一文带你看透Vue前端路由

【面试需要】掌握JavaScript中的this,call,apply的原理

2019年的每一天日更只为等待她的出现,好好过余生,庆余年 | 掘金年度征文

觉得本文对你有帮助?请分享给更多人

关注「达达前端」加星标,提升前端技能

在博客平台里,未来的路还很长,也希望自己以后的文章大家能多多支持,多多批评指正,我们一起进步,一起走花路。

非常感谢读者能看到这里,如果这个文章写得还不错,觉得「达达」我有点东西的话,觉得我能够坚持的学习,觉得此人可以交朋友的话, 求点赞,求关注,求分享,对暖男我来说真的

非常有用!

感谢阅读,原创不易,喜欢就点个[在看] or [转发朋友圈],这是我写作最大的动力。

意见反馈

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

这是一个有质量,有态度的公众号

点关注,有好运

好文章,我在看❤️