Vue.js 学习笔记

18.4.15 开始学习vue.js 以下是学习笔记

1.v-if与v-show的区别？

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

2.v-cloak 的作用和用法

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕      

3.v-if与v-show的区别

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

4.computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ，而 methods 内的方法则不会；

5.Vue.js 监听属性

 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化:

经实验，watch监听属性的响应优先于数据绑定。

6.除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

< div id = " vue_det " > < h1 > site : {{site}} </ h1 >

< h1 > url : {{url}} </ h1 >

< h1 > Alexa : {{alexa}} </ h1 >

</ div >

< script type = " text/javascript " > // 我们的数据对象

var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}

var vm = new Vue({ el: '#vue_det', data: data})

document.write(vm.$data === data) // true

document.write(" < br > ") // true

document.write(vm.$el === document.getElementById('vue_det')) // true

</ script >

7.过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

实例

< div id = " app " > {{ message | capitalize }} </ div >

< script >

    new Vue({

        el: '#app', data: { message: 'runoob' },

        filters: {

            capitalize: function (value) {

                if (!value) return ''

                value = value.toString()

                return value.charAt(0).toUpperCase() + value.slice(1)

            }

        }

    })

</ script >

尝试一下 »

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

8.Vue组件

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

全局组件

所有实例都能用全局组件。

全局组件实例

注册一个简单的全局组件 runoob，并使用它：

< div id = " app " > < runoob > </ runoob > </ div > < script > // 注册Vue.component('runoob', { template: ' < h1 > 自定义组件! </ h1 > '})// 创建根实例new Vue({ el: '#app'}) </ script >

尝试一下 »

（全局组件的注册必须在创建实例之前！这样才能够将实例中的拓展HTML代码转化为子组件）

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

局部组件实例

注册一个简单的局部组件 runoob，并使用它：

< div id = " app " > < runoob > </ runoob > </ div > < script > var Child = { template: ' < h1 > 自定义组件! </ h1 > '} // 创建根实例new Vue({ el: '#app', components: { // < runoob > 将只在父模板可用 'runoob': Child }}) </ script >

尝试一下 »

---

Prop