loading...

0

vue.js实战书籍学习记录

vue 阅读书籍读完大概需要27分钟

  • 发布时间:2018-07-15 20:13 星期日
  • 刘伟波
  • 433
  • 更新于2018-11-02 17:30 星期五

关于阅读书籍部分,是个人在本书籍中收集的精华部分和实战部分,为了后续再次阅读节省时间
和方便在工作中的应用,后续会分享本书籍的电子版pdf在线下载。不过我还是建议读着去阅读原著。

--

http://images.liuweibo.cn/image/common/vue_shizhan_1536675920857_259376_1536675933660.png

第二章 数据绑定和第一个 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 函数

你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!