Vue官网简要笔记

原创 2018年04月17日 21:11:16
####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。

Vue2官网简要笔记

####Vue实例 vue构造器: var vm = new Vue({   // 选项 }) 扩展vue构造器: var MyComponent = Vue.extend({   // 扩展选项 }...
  • xiaoya_syt
  • xiaoya_syt
  • 2017-06-30 17:14:20
  • 416

vue 简单语法

参考文档:https://vuejs.org/v2/guide/#Getting-Started 问题一、既然已经有javascript,那么是不是也像jquery一样,用一些简单的符号来表示 ja...
  • monica12
  • monica12
  • 2017-08-06 15:54:30
  • 107

Python学习简要笔记整理

#学习自廖雪峰的博客   #解决中文编码: Import sys reload(sys) sys.setdefaultencoding('utf8')     cmp(x,y), x 1 #判断类型...
  • hhuan10
  • hhuan10
  • 2016-08-08 15:12:13
  • 172

整理vue学习笔记

1.vue简介,vue是一个构建用户界面的框架。是一个轻量级mvv框架,和angular一样是所谓的双向数据绑定,数据驱动和组件化的前端开发,通过简单的api 实现响应式的数据绑定和组合试图组件,容易...
  • qq_26562641
  • qq_26562641
  • 2017-09-04 09:20:44
  • 960

jHipster 学习文档

学习文档  http://www.jhipster.tech/creating-an-app/ 有时间了 再发个原创demo  以及注意事项,学习要点。整套流程。  我在网上看了很多demo  但是...
  • beckhamyht
  • beckhamyht
  • 2017-12-24 14:59:46
  • 137

vue基础入门及示例

  • 2017年08月22日 23:18
  • 3.72MB
  • 下载

计算机组成原理简要笔记

(计算机组成原理,和数字电路相似,偏向于硬件。对于软件从业者,我认为不用达到掌握的地步,熟悉一些可加强对计算机的理解,从而更容易形成计算机的整体概念) 一、概论 1. 机器语言(实际机器)——汇编...
  • HaixWang
  • HaixWang
  • 2017-01-28 20:50:24
  • 760

Vue学习笔记

Vue2.0和1.0的一些语法差别(一)数据绑定语法 只处理单次插值,今后的数据变化就不会再引起插值更新 1.0的写法:This will never change: {{* msg }} 2.0...
  • sinat_31250617
  • sinat_31250617
  • 2016-10-02 17:20:06
  • 526

使用vue.js模仿小米官网的作品

使用vue.js模仿小米官网的作品 https://github.com/wendaosanshou/mi-by-vue 运行步骤 # 安装依赖 npm install # 在...
  • sinat_17775997
  • sinat_17775997
  • 2017-01-14 22:43:30
  • 4389

vue.js官方示例

  • 2016年05月13日 08:15
  • 106KB
  • 下载
收藏助手
不良信息举报
您举报文章:Vue官网简要笔记
举报原因:
原因补充:

(最多只允许输入30个字)