生成vue的实例
var vm=new vue({
//这里是选项 他可以包含数据、模板、挂载元素、方法、生命周期钩子等函数
})
实例生命周期(在生命周期里this指向调用它的vue实例)
created在实例被创建后调用
created(){
this.hello();
}
vue2.0生命周期:
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
模板语法（不使用模板可以使用render函数使用JSX语法）
底层实现上Vue将模板编译成虚拟DOM渲染函数，在应用状态改变时，vue计算出重新渲染组件的最小代价并应用到DOM上。
先看怎么用
插值:双大括号!!!!!!必须的 数据改变 大括号内的值也跟着改变
<span>{{msg}}</span>
v-once
如果你想插入一次接下来大括号内的数据不改变 则添加v-once属性
<span v-once>不改变{{msg}}</span>
v-html
<span>{{msg}}</span>效果和<span v-html="msg"></span>相同 ,但是后者是将数据转变为纯文本 不是HTML 为了输出HTML 所以使用v-html
v-bind
大括号不能在HTML属性中使用 要使用v-bind
<span v-bind:id="msg"></span>
如果msg为false 移除属性
<span></span>
使用JS表达式
{{msg+1}}
{{msg==true?0:1}}
指令
带有v-前缀
<div v-if="msg">如果msg为true则插入div标签</div>
<div v-bind:id="msg">如果msg为false则移除属性，否则显示</div>
<div v-on:click="toDo">点击触发函数</div>
<input v-model="msg"/>//双向数据绑定
.....等等 vue还支持自定义指令。后面说。
指令缩写
v-bind:href 或者 v-bind:id 可以缩写为 :href 和:id 就是省略前面的 v-bind
v-on:click 缩写为@click=""
计算属性
computed 计算属性会根据data 的值改变
<div>{{getNewMsg}}</div>
new Vue({
el:'#App',
data:{
msg:'hello'
},
computed:{
getNewMsg:function(){
return this.msg.split('').reverse().join('');
}
}
})
上边代码计算属性只用到了get，没有set。所以我们可以给自己一个set
new Vue({
el:'#App',
data:{
msg:'hello',
text:'word'
},
computed:{
all:{
get:function(){
return this.msg+this.text;
},
set:function(val){
return val+this.msg+this.text
}
}
}
})
然后vm.all="你好" 会返回 你好 hello word
函数
methods也可以实现刚才computed的效果。
<div>{{getNewMsg}}</div>
new Vue({
el:'#App',
data:{
msg:'hello'
},
methods:{
getNewMsg:function(){
return this.msg.split('').reverse().join('');
}
}
})
computed和methods比较
虽然最终的结果相同，但是计算属性基于缓存依赖，只有在他依赖的数据发生改变才会重新计算取值，而methods 每次都会重新计算取值。
wach方法
用于观察VUE实例上的数据变动
<div>{{msg}}</div>
new Vue({
el:'#App',
data:{
msg:'hello',
text:'word',
all:''
},
watch:{
msg:function(){
this.all=this.msg+this.text;
}
}
})
class与style绑定
<div class="boxStyle" v-bind:class="{active:isActive}"></div>
如果isActive为false 则不显示 active 这个class，否则相反。
class和v-bind:class可以共同使用。
class支持三目运算符
<div v-bind:class="active?style01:style02"></div>
内联样式
<div v-bind:style="{color:red,fontSize:fontSize+'px'}"></div>
还可以绑定到一个对象上
<div v-bind:style="obj"></div>
data(){
return{
obj:{
color:'red',
fontSize:'12px'
}
}
}
条件渲染
v-if 、 v-else、v-else-if
<div v-if="msg>0">大于0</div>
<div v-else-if="msg==0">等于0</div>
<div v-else>小于0</div>
还可以使用template
<template v-if="msg>0">
<div>1111</div>
</template>
<template v-else>
<div>2222</div>
</template>
上边的代码修改msg切换不同的div内容，但是vue是不会重新渲染div标签的。根据就地复用策略，只是替换div里面的内容。如果想每次都重新渲染div标签。需要使用key，key不同则每次重新渲染。
v-if 和 v-show
v-show只是控制display。
v-if有更高的切换消耗，v-show有更高的初始化消耗。
列表渲染
v-for
data(){
return{
parents:"我是",
msg:[
{name:'foo'},
{name:'bar'},
]
}
}
<div>
<div v-for="{data,index} in msg">
{{parents}}-{{index}}-{{data.name}}
</div>
</div>
渲染结果: 我是-0-foo 我是-1-bar
事件处理器
使用template的好处
1。通过HTML模板就可以轻松定位JS对应方法
2。不需要JS手动绑定事件，易于测试
3。当viewmodel销毁 所有的事件处理器自动删除，无需手动删除
<div v-on:click="msg">点击</div>
new Vue({
el:'app',
methods:{
say:function(name,event){
alert(name+'我是vue')
if(event){event.preventDefault}
}
}
})
如果要获取原生DOM事件，需要传入event
事件修饰符
.stop 组件单击事件冒泡
.prevent 提交事件不在重载页面
.capture 使用事件捕获模式
.self 只当在本元素才发生
.once 新增
使用方式:
<div v-on:click.stop></div>
修饰符可以串联
<div v-on:click.stop.prevent="todo"></div>
表单控件
v-model 实现双向数据绑定
<span>{{msg}}</span>
<input v-model="msg"/>
new Vue({
el:'#app',
data:{
msg:'我是默认'
}
})
无论是复选框 单选框 下拉列表 基本上获取到用户选中的值的方式，就是使用v-model到一个数组
<input type="checkbox" id="jack" value="jack" v-model="checkedName"/>
<label for="jack">jack</label>
<input type="checkbox" id="mini" value="mini" v-model="checkedName"/>
<label for="mini">mini</label>
如果用户选中，则数组会把选中对象的value值存入数组中。
修饰符
.lazy 取消input事件转为change事件同步
.number 将用户输入的值转为number类型，如果返回NAN，则返回原值
.trim 取消前后空格
使用方式:
<input v-model.lazy="msg"/>
组件
注册全局组件
Vue.component('my-component',{
//选项
data:function(){
//在组件里 data 必须是函数，并且不能使用箭头函数
}
})
注册局部组件
通过使用组件实例选项注册，可以使组件在另一个组件中使用
var child={
template:'<div>我是组件</div>'
}
new Vue({
components:{
'my-components ':child
}
})
组件通信
思想：父组件通信子组件，使用props。子组件通信父组件使用自定义事件，通过$on（'事件名称'）监听事件 和 $emit('事件名称') 触发事件。
如果使用vuex，在根组件注册，我们在任意组件中都可以通过$store拿到store对象。如果子组件想要获取到父组件的数据，或者说非父子组件想要拿到彼此的数据，最高效的方式是使用vuex。
但是，还是要说下基本的props用法。
props
Vue.components('child',{
props :['msg'],
template:'<div>{{msg}}</div>'
})
<child msg="hello"></child>
注意：因为HTML不区分大小写，所以在传递props时，驼峰写法要通过短横线隔开
<div my-props="hello"></div>
Vue.components('child',{
props:['myProps'],
template:'<div>{{myProps}}</div>'
})
动态props
传递props使用 v-bind,这样父组件修改子组件也得到修改
<div>
<input v-model="msg"/>
<child v-bind:msg="msg"></child>
</div>
Vue.components('child',{
props:['msg'],
template:'<div>{{msg}}</div>'
})
字面量语法和动态语法
字面量：<child msg="1"></child> props为 "1"
动态语法: <child v-bind:msg="1"></child> props为 1
单向数据流
props是单向绑定的，父组件修改影响子组件，但是不能反过来，这是为了防止子组件修改父组件的状态，让数据流难以理解。
可以通过Vuex管理state，这样子就避免了繁琐的props传递。后面会发布VUEX讲解的文章，请关注~
props验证
只用于new创建的实例中，创建实例时传递 props。主要作用是方便测试。
支持类型：string number boolean function object array
props:{
msg:Number，//只检测类型
//检测类型+其他验证
call:{
type:Number,
default:0,
requiredLtrue,
validator:function(val){
return val>=0
}
}
}
自定义事件
使用 v-on 绑定事件
父组件在使用子组件的地方直接用v-on监听子组件触发的事件， 子组件触发事件会触发父组件事件
子组件中要使用this.$emit('事件',参数)
父组件就可以使用 $on去监听
例如 在父组件中：
<child v-on:子组件$emit的事件名称="父组件事件名称"></child>
非父子组件通信
使用一个空的vue实例作为中央事件总栈
var bus=new Vue()
在A组件中触发事件
bus.$emit('a',1);
在B组件创建的钩子中监听事件
bus.$on('a',function(id){
})
slot
在子组件中
<div>
<h1>我是子组件标题</h1>
<slot>只有在没分发的内容才显示</slot>
</div>
在父组件中
<div>
<child>
<p>这里的内容会替换掉子组件中的slot</p>
</child>
</div>
渲染结果为
<div>
<div>
<h1>我是子组件标题</h1>
<p>这里的内容会替换掉子组件中的slot</p>
</div>
</div>
具名slot
给slot添加name属性
在子组件中
<div>
<h1>我是子组件标题</h1>
<slot name="body">我是具名slot</slot>
</div>
在父组件中
<div>
<child>
<div slot="body">这里替换掉 name为body的slot</div>
</child>
</div>
Render函数
不想使用template，也可以用render写JSX。例如根据判断自动生成DOM结构，如果大量的判断用template会有大量的代码，这时候可以用render，使用createElement去创建标签。
这里只写个小用法。
new Vue({
el:"#app",
render:h=>h(App)
})
如果不使用render我们可以这样
new Vue({
el:'#app',
components:{App},
template:'<App/>'
})
总之JSX可以使用JS的完全编程能力。详细:http://cn.vuejs.org/v2/guide/render-function.html
自定义指令
有时候我们需要对DOM元素进行底层操作，所以需要自定义事件。
全局注册
例如我们创建v-focus
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
局部注册
组件接收一个选项
directives:{
focus:{
//指定的定义
}
}
使用：<div v-focus></div>
自定义指令钩子函数
刚才我们全局定义 用到了 inserted函数，这就是钩子函数。
bind:function(){} //只调用一次，指令第一次绑定到元素时调用。
inserted:function(){} //被绑定元素插入到父节点 调用
update:function(){} //更新时调用
componentUpdated:function(){} //被绑定元素所在模板完成一次更新周期时调用
unbind:function(){} //指令与元素解绑调用
钩子函数参数
el：指令绑定的元素对象
binding:一个obj对象，他包括以下属性：
name:指令名称
value:绑定的值
oldValue:前一个值 只能在update函数和componentUpdate函数中使用
expression:绑定的值是字符串形式 例如 v-demo="1" 为1
arg: 传给指令的值 v-demo:foo arg值为foo
modifiers: 修饰符对象 只能在update函数和componentUpdate函数中使用
vnode:vue编译生成的虚拟节点
oldVnode:上一个虚拟节点
混合mixin
var mixin={
created:function(){
this.hello();
},
methods:{
hello:function(){
console.log("Hello");
}
}
}
var Component=Vue.extend({
mixins:[mixin]
})
如果相同的属性，都会被调用，只是混合对象的钩子将在组件自身钩子之前调用
如果 例如 方法的名字相同，就取组件自身的方法
以上就是vue2.0常用的小点，省略了一些内容。包括像是vue-router、vuex、编写插件等等。
本篇只是总结基础知识点，希望能帮到你。
网友评论