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

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

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

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

<html lang="en"><head> <meta charset="UTF-8"> <title>Documenttitle> <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事件

"phone" type="number">

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

如何自定义指令

Vue.directive('focus' { inserted: function(el){ // 获取元素的焦点 el.focus(); }})如何使用"text" v-focus>

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

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

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

自定义指令的用法

type=// 自定义指令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('') }}

{{msgDa}}

// 直接调用函数名

计算属性和方法的区别

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

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

{{msgDa}}

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

方法

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

{{msgDa()}}

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

使用方法

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

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

表单域的修饰符

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

Vue中的数据渲染

{{}}

"app">{{ message }}

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是用于操作纯文本，它会替代显示对应的数据对象上的值。

"app">{{ message }}

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

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

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

自定义过滤器

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

{{msg | upper}}

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

局部过滤器

filters: { capitalize；function() {}}

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

{{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: '

这里是全局注册

' }) new Vue({ el: '#app', components: { 'GdDa': { template: '

这里是局部注册

' } } })script>

template

类型：string

说明：

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

CDN引入

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

NPM安装

npm install vue

完整代码如下：

html><html lang="en"><head>    <meta charset="UTF-8">    <title>Vue入门之Helloworldtitle>        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>head><body>        <div id="app">                {{message}}    div>        <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`

if="isLogin">你好</div>

请登录后操作div><div v-show="isLogin">你好div>

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

v-if与v-show的区别

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

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

`v-for`

<div id="app">    <ul>        <li v-for="item in items">            {{item}}        li>    ul>div><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><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 [转发朋友圈]，这是我写作最大的动力。

意见反馈

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

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

点关注，有好运

好文章，我在看❤️

input取消焦点 vue_Vue有什么特性，相对于其他框架都有那些优势！相关推荐

input取消焦点 vue_vue如何能做到点击其他地方input不失去焦点
我想写一个省市的选择框做成类似iview中picker那种,但是在写的时候发现,使用focus事件控制列表显示/隐藏切换不好用,查了半天没找到好的解决办法下面是我的代码: {{item.provin ...
input取消焦点 vue_Vue中自动获取input焦点
1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作 2.Vue官网给出的解决办法 // 注册一个全局自定义指令 `v-focus` Vue.dir ...
input取消焦点 vue_vue中，页面上的input框自动获取焦点及二次获取焦点问题
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 v-mode ...
input失去焦点和获得焦点jquery焦点事件
input失去焦点和获得焦点jquery焦点事件插件, 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一 ...
解决安卓手机H5页面input获得焦点时页面挤压或者底部上移
在安卓手机上,如果底部有一个定位的元素比如一个input 或者一个 footer 在正常情况下是没有问题的, 但是一旦input获得焦点,那么定位元素会被软键盘向上推,ios手机没有问题此时解决办 ...
html5 自动失去焦点,js input失去焦点事件
JS中,何为鼠标失去焦点事件??是onmouseout事件. 用法举例: 鼠标离开文本框的时候触发JS的chk()方法. js 怎样判断ipunt失去焦点 js input失去焦点事件 onfocus ...
html获得焦点显示边框,input获得焦点时，如何让外边框不变蓝
input获得焦点时,如何让外边框不变蓝 border 可应用于几乎所有有形的html元素,而outline 是针对链接.表单控件和ImageMap等元素设计. outline的效果将随元素的 foc ...
苹果手机vue网页弹窗中input失去焦点的时候造成页面上移
问题:苹果手机vue网页弹窗中input失去焦点的时候造成页面上移解决: <input type="text" class="userNameInput" ...
input得到焦点显示文本框,失去焦点隐藏文本框
上一篇 : input 输入的内容时更改input的宽度此篇是上一篇的延伸功能 input得到焦点显示文本框,失去焦点隐藏文本框思路 : 1 创建一个文本标签font和输入标签input,页面加载 ...

input取消焦点 vue_Vue有什么特性，相对于其他框架都有那些优势！

`内部指令`

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

`v-for`

`生命周期`

input取消焦点 vue_Vue有什么特性，相对于其他框架都有那些优势！相关推荐

最新文章

热门文章