摘要:注册有全局注册和局部注册两种方式。比如下面的示例组件使用了次但是点击任意一。当验证失败时,在开发版本下会在控制台抛出一条警告。是基础构造器,创建一个子类,参数是一个包含组件选项的对象。可以使用手动地挂载一个未挂载的实例。
第二章 数据绑定和第一个 Vue 应用 2.1.3 插值与表达式
如果想显示{{}}标签,而不进行替换 使用 v-pre即可跳 过这个元素和 它的子元素的 编译过程,
例如:
2.1.4 过滤器
{ { date | formatDate ) )var app =new Vue({ el : ’ #app ’ , data: { date : new Date() filters : { formatDate : function (value) { //这里的 value 就是需要过滤的数据 } })
过滤器也可以串联,而且可以接收参数,例如:
这里的字符argl arg2 将分别传给过滤器的第 2个和第 3个参数,因为第1 个是数据本身。
**过滤器应当用于处理简单的文本转换,如果要实现更为复杂的数据变换,应该使用计
2.2 指令与事件 第三章 计算属性
算属性;**既然使用 methods 就可以实现,那么为什么还需要计算属性呢?原因就是
第四章 v-bind及 class与 style 绑定
计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时,它才会重新取值,所以
text 只要不改变,计算属性也就不更新第五章 内置指令 5.1.1 v-cloak[v-cloak] { display: none; }{{message ))一般情况下,v-cloak是一 个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实
5.1.2 v-once 5.2.1 v-if v-else-if v-else
用,但是在具有工程化的项目里,比如后面进阶篇将介绍 webpack和 vue-router 时,项目的 HTML
结构只有一 个空的 div 元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要 v-cloak。可以使用 Vue提供的 key 属性,它可以让你自己决定是否要复用元
素, key 的值必须是唯 一的:组件使用了3次 但是点击任意一
这样,点击3 个按钮就互不影响了,完全达到复用的目的。
7.2 使用 props 传递数据**注意,如果你要直接传递数字、布尔值、数组、对象,而且不使用 v-bind ,传递的仅
仅是字符串,尝试下面的示例来对比:**同一个组件使用了两次,区别仅仅是第二个使用的是 v-bind ,渲染后的结果,第一个是7
7.2.2 单向数据流 7.2.3 数据验证
,第二个才是数组的长度 3,Vue.component my-component ’, props : { //必须是数字类型 propA : Number, //必须是字符串或数字类型 propB : [String, Number] , //布尔值,如果没有定义,默认值就是 true propC: { type : Boolean , default : true //数字,而且是必传 } propD: { type: Number , required : true //如果是数组或对象,默认值必须是一个函数来返回 } propE: { type : Array , default : function () { return [] ; //自定义 个验证函数 } } propF: { validator : function (value) { return value > 10; } } } )};type 类型可以是:
String
Number
Booleab
Object
Array
Function
type也可以是一 个自定义构造器,使用 instanceof 检测。
7.3 组件通信 7.3.1 自定义事件
当prop 验证失败时,在开发版本下会在控制台抛出一 条警告。子组件用 $emit()来触发事件,父组件用$on()来
7.3.3 非父子组件通信
监昕子组件的事件推荐使用一个空的 Vue 实例作为中央事件总线( bus ),也就是一个中介
var bus= new Vue (); methods : { handleEvent: function () { bus.$emit(’on-message"," 来自组件 mponent-a 的内容") } } //在实例初始化时,监听来自 bus 实例的事件 bus.$on (’on-message ’, function (msg) { ...})$refs$refs 只是在组件 渲染完成后才填充,并且它是非响应式的 它仅仅作为一个直接访问子
7.4 使用 slot 分发内容 7.4.3 slot 用法
苦? 组件的应急方案,应当避免在模板或计算属性中使用$refs单个slot
具名 Slot
7.4.4 作用域插槽 7.5 组件高级用法 7.6.1 $nextTick这段代码并不难理解,但是运行后在控制台会抛出一个错误: Cannot read prope町’innerHU.伍’
of null ,意思就是获取不到 div 元素。这里就涉及 Vue 一个重要的概念:异步更新队列。Vue 会根据当前浏览器环境优先使用原生的 Promise.then MutationObserver ,如果都不支持,
就会采用 setTimeout代替。这时再点击按钮,控制台就打印出 div 的内容“这是一段文本”了。
我们应该不用去主动操作 DOM,因为 Vue 的核心思想就是数据驱动 DOM,但在很
7.6.3 手动挂载实例
多业务里,我们避免不了会使用 些第三方库,比如 popper.js、 swiper等 ,这些基于原生 JavaScript 库都有创建和更新及销毁的完整生命周期,与 Vue 合使用时,就要利用好$nextTick我们现在所创建的实例都是通过 new Vue()的形式创建出来的 。在一些非常特殊的情况下,我
们需要动态地去创建 Vue 实例, Vue 提供了 Vue.extend和 $mount 两个方法来手动挂载一个实例。
Vue.extend是 基础 Vue 构造器,创建一个“子类”,参数是一 个包含组件选项的对象。
如果 Vue 实例在实例化时没有收到 el 选项,它就处于“未挂载”状态,没有关联的 DOM元
素。可以使用$mount()手动地挂载一 个未挂载的实例。这个方法返回实例自身,因而可以链式调用
其他实例方法。示例代码如下: