vue2,vue指令和选项
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选项
- el:把vue组件(响应式系统)挂载到真实DOM
- data:专门用于定义声明式变量的
- methods:是专门用于定义函数方法的地方
- computed(计算属性):
- watch:侦听器(监听器)
computed
computed作用:
当指令的表达式比较复杂时,我们建议使用计算属性来优化,提升视图模板中代码的可阅读性、可维护性。
- 用于缓存一个复杂的运算,避免组件更新时产生没有必要的性能损耗。计算属性本质上是一个函数,Vue会分析函数体中使用到了哪些声明式变量,有且仅有这些声明式变量发生变化时,计算属性才会重新执行。
在Vue中,计算属性能计算哪些性质的变量
data,vuex数据,$route,计算一切__ob__的数据。
如何让计算属性同时支持get/set功能
const app = new Vue({
el:'#app',
computed:{
he:{
get(){
},
set(){
},
},
},
})
watch
作用:用于监听一个变量的变化,然后去做另一件事儿。
特点:当侦听器监听引用数据类型时,默认只能监听引用数据类型的第一层。
const app = new Vue({
el:'#app',
watch:{
info:{
deep:true,
handler(newInfo,oldInfo){
const.log(this.info)
}
},
//推荐写法
'info.child.age' (newAge, oldAge) {
},
})
vue2,vue指令和选项的更多相关文章
- 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- [Vue]vue中各选项及钩子函数执行顺序
在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...
- vue指令总结(二)
一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...
- vue指令概览
原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...
- 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.数据驱动.双向绑定 ...
- [Vue] : Vue指令
Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...
- Vue学习笔记【10】——Vue指令之v-if和v-show
Vue指令之v-if和v-show <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Vue学习笔记【4】——Vue指令之v-on
Vue指令之v-on v-on指令介绍 直接使用指令v-on 使用简化指令@ 绑定事件代码:@事件名="methods中的方法名称" <!DOCTYPE html> & ...
- 第三篇:Vue指令
Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...
随机推荐
- Visual Studio 修改NuGet 包缓存路径
Visual Studio 下载的NuGet包默认会缓存到 C:\Users{Windows用户名}.nuget\packages 下,时间一长就会导致 C盘空间严重不足. 那么怎样去设置,让包缓存文 ...
- 【面试普通人VS高手系列】volatile关键字有什么用?它的实现原理是什么?
一个工作了6年的Java程序员,在阿里二面,被问到"volatile"关键字. 然后,就没有然后了- 同样,另外一个去美团面试的工作4年的小伙伴,也被"volatile关 ...
- Ubuntu 系统安装,VMware
系统版本 ubuntu-18.04.5-server-amd64.iso 1.自定义安装 2.默认下一步 3. 稍后安装操作系统 4.选择ubuntu 64位 5.选额安装的目录 6.设置虚拟机c ...
- 如何基于 ZEGO SDK 实现 Android 通话质量监测
功能简介 在进行视频通话过程中,用户有时候会出现网络不好的情况,比如在进行多人视频通话或者多人唱歌时,我们需要实时显示用户的网络质量. 示例源码 参考 下载示例源码 获取源码. 相关源码请查看 &qu ...
- django-rest-framework 基础三 认证、权限和频率
django-rest-framework 基础三 认证.权限和频率 目录 django-rest-framework 基础三 认证.权限和频率 1. 认证 1.1 登录接口 1.2 认证 2. 权限 ...
- undefined与null与?. ??
undefined: undefined是全局对象的一个属性,在一下情况下都是undefined: 当一个变量没有被赋值: 当一个函数没有返回值: 当某个对象不存在某个属性却去访问: 当函数定义了形参 ...
- [漏洞复现] [Vulhub靶机] Struts2-045 Remote Code Execution Vulnerablity(CVE-2017-5638)
免责声明:本文仅供学习研究,严禁从事非法活动,任何后果由使用者本人负责. 0x00 背景知识 Apache Struts 2是美国Apache软件基金会的一个开源项目,是一套用于创建企业级Java W ...
- 20 HTTP 长连接与短连接
20 HTTP 长连接与短连接 每日一句 纸上得来终觉浅,绝知此事要躬行. 每日一句 Never give up until the fight is over. 永远不要放弃,要一直战斗到最后一秒. ...
- Hadoop: 单词计数(Word Count)的MapReduce实现
1.Map与Reduce过程 1.1 Map过程 首先,Hadoop会把输入数据划分成等长的输入分片(input split) 或分片发送到MapReduce.Hadoop为每个分片创建一个map任务 ...
- 前端3JS2
内容概要 运算符 流程控制 三元运算符 函数 自定义对象 内置对象 JSON对象 正则对象 内容详情 运算符