vue.js实战书籍学习记录

时间  2019-11-09
标签 vue.js vue 实战 书籍 学习 记录 栏目 JavaScript 繁體版
原文   原文链接

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

2.1.3 插值与表达式

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

<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 就是须要过滤的数据
            }
    })

过滤器也能够串联，并且能够接收参数，例如：css

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

这里的字符argl arg2 将分别传给过滤器的第 2个和第 3个参数，由于第1 个是数据自己。html

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

2.2 指令与事件

第三章 计算属性

既然使用 methods 就能够实现，那么为何还须要计算属性呢？缘由就是
计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时，它才会从新取值，因此
text 只要不改变，计算属性也就不更新java

第四章 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。webpack

5.1.2 v-once

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

可使用 Vue提供的 key 属性，它可让你本身决定是否要复用元
素， key 的值必须是惟 一的：web

<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 属性。vue-router

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 函数

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程