vue 2.0之基础
Vue
Vue实例
- 创建实例:
var vm = new Vue({ //code })
- 数据与方法:
只有当实例被创建时 data 中存在的属性才是响应式的;
Vm.b = ‘h1’ 是不会触发视图的变化的; Object.freeze(),这会阻止修改现有的属性
- 生命周期:
created:实例被创建后执行的代码
mounted:模板编译/挂在之后
update:组件更新之后
destoryed:组件销毁之后
不要在选项属性或回调上使用箭头函数
模板语法
- 文本:{{ }}双括号文本插值,或者用v-once 一次性的插值,后面将不能改变。
- 原始Html:输出真正的 HTML,你需要使用 v-html 指令
- 特性:不能使用Mustache 语法,遇到这种情况应该使用 v-bind 指令。
- 使用javascript表达式:每个绑定只能单个表达式
- 指令:是带有V-的特殊指令
- 参数:v-bind用于相应式的更新html; v-on用于监听dom变化
- 缩写:v-bind -->: v-on -->@
计算属性和侦听器
- 计算属性和调用方法
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。调用方法每当触发重新渲染时总会再次执行函数,如果你不希望有缓存,请用方法来替代。
Class 和 Style绑定
绑定html class
- 对象语法 <div v-bind:class=”{active:isActive}”></div> 动态切换。
- 数组语法 <div v-bind:class=”[activeClass,errorClass]”></div> 传一组class过去(也可以按条件,使用三元)
绑定内联样式
- 对象语法 <div v-bind:style=”styleObject”></div> 绑定一个样式对象
- 数组语法 <div v-bind:style=”[activeClass,errorClass]”></div>
- 多重值<div :style=”{display:[‘-webkit-box’,’-ms-flexbox’,’flex’]}”></div> 渲染数组中最后一个被浏览器支持的属性
条件渲染
v-if v-else v-else-if (v-if 与 v-for 一起使用的时候 v-for优先级高)
v-show 切换display属性 不支持template 和 v-else
列表渲染
- v-for 进行遍历(item of items) 在使用的时候提供key,
在遍历一个对象的时候支持三个参数 key value 和index
- 数组的更新监测
会引起视图的变化:pop(),push(),shift(),unshift(),splice(),sort(),reverse()
非变异方法:filter(),concat(),slice()会产生一个新数组
Vue不会监测到变化的:1)使用下标直接设置某一项 2)修改数组的长度
- 对象更改注意事项
Vue不能监测对象属性的添加后者删除。
对于已经创建的实例,不能动态添加根级别的响应式属性,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
赋予多个新属性:Object.assgin(), _.extend()
事件处理
监听事件:v-on 监听dom事件 v-on:click="counter += 1"
事件处理方法: 接受一个需要调用的方法名称 v-on:click=”great”
内联处理器中的方法: 访问原始DOM,可以用特殊变量$event
修饰符:
.stop 阻止 .prevent 不重载页面 .capture 捕获模式 .once 只触发一次 .self 不是从自身出发的
可以串联使用,但是要注意顺序
按键修饰符:
Eg: v-on:keyup.13 当按键值为13的时候才可以执行,
可以使用Vue.config.keyCodes.f1自定义修饰符别名
表单输入绑定
v-module
组件
- 全局注册:vue.component(tagName, options)
使用<my-component></ my-component>
- DOM模板解析注意事项
有些标签下面只能包含特定的元素,放入组件后会导致一些问题,这个时候采取
将:<table>
<my-row>...</my-row>
</table>
变成:<table>
<tr
is="my-row"></tr>
</table>
- Prop
1)父组件通过prop想子组件下发数据,子组件中要显式的声明。
Vue.component('child', {
props: ['message'],
template: '<span>{{ message
}}</span>'
})
2)单项数据流
在子组件中改变prop的话控制台会报错。
Prop 作为初始值传入后,子组件想把它当作局部数据来用:定义一个局部变量,并用 prop 的值初始化它
Prop 作为原始数据传入,由子组件处理成其它数据输出:定义一个计算属性,处理 prop 的值并返回
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
3)自定义事件
- 使用v-on绑定自定义事件
使用 $on(eventName) 监听事件,使用 $emit(eventName,
optionalPayload) 触发事件
不能用$on监听子组件释放的事件,在模板里用v-on直接绑定
- 给组件绑定原生事件
在某组件的根元素上监听原生事件,用v-on的修饰符.native
- .sync修饰符
作为自动更新父组件属性的v-on监听器,<comp :foo="bar"
@update:foo="val => bar = val"></comp>
给对象一次设置多个属性:可以和v-bind一起使用
- 表单输入组件
v-module实现数据的双向绑定,一般会使用value prop 和input事件
- 非父子组件间的通信
使用一个空的Vue实例作为事件总线
var bus = new Vue() |
// 触发组件 A 中的事件 |
// 在组件 B 创建的钩子中监听事件 |
- 使用插槽分发内容
<slot></slot>里的任何内容都被视为备用内容,只有在宿主元素为空的时候才会显示。有name属性来配置如何分发内容。slot-scope是一个可以重用的模板。
vue 2.0之基础的更多相关文章
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- Vue 2.0基础语法:系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
- 新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- Vue.2.0.5-组件
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在 ...
- Vue 2.0初学后个人总结及分享
摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- 新手向:Vue 2.0 的建议学习顺序
新手向:Vue 2.0 的建议学习顺序 尤雨溪 1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出 ...
随机推荐
- (六)java结构控制语句
选择语句,也叫条件分支语句:if--else和switch--case:其中if--else中的else是可选的,但是switch--case中的case是必须的. switch后的条件必须是 ...
- Tomcat中的Context.xml的<Loader delegate="true"/>
Tomcat中的Context.xml的<Loader delegate="true"/> 1.<Loader delegate="true" ...
- C# Split 根据组合字符进行拆分数组用法
C# Split 根据组合字符进行拆分数组用法,如下代码: string sql = "aaaaaaaaaa{@}bbbbbbbbbb{@}ccccccc#cccccc"; //1 ...
- 基于jQuery的一个提示功能的实现
最近有点忙,没有时间更新自己的博客,只能说我在原地踏步了,不知道你们进步了没有? 今天给大家分享一个提示的实现,有点简单,适合小白同学学习.下面是效果图 提示的功能: 当鼠标进入“我的菜单”的子菜单时 ...
- Openstack_O版(otaka)部署_网络服务Neutron部署
控制节点配置 1. 建库建用户 CREATE DATABASE neutron; GRANT ALL PRIVILEGES ON neutron.* TO '; GRANT ALL PRIVILEGE ...
- angular路由操作中'#'字符的解决办法
var app=angular.module("myapp",["ngRoute"]);app.controller("ctr",funct ...
- iOS - Quartz 2D 手势截屏绘制
1.绘制手势截屏 具体实现代码见 GitHub 源码 QExtension QTouchClipView.h @interface QTouchClipView : UIView /** * 创建手势 ...
- Git Compare with base,比较大文件时,长时间等待,无法加载
问题 当使用Git比较一个大文件(几十兆数量级)版本见差异时,会一直等待加载,且内存消耗很大,导致其他进程很难执行.任务管理器中,可以看到此时的TortoiseGitMerge吃掉3G左右的内存. 原 ...
- 微信小程序滚动动画,点击事件及评分星星制作!
前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...
- 一次断电后docker问题的排解
这篇文章是一次真实的排查经历,可能对大多数人没什么作用,慎看. 断电后来电,服务器启动,手工启动各个docker,大部分正常,小部分还是出错,错误信息: <html> <head&g ...