vue2.0读书笔记1-基础

一、概述

二、模版语法

三、计算属性

四、class与style绑定

五、条件渲染

六、列表渲染 

七、事件处理器

八、表单控件绑定

九、组件

一、概述

    在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

 

二、模版语法

　2.1、插值

　　2.1.1、文本

　　　a、{{ msg }}

　　　b、v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

        　　<span v-once>This will never change: {{ msg }}</span> 

　　2.1.2、纯html

        <div v-html="rawHtml"></div>

　　2.1.3、属性

        <div v-bind:id="dynamicId"></div>

　　2.1.4、javascript表达式

        每个绑定都只能包含单个表达式，语句、流程控制都不生效。

 

　2.2、指令

　　　<p v-if="seen">Now you see me</p>

　　2.2.1、参数

        <a v-bind:href="url"></a>

　　2.2.2、修饰符 以半角句号’.’指明

        <form v-on:submit.prevent="onSubmit"></form>

 

　2.3、过滤器 

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

　　{{ message | filterA | filterB }} //过滤器可串联

　　<div v-bind:id="rawId | formatId"></div>

 

　2.4、缩写

　　a、v-bind

　　　<a v-bind:href="url"></a>

　　　<a :href="url"></a>

　　b、v-on

　　　<a v-on:click="doSomething"></a>
　　　<a @click="doSomething"></a>

 

三、计算属性

　computed:{}

　计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变时才会重新取值，可省去不必要的计算执行。

　3.1、计算setter

        computed: {

          fullName: {

            // getter

            get: function () {},

            // setter

            set: function (newValue) {}

          }

        }

 

　3.2、观察watchers

        在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

 

四、class与style绑定

　4.1、绑定html class

　　a、对象语法

            <div class=“static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

　　b、数组语法

            <div v-bind:class="[activeClass, errorClass]">

　　c、组件上使用 

            Vue.component('my-component', {

              template: '<p class="foo bar">Hi</p>'

            })

        <my-component class="baz boo"></my-component>

 

　4.2、內联样式

　　a、对象语法

            <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

                or   <div v-bind:style="styleObject"></div>

　　b、数组语法

            <divv-bind:style="[baseStyles, overridingStyles]">

               c、自动添加前缀

 

五、条件渲染

　5.1、v-if

        <h1 v-if="ok">Yes</h1>

　　a、<template> 中 v-if 条件组        

　　　<template v-if="ok">

　　　　<h1>Title</h1>

　　　</template>

　　b、v-else-if

　　　<div v-if="type === 'A'">A</div>

　　　<div v-else-if="type === 'B'">B</div>

　　　　<div v-else>Not A/B</div>

　　c、使用key控制元素的可重用

　　　添加key，会被重新渲染，特别用于input

 

　5.2、v-show(简单的切换display属性，不支持<template>语法)

 

　5.3、区别

　　v-if 是真实的条件渲染，并且是惰性的，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

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

 

六、列表渲染   

　6.1、v-for

　　<li v-for="(item, index) in items">

        {{ parentMessage }} - {{ index }} - {{ item.message }}

　　</li>

　　a、template v-for  可渲染多个

　　　<template v-for="item in items">

　　　　<li>{{ item.msg }}</li>

　　　　<li class="divider"></li>

　　　</template>

　　b、对象迭代 v-for     

　　　<div v-for="(value, key, index) in object">

　　　　{{ index }}. {{ key }} : {{ value }}

　　　</div>

　　c、整数迭代

　　　<span v-for="n in 10">{{ n }}</span>

　　d、组件与v-for

 

 

　6.2、key    

　　类似vue1.x中的track-by，默认就地复制，不适用于依赖子组件状态或临时dom状态的列表渲染。

　　<div v-for="item in items" :key="item.id"></div>

　6.3、数组更新检测

　　a、变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()，能触发视图更新。

　　b、重塑数组：filter(), concat(), slice()，返回新数组

　　tips：以下变动不会被检测：

　　　vm.items[indexOfItem] = newValue

　　　vm.items.length = newLength

        替换方法：

　　　Vue.set(example1.items, indexOfItem, newValue)

　　　example1.items.splice(newLength)

 

　6.4、显示过滤／排序结果

　　通过computed组成新数组

 

七、事件处理器

　7.1、监听事件

　　a、v-on 监听dom事件

　　　<button v-on:click="counter += 1">增加 1</button>

　　　<button v-on:click="greet">Greet</button>

　　　<button v-on:click="say('what', $event)">Say what</button>

 

　7.2、事件修饰符

　　.stop           阻止事件冒泡

　　.prevent      阻止默认事件

　　.capture     使用事件捕获模式   

　　.self            仅该元素本身触发时

　　.once          只被触发1次

 

　7.3、按键修饰符

　　.enter

　　.tab

　　.delete (捕获 “删除” 和 “退格” 键)

　　.esc

　　.space

　　.up

　　.down

　　.left

　　.right

　　可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

　　　// 可以使用 v-on:keyup.f1

　　　Vue.config.keyCodes.f1 = 112

　　.ctrl

　　.alt

　　.shift

　　.meta

 

八、表单控件绑定

　v-model：双向绑定

　8.1、基本用法

　　a、文本

　　　<inputv-model="message"placeholder="edit me”>

　　b、多行文本

　　　<textarea v-model="message" placeholder="add multiple lines"></textarea>

　　c、复选框   

　　　<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

　　　<input type="checkbox" id="john" value="John" v-model="checkedNames">

　　d、单选按钮     

　　　<input type="radio" id="one" value="One" v-model="picked">

　　　<input type="radio" id="two" value="Two" v-model=“picked">

　　e、选择列表          

　　　<select v-model="selected" multiple>

　　　　<option>A</option>

　　　</select>

 

　8.2、绑定value

　　v-model 绑定的 value 通常是静态字符串，可通过组合v-bind来实现动态数据。

　　a、复选框

　　　<input type=“checkbox" v-model=“toggle" v-bind:true-value=“a" v-bind:false-value="b">
　　b、单选按钮

　　　<input type=“radio" v-model=“pick" v-bind:value="a">

　　c、选择列表  

　　　<select v-model="selected">

　　　　<option v-bind:value="{ number: 123 }">123</option>

　　　</select>

 

　8.3、修饰符

　　a、.lazy(默认input事件同步，加了.lazy则是change事件同步)

　　　<input v-model.lazy="msg">

　　b、.number 返回数字

　　c、.trim 去除首位空白

 

九、组件

　9.1、使用组件

　　a、注册 Vue.component(tagName, options)

　　b、局部注册 new Vue({components: {'my-component': Child}})
　　c、DOM模版解析说明

　　　为了避免元素嵌套问题，使用is特性解决～

　　　另外，使用字符串模版将不受该限制

　　d、data：在组件中，data必须是函数

　　　对象字面量每次都是新建，而对象是用指针传递。

　　e、构成组件

　　　消息传递：props down（父到子）, events up（子到父）。

 

　9.2、prop

　　a、传递数据

　　　组件实例的作用域是孤立的，不能再子组件的模版内直接引用父组件的数据。

　　　子组件需要显示的声明“props”。

　　b、camelCase vs kebab-case

　　　props: ['myMessage’]

　　　<child my-message="hello!"></child>

　　c、动态prop

　　　<child v-bind:my-message="parentMsg"></child>

　　d、字面量语法 vs 动态语法

　　　<comp some-prop="1"></comp> //传递的字符串

　　　<comp v-bind:some-prop="1"></comp> ／／传递的实际数字 使用v-bind传递实际的javascript表达式

　　e、单向数据流

　　　不应该在子组件内部修改prop，只能用来初始化或者辅助计算；否则可能影响父组件的状态。

　　f、prop验证

　　　可以验证原生构造器类型

 

　9.3、自定义事件

　　a、使用v-on绑定自定义事件

　　　$on(eventName) 监听事件   //  父组件可用v-on来监听

　　　$emit(eventName) 触发事件 // 类似trigger

　　　tips：修饰符.native使得父组件监听一个原生事件。

　　　<my-component v-on:click.native="doTheThing"></my-component>

　　b、非父子组件通信

　　　bus.$emit('id-selected',1)

　　　bus.$on('id-selected', function (id) {}

 

　9.4、使用slot分发内容

　　a、编译作用域

　　　<child-component>{{ message }}</child-component> //message存在父组件作用域内，子组件无法使用

　　b、单个slot

　　　除非存在slot插槽，否则父组件内容将丢弃；当宿主内容为空时，才显示slot内容。
　　c、具名slot

　　　<h1 slot="header">这里可能是一个页面标题</h1>

　　d、作用域插槽        

　　　<slot text="hello from child"></slot>   

　　　　<child>

　　　　　<template scope="props">

　　　　　　<span>hello from parent</span>

　　　　　　<span>{{ props.text }}</span>

　　　　　</template>

　　　　</child>

 

　9.5、动态组件  

　　<component v-bind:is="currentView"></component>

　　data: {

　　　currentView: 'home'

　　},

　　components: {

　　　home: { /* ... */ },

　　}

　　a、keep-alive

　　　把切换出去的组件保留在内存中，可保留它的状态或避免重新渲染。

　　　<keep-alive><component :is="currentView"></component></keep-alive>

 

　9.6、杂项

　　a、编写可复用的组件

　　　可复用的组件，接口一定要清晰，vue组件的api分三个部分：props，events，slot

　　　Props 允许外部环境传递数据给组件

　　　Events 允许组件触发外部环境的副作用

　　　Slots 允许外部环境将额外的内容组合在组件中。

　　b、子组件索引 ref

　　　<user-profile ref="profile"></user-profile>

　　　var child = parent.$refs.profile 访问子组件

　　　tips: $refs为应急方案，应当避免在模版或计算属性中使用 $refs 。

　　c、异步组件

　　　使用resolve、reject回调

　　d、组件命名约定

　　　使用 kebab-case ，camelCase ，或 TitleCase

　　e、递归组件

　　　组件在它的模板内可以递归地调用自己，不过，只有当它有 name 选项时才可以

　　f、内联模版

　　　如果子组件有 inline-template 特性，组件将把它的内容当作它的模板，而不是把它当作分发内容。

　　g、v-once低级静态组件

　　　不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来