vue特点

    • mvvm框架
    • 响应式(声明式)
    • 组件化(支持自定义组件)
    • 丰富的指令(Dom功能的抽象)
    • 基于选项(template,data,computed,watch,methods)
    • vue文档集中ue
    • Vue生态丰富且简单
    • 渐进式()

Veu和Dom开发思想

    • Dom开发思想:当我们需要在交互事件中改变视图时,使用DOM选择器选中目标节点、再使用DOM方法直接改变视图。
    • Vue开发思想:当我们需要在交互事件中改变视图时,先在data选项中声明一个合适的变量,再在交互事件中改变这个声明式变量即可,视图自动更新,这是一种间接的操作。

常用的Vue指令有哪些

文本类指令:

    • {{}}文本插值:用于绑定节点的文本。{{}}这种绑定值的方式会出现一闪而过的效果,使用v-cloak来解决。
    • v-text:用于绑定节点的文本,大多数的时候,可以和{{}}替换。
    • v-once:用于指定节点的动态内容只绑定一次,当前节点中所对应的变量发生变化时视图不更新。一般情况下,v-once只能和{{}}一起用。
    • v-once和v-cloak:都是不需要接受表达式来做为‘值’。
    • v-html:用于动态绑定的html节点,相当于DOM中的innerHTML,这个指令默认已经做了“防xss攻击”的处理。

动态属性指令:

v-bind:用于动态绑定节点的属性(比如:title ,value,style等)

事件绑定指令:

v-on:用于给视图节点绑定各种js事件(比如:click,keyup等)

v-on简写@  

基本语法: <div @事件名.事件修饰符='事件处理'></div>

v-on事件修饰符:.stop阻止事件冒泡,.prevent阻止默认事件,.enter绑定键盘Enter键盘。

表单绑定指令:

v-model:用于表单取值(表单双向绑定)  比如:input,select

基本语法:<input style="text" v-model.表单修饰符='变量'>

v-model修饰符:.trim自动去除首尾空格  .number隐式类型转换  .lazy用于性能,当表单失去焦点时再进行双向绑定。

列表渲染:

v-for:用于渲染列表,对象,Number变量等。

渲染列表语法: <div v-for='(item,index) in array'></div>

渲染对象语法: <div v-for='(value,key,index) in obj'></div>

渲染Number变量语法: <div v-for='(num, index) in 5'></div>

条件渲染:

v-show:用于显示或隐藏视图节点,使用display:block / display:none 来实现的。

v-if,v-else-if,v-else:用于显示或隐藏视图节点,真正的移除或插入视图节点。

v-show和v-if的区别

v-if是节点的插入或移除,比较耗费性能;v-show只是通过样式来实现显示与隐藏,性能消耗低。

注意:不建议v-if和v-for一起使用;如果一定要一起使用,在vue2中v-for优先级更好。

其它指令

v-pre:用于调试,可以阻止vue编译器对指令的编译

v-slot:插槽

自定义指令

在vue开发中,除了可以使用这些内置指令外,我们还可以使用Vue.directive() 或directives选项来自定义指令。

声明式变量的特点

当声明式变量时,它所对应的视图节点自动更新。

vue选项


        const app = new Vue({
            el:'#app',
            data:{
            },
            methods:{
            },
            computed:{
            },
        })
 
    • el:把vue组件(响应式系统)挂载到真实DOM
    • data:专门用于定义声明式变量的
    • methods:是专门用于定义函数方法的地方
    • computed(计算属性):
    • watch:侦听器(监听器)

computed

语法:在computed选项中,定义计算属性方法,在方法体使用声明式变量进行若干计算。
使用:在视图模板中把计算属性直接当作变量直接使用,在vue逻辑代码使用this访问计算属性,默认只有get功能。
计算属性可以绑定在v-model上。
 

computed作用:

    1. 当指令的表达式比较复杂时,我们建议使用计算属性来优化,提升视图模板中代码的可阅读性、可维护性。

    2. 用于缓存一个复杂的运算,避免组件更新时产生没有必要的性能损耗。计算属性本质上是一个函数,Vue会分析函数体中使用到了哪些声明式变量,有且仅有这些声明式变量发生变化时,计算属性才会重新执行。

在Vue中,计算属性能计算哪些性质的变量

data,vuex数据,$route,计算一切__ob__的数据。

如何让计算属性同时支持get/set功能

计算属性默认是一个函数,表示get功能。为了支持set,要把计算属性写对象结构 {get, set}
const app = new Vue({
el:'#app',
computed:{
he:{
get(){

       },
set(){

       },
},
},
})

watch

作用:用于监听一个变量的变化,然后去做另一件事儿。

特点:当侦听器监听引用数据类型时,默认只能监听引用数据类型的第一层。

监听深度越深,Vue在背后要做的事儿越多,这是一种性能损耗,所以一般不要对一个引用类型的变量进行深度监听。
如何监听引用数据类型的每一层(深度监听)
const app = new Vue({    
   el:'#app',
watch:{
info:{
deep:true,
       handler(newInfo,oldInfo){
        const.log(this.info)
      }
},
    //推荐写法
     'info.child.age' (newAge, oldAge) {
            console.log('---age变了', newAge, oldAge)
          },
    },
})
在Vue中,侦听器能够监听哪些性质的变量变化
能够监听data、计算属性、vuex数据、$route等,凡是那些带有__ob__变量都能被监听到

vue2,vue指令和选项的更多相关文章

  1. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  2. [Vue]vue中各选项及钩子函数执行顺序

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...

  3. vue指令总结(二)

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  4. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

  5. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  6. [Vue] : Vue指令

    Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...

  7. Vue学习笔记【10】——Vue指令之v-if和v-show

    Vue指令之v-if和v-show <!DOCTYPE html> <html lang="en"> ​ <head> <meta cha ...

  8. Vue学习笔记【4】——Vue指令之v-on

    Vue指令之v-on v-on指令介绍 直接使用指令v-on 使用简化指令@ 绑定事件代码:@事件名="methods中的方法名称" <!DOCTYPE html> & ...

  9. 第三篇:Vue指令

    Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...

随机推荐

  1. Visual Studio 修改NuGet 包缓存路径

    Visual Studio 下载的NuGet包默认会缓存到 C:\Users{Windows用户名}.nuget\packages 下,时间一长就会导致 C盘空间严重不足. 那么怎样去设置,让包缓存文 ...

  2. 【面试普通人VS高手系列】volatile关键字有什么用?它的实现原理是什么?

    一个工作了6年的Java程序员,在阿里二面,被问到"volatile"关键字. 然后,就没有然后了- 同样,另外一个去美团面试的工作4年的小伙伴,也被"volatile关 ...

  3. Ubuntu 系统安装,VMware

    系统版本   ubuntu-18.04.5-server-amd64.iso 1.自定义安装 2.默认下一步 3. 稍后安装操作系统 4.选择ubuntu 64位 5.选额安装的目录 6.设置虚拟机c ...

  4. 如何基于 ZEGO SDK 实现 Android 通话质量监测

    功能简介 在进行视频通话过程中,用户有时候会出现网络不好的情况,比如在进行多人视频通话或者多人唱歌时,我们需要实时显示用户的网络质量. 示例源码 参考 下载示例源码 获取源码. 相关源码请查看 &qu ...

  5. django-rest-framework 基础三 认证、权限和频率

    django-rest-framework 基础三 认证.权限和频率 目录 django-rest-framework 基础三 认证.权限和频率 1. 认证 1.1 登录接口 1.2 认证 2. 权限 ...

  6. undefined与null与?. ??

    undefined: undefined是全局对象的一个属性,在一下情况下都是undefined: 当一个变量没有被赋值: 当一个函数没有返回值: 当某个对象不存在某个属性却去访问: 当函数定义了形参 ...

  7. [漏洞复现] [Vulhub靶机] Struts2-045 Remote Code Execution Vulnerablity(CVE-2017-5638)

    免责声明:本文仅供学习研究,严禁从事非法活动,任何后果由使用者本人负责. 0x00 背景知识 Apache Struts 2是美国Apache软件基金会的一个开源项目,是一套用于创建企业级Java W ...

  8. 20 HTTP 长连接与短连接

    20 HTTP 长连接与短连接 每日一句 纸上得来终觉浅,绝知此事要躬行. 每日一句 Never give up until the fight is over. 永远不要放弃,要一直战斗到最后一秒. ...

  9. Hadoop: 单词计数(Word Count)的MapReduce实现

    1.Map与Reduce过程 1.1 Map过程 首先,Hadoop会把输入数据划分成等长的输入分片(input split) 或分片发送到MapReduce.Hadoop为每个分片创建一个map任务 ...

  10. 前端3JS2

    内容概要 运算符 流程控制 三元运算符 函数 自定义对象 内置对象 JSON对象 正则对象 内容详情 运算符