vue.js实战书籍学习记录

第二章 数据绑定和第一个 Vue 应用

2.1.3 插值与表达式

如果想显示｛｛｝｝标签，而不进行替换 使用 v-pre即可跳 过这个元素和 它的子元素的 编译过程，
例如：

 <span v-pre ＞｛｛这里的内容是不会被编译的门}}＜／ span>

2.1.4 过滤器

  <div id=” app” >
    { { date | formatDate ) )
    </div> 
    
    var app =new Vue({
        el : ’ #app ’ ,
        data: {
        date : new Date()
        filters : {
            formatDate : function (value) { ／／这里的 value 就是需要过滤的数据
            }
    })

过滤器也可以串联，而且可以接收参数，例如：

<! 一串联一〉
{ { message | filterA | filterB } }
〈！一接收参数一一〉
{{ message | flterA ('argl ’，’ arg2 ’）｝｝

这里的字符argl arg2 将分别传给过滤器的第 2个和第 3个参数，因为第1 个是数据本身。

**过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计
算属性;**

2.2 指令与事件

第三章 计算属性

既然使用 methods 就可以实现，那么为什么还需要计算属性呢？原因就是
计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时，它才会重新取值，所以
text 只要不改变，计算属性也就不更新

第四章 v-bind及 class与 style 绑定

  <div :class=”{’ active ’: isActive }”></div> 
    <div : class=” [isActive ? activeCls :'', errorCls] ” ></div> 
    <div :style ＝{’ color ’: color, ’ fontSize ’ : fontSize ＋’ px ’｝”〉文本＜／ div>

第五章 内置指令

5.1.1 v-cloak

 [v-cloak] {
        display: none; 
    }
        <div id=” app ” v-cloak>
            {{message ))
        </div> 

一般情况下，v-cloak是一 个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实
用，但是在具有工程化的项目里，比如后面进阶篇将介绍 webpack和 vue-router 时，项目的 HTML
结构只有一 个空的 div 元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要 v-cloak。

5.1.2 v-once

5.2.1 v-if v-else-if v-else

可以使用 Vue提供的 key 属性，它可以让你自己决定是否要复用元
素， key 的值必须是唯 一的：

 <div id=” app”>
      <template v-if=”type ===’ name ’”>
          <label ＞用户名 ＜／ label>
          <input placeholder＝”输入用户名” key=" name-input”>
      </template>
      <template v-else>
          <label ＞邮箱 ＜／ label>
          <input placeholder＝”输入邮箱” key＝呗ail-input ”〉
      </template>
      <button @click＝” handleToggleClick ”〉切换输入类型＜／button>
  </div>

给两个<input>元素都增加 key后 就不会复用了，切换类型时键入的内容也会被删除，不过
<label＞元素仍然是被复用的，因为没有添加 key 属性。

5.2.2 v-show

5.3.2 数组更新

Vue 包含了一 组观察数组变异的方法，使用它们改变数组也会触
发视图更新：

• push()
• pop()
• shift ()
• unshift()
• splice()
• sort()
• reverse()

需要注意的是，以下变动的数组中， Vue 是不能检测到的，也不会触发视图更新：

• 通过索引直接设置项，比如 app.books[3] = { ... }.
• 修改数组长度，比如叩p.books.length = 1.

解决第一 个问题可以用两种方法实现同样的效果，第 种是使用 Vue 内置的 set 方法：

 Vue .set(app.books, 3 , {
       name: 《css 揭秘》 ’，
       author ：’［希］ Lea Verou ’ 
   }

如果是在 webpack 中使用组件化的方式（进阶篇中将介绍〉，默认是没有导入 Vue 的，这时
可以使用$set ，例如：

this.$set(app.books, 3 , {
    name: ’《css 揭秘》’，
    author ：’［希］ Lea Verou ’ 
}）

第二个问题也可以直接用 splice 来解决：

app.books.splice(l); 

5.4 方法与事件

在methods中 定义了我们 需要的方法供＠click 调用， 需要注意 ，＠click 调用的方法名后可以不跟括号“（）” 此时，如果该方法有参数，默认会将原生事件对象 event 传入，可以尝试修改为＠click＝”handleAdd”，然后在 handleAdd 内打印出 count 参数看看。在大部分业务场景中，如果方法不需要传入参数，为了简便可以不写括号。
Vue 提供了 个特殊变量$event ，用于访问原生 DOM 事件，例如下面的实例可以阻止链接打开：

<div id=” app ” >
    <a href=”http:llwww.apple.com”@click="handleClick （＇禁止打开’，$event ）”>打开链接         </a>
</div>
<script>
    var app =new Vue({
        el :’#app ’,
        methods: {
            handleClick : function (message, event) {
                event . preventDefault() ;
                window . alert(message); 
            }
        }
    })

5.4.2 修饰符

• .stop
• .prevent
• .capture
• .self
• .once
• .enter
• .tab
• .delete(捕获‘删除’和‘退格’键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta(Mac下是Command,Window下是窗口键)

例如：

<! -- Shift + S -->
<input @keyup.shift . 83=”handleSave ”>
<!-- Ctrl + Click -->
<div @click.ctrl=”doSomething”>Do something</div>

第六章 表单与 v-model

6.3 修饰符

• v-model.lazy
• v-model.number
• .trim

第七章 组件详解

7.1.2 组件用法

组件与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后，
任何 Vue 实例都可以使用。全局注册示例代码如下

Vue.component (’ my- component ’, {
／／选项
}) 

Vue组件的模板在某些情况下会受到 HTML 的限制，比如＜table＞内规定只允许是〈tr〉<td>、＜
th＞等这些表格元素，所以在＜tabl ＞内直接使用组件是无效的 这种情况下，可以使用特殊的**is
属性**来挂载组件 示例代码如下

<div id=” app” >
    <table>
        <tbody is=”my-component” ></tbody>
    </ table>
</div> 

<script>
Vue.component ( ’ my-component ’, {
    template ：’ div ＞这里是组件的内容＜／ div>
}) ;
var app =new Vue({
    el : ’ #app ’
})
<script />

tbody 在渲染时 会被替换为组件的内容。常见的限制元素还有＜ul＞、＜ol＞、＜select>

JavaScript 对象是引用关系，所以如果 return出的对象引用了外部对象， 那这个对象就
是共享的，任何 方修改都会同步。比如下面的示例：

<div id=” app” >
    <my- component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script>
    var data = {
        counter : 0
    }
    Vue.component (’ my- component ’, {
        template :’<button @click=” counter++” >{{ counter ) )</button>’,
    data:function () {    
         return data ;
        }
    })
    var app =new Vue ( {
        el :’#app ’
    })
</script> 

组件使用了3次 但是点击任意一 <button>。3 个数字都会加1 ，那是 因为组件 data
用的是外部 的对象，这肯定不是我们期望的效果，所以 给组件返回一个新的 data对 象来独立
例代码如下

<div id=” app” >
    <my- component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script>
   
    Vue.component (’ my- component ’, {
        template :’<button @click=” counter++” >{{ counter ) )</button>’,
    data:function () {    
         return {
             counter:0
         }
        }
    })
    var app =new Vue ( {
        el :’#app ’
    })
</script> 

这样，点击3 个按钮就互不影响了，完全达到复用的目的。

7.2 使用 props 传递数据

**注意，如果你要直接传递数字、布尔值、数组、对象，而且不使用 v-bind ，传递的仅
仅是字符串，尝试下面的示例来对比：**

<div id=” app ” >
    <my-component message=” [ 1 , 2, 3 ] ” ></my-component>
    <my-component :message=” [ 1 , 2, 3 ] ” ></my-component>
</div>
<script>
Vue.component (’ my-component ’, {
    props: [ ’ message ’ ],
    template :’<div>{{ message.length }}</div>’
} )
var app =new Vue ( {
    el : ’ #app ’
})
</script> 

同一个组件使用了两次，区别仅仅是第二个使用的是 v-bind ，渲染后的结果，第一个是7
，第二个才是数组的长度 3,

7.2.2 单向数据流

7.2.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 检测。
当prop 验证失败时，在开发版本下会在控制台抛出一 条警告。

7.3 组件通信

7.3.1 自定义事件

子组件用 $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 只是在组件 渲染完成后才填充，并且它是非响应式的 它仅仅作为一个直接访问子
苦？ 组件的应急方案，应当避免在模板或计算属性中使用$refs

7.4 使用 slot 分发内容

7.4.3 slot 用法

• 单个slot
• 具名 Slot

7.4.4 作用域插槽

7.5 组件高级用法

7.6.1 $nextTick

<div id=” app” >
    <div id div v-if＝气howDiv 〉这是一段文本＜／ div>
    <button @click= getText 〉获取 div 内容＜／button>
</div>
<script>
var app =new Vue({
    el :’#app ’,
    data: {
        showDiv: false
        },
    methods : {
        getText: function () {
            this.showDiv = true;
            var text = document .getElementByid (’ div ’) .innerHTML;
            console . log(text) ; 
        }
    }
})
</script>

这段代码并不难理解，但是运行后在控制台会抛出一个错误： Cannot read prope町’innerHU.伍’
of null ，意思就是获取不到 div 元素。这里就涉及 Vue 一个重要的概念：异步更新队列。

Vue 会根据当前浏览器环境优先使用原生的 Promise.then MutationObserver ，如果都不支持，
就会采用 setTimeout代替。

<div id=” app” >
    <div id div v-if＝气howDiv 〉这是一段文本＜／ div>
    <button @click= getText 〉获取 div 内容＜／button>
</div>
<script>
var app =new Vue({
    el :’#app ’,
    data: {
        showDiv: false
        },
    methods : {
        getText: function () {
            this.showDiv = true ;
            this.$nextTick (function () {
                var text = document . getElementByid ( ’ div ’) . innerHTML;
                console.log(text) ; 
        }
    }
})
</script>

这时再点击按钮，控制台就打印出 div 的内容“这是一段文本”了。

我们应该不用去主动操作 DOM，因为 Vue 的核心思想就是数据驱动 DOM，但在很
多业务里，我们避免不了会使用 些第三方库，比如 popper.js、 swiper等 ，这些基于原生 JavaScript 库都有创建和更新及销毁的完整生命周期，与 Vue 合使用时，就要利用好$nextTick

7.6.3 手动挂载实例

我们现在所创建的实例都是通过 new Vue（）的形式创建出来的 。在一些非常特殊的情况下，我
们需要动态地去创建 Vue 实例， Vue 提供了 Vue.extend和 $mount 两个方法来手动挂载一个实例。
Vue.extend是 基础 Vue 构造器，创建一个“子类”，参数是一 个包含组件选项的对象。
如果 Vue 实例在实例化时没有收到 el 选项，它就处于“未挂载”状态，没有关联的 DOM元
素。可以使用$mount（）手动地挂载一 个未挂载的实例。这个方法返回实例自身，因而可以链式调用
其他实例方法。示例代码如下：

<div id＝” unt-div ”〉
</div>
<script>
var MyComponent =Vue.extend ((
    template :’<div>Hello: {{ ne } }</div>’,
    data: function () {
        return (
            name :’Aresn ’
., } )
new MyComponent ().$mount (’#mount-div ’); 

另外一种挂载方式

new MyComponent ({
el :’#mount-div ’
}); 

／／或者，在文档之外渲染并且随后挂载

var component= new MyComponent() . $mount ();
document.getElementByid （'mount-d ’） .appendChild(component.$el);

手动挂载实例（组件）是一 种比较极端的高级用法，在业务中几乎用不到，只在开发一 些复
杂的独立组件时可能会使用，所以只做了解就好。

第八章 自定义指令

8.1 基本用法

／／全局注册
Vue.directive(’focus ’,{
／／指令选项
., } )
／／局部注册
var app =new Vue({
    el :’#app ’,
    directive: {
        focus: {
        ／／指令选项
}) 

自定义指令的选项是由几个钩子函数组成的，每个都是可选的。

• bind 只调用一次，指令第一次绑定到元素 时调用，用这个钩子函数可以定义一个在绑定

时执行一次的初始化动作．

• inserted 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
• update 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后

的绑定值，可以忽略不必要的模板更新。

• componentUpdated 被绑定元素所在模板完成一次更新周期时调用．
• unbind 只调用一次，指令与元素解绑时调用

第九章 Render 函数