Vue官网简要笔记

版权声明:关于安安 https://blog.csdn.net/yangluan999/article/details/79980902
####Vue实例
vue构造器:
var vm = new Vue({
  // 选项
})
扩展vue构造器:
var MyComponent = Vue.extend({
  // 扩展选项
})
属性和方法:
var vm = new Vue({
  el: "#example",
  data: data,
  computed: {},
  watch: {},
  methods: {}
})
生命周期:
beforeCreate, created, beforeMount, mouted, beforeUpdate, updated, beforeDestory, destoryed
####模板语法:
文本:<span>Message: {{msg}}</span>
纯HTML:<div v-html="rawHtml"></div>
属性:<div v-bind:id="dynamicId"></div>
使用js表达式:{{ number + 1 }}
指令(Directives)是带有v-前缀的特殊属性
<p v-if="seen">Now you see me</p>
参数:(一个指令能接受一个参数,在指令后以冒号指明)
<a v-bind:href="url"></a>
<a v-on:click="doSomethind"></a>
修饰符(Modifiers)是以半角句号.指明的特殊后缀
<form v-on:submit.prevent="onSubmit"></form>
过滤器:
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>
缩写:
<a v-bind:href="url"></a>  缩写为 <a :href="url"></a>
<a v-on:click="doSomething"></a> 缩写为 <a @click="doSomethind"></a>
####计算属性:
计算缓存VS Methods:计算属性是基于他们的依赖进行缓存的,只要在他的相关依赖发生改变时才会重新求值。
computed属性VS Watched属性:尽量使用computed。
计算setter: 计算属性默认只有getter, 不过在需要时你可以提供一个setter。
观察Watchers:响应变化的数据,执行异步操作或者开销较大的操作。
####Class与Style绑定:
绑定HTML Class(对象语法):
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
绑定HTML Class(数组语法):
<div :class="[activeClass, errorClass]"></div>
绑定内联样式(对象语法):
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="styleObject"></div>
绑定内联样式(数组语法):
<div :style="[baseStyles, overridingStyles]"></div>
####条件渲染
v-if, v-else, v-else-if, v-show
用key 管理可复用的元素
####列表渲染
v-for: 数组迭代,对象迭代,整数迭代
key: v-for 正在更新已渲染的元素列表时,它默认“就地复用”策略。
<div v-for="item in items" :key="item.id"></div>
数组更新检测:
变异方法:push(), pop(), shift(), unshift(),splice(),sort(),reverse()
重塑数组:filter(), concat(), slice()
####事件处理器
监听事件:v-on
方法事件处理器:methods
内联处理器方法:<button @click="say('hi', $event)">Say hi</button>
事件修饰符:.stop, .pervent, .capture, .self, .once
按键修饰符:.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shift, .meta
####表单控件绑定
基本用法:
文本:<input v-model="message" >
多行文本:<textarea v-model="message"></textarea>
复选框:<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>
单选按钮:<input type="radio" id="radio" v-model="radiobox"><label for="radio">Radio</label>
选择列表:<select v-model="selected">...</select>
绑定value
单选按钮:<input type="radio" v-model="picked" value="a">
复选框:<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
列表设置:<select v-model="selected"><option :value="{ number: 123 }">123</option></select>
修饰符
.lazy, .number, .trim
组件:
注册:new Vue({el: "element"})
全局注册:Vue.component('my-component',{})
局部注册:new Vue({ ...,components: { 'my-component': ChildComponent }})
DOM模板解析说明:元素ul, ol, table, select 限制了被包裹的元素
data 必须是函数
构成组件:props down, events up.
Prop
使用prop传递数据:props: ['message']
camelCase VS kebab-case:当使用的不是字符串模板,驼峰式命名的prop需要转换为相对应的短横线隔开式命名。
props: ['myMessage']
<child my-message="hello"></child>
动态prop: <child :my-message="parentMsg"></child>
单向数据流:prop是单项绑定的。
Prop验证:可以为组件的props指定验证规格。
自定义事件:
使用v-on绑定自定义事件
    使用 $on(eventName) 监听事件
    使用 $emit(evnetName) 触发事件
使用自定义事件的表单输入组件:
<input v-model="something">(语法糖)
<input v-bind:value="something" v-on:input="something = $event.target.value">
非父子组件通信:简单的场景下,使用一个空的Vue实例作为中央事件总线。
使用Slot分发内容
编译作用域:父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。
单个Slot:
除非子组件模板至少包含一个<slot>,否则父组件的内容将会被丢弃。
<slot>标签内的任何内容都是备用内容。备用内容在子组件的作用域内被编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
具名Slot:
<slot>可以用一个特殊属性name来配置如何分发内容。
作用域插槽:(没看懂)
动态组件:
使用保留的<component>元素,动态的绑定到他的is特性,让多个组件使用同一挂载点,并动态切换。
keep-alive参数:把切换出去的组件保存再内存中,避免重新渲染。
杂项:
编写可复用组件:
Vue组件的api来自三部分,Props, Events, Slots.
Props允许外部环境传递数据给组件。
Events允许组件触发外部环境的副作用。
Slots允许外部环境将额外的内容组合到组件中。
子组件索引:使用ref为子组件指定一个索引ID。
异步组件:Vue允许将组件定义为一个工厂函数,动态的解析组件的定义,在组件需要渲染时触发工厂函数。
组件命名规约:在注册组件时,可以使用 kebab-case ,camelCase ,或 TitleCase 。
在HTML模板中,使用kebab-case。
在字符串模板中,三种都可以。
如果组件未经slot传递内容,可以在组件名后使用/自闭合。<my-component/>
递归组件:
组件在有name属性时,可以在自己的模板内递归的调用自己。
组件间的循环引用:??
内联模板:如果组件有inline-template特性,组件将把他的内容作为他的模板,而不是作为分发内容。
X-Templates:另一种定义模板的方式是在js标签内使用text/x-template类型,并指定一个ID。
对低开销的静态组件使用v-once:当组价中很有大量的静态内容,可以使用v-once将渲染结果缓存起来。


############进阶################
####深入响应式原理
变化检测问题:vue在初始化实例时对属性执行getter/setter转化过程,所以属性必须在data对象上存在才能转化他,这样才能让他是响应式的。
可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上,vm.$set方法是全局方法Vue.set的别名。
声明响应式属性:vue不允许动态添加根级响应属性,所以必须在初始化实例前声明根级响应式属性。
异步更新队列:??
####过渡效果:
单元素/组件的过渡:Vue提供了transition的封装组件。
过渡的CSS类名:v-enter, v-enter-active, v-leave, v-leave-active。
CSS过渡:
CSS动画:
自定义过渡类名:<transition name="..." enter-active-class="..." leave-active-class="..."></transition>
同时使用Transitions和Animations:
JavaScript钩子:
初始渲染的过渡:<transition appear></transition>
多个元素的过渡:当有相同标签名的元素进行切换时,最好设置key属性加以区分。
过渡模式:<transition name="fade" mode="out-in"></transition>
多个组件的过渡:不需要key特性,只需要使用动态组件(:is)。
列表过渡:<transition-group></transition-group>
可复用的过渡:将<transition>或者<transition-group>作为根组件,将任何子组件放置其中就可以了。
动态过渡:最基本的是通过name属性来绑定动态值。<transition :name="transitionName"></transition>
###过渡状态
####render函数
####自定义指令
####混合
####插件:
插件通常会为Vue添加全局功能
开发插件:
1、添加全局方法或者属性
2、添加全局资源:指令、过滤器、过渡
3、通过全局mixin方法添加一些组件选项,如vuex。
4、添加Vue实例方法,通过把他们添加到Vue.prototype上实现。
5、一个库,提供自己的api,同时提供上面提到的一个或多个功能,如vue-router。
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页