前言 |
什么是vue |
vue和angular的区别 |
1.1:angular
1、上手较难
2、指令以ng-xxx开头
3、由Google维护
1.2:vue
1、简单易学更轻量
2、指令以v-xxx开头
3、HTML代码+json数据,在创建一个vue的实例
共同点:“都不兼容低版本ie”,但是目前框架已经提供了兼容IE的方法
对比:GitHub上vue的stars数量大约是angular的两倍
vue构造器 |
每一个Vue.js的应用都是通过够构造函数Vue创建的一个Vue的根实例。例如:
var vm = new Vue({
// 选项
})
上述代码中在实例化vue的时候需要传入一个对象,它可以包涵数据、模板、挂载元素、方法、生命周期钩子等。
然为了创建可复用的组件构造器,我们可以通过扩展vue构造器的方法实现来实现预定义选项,通过扩展的预定义选项来创建更多可复用的组件。例如:
var MyComponent = Vue.extend({
// 所扩展的预定义选项
})
var myComponentTnstance = new MyComponent()
vue的计算属性computed |
往往在模板中绑定表达式是非常方便的,但是这一方法值适合简单的操作,在模板中放入太多的逻辑会让模板过重并且难以维护,所以任何复杂的逻辑计算我们都需要用计算属性。
<div id="test">
<p>{{message}}</p>
<p>{{myMessage}}</p>
</div>
var vm = new Vue({
el: '#test', // 将实例挂载到id位test的元素上去
data: function () {
return {
message: 'hello'
}
},
computed: {
myMessage: function () {
return this.message.split('').revers().join('')
}
}
})
在上述实例中myMessage的值是依赖于message的,所以message的值发生改变时候,myMessage的值相应的也会发生改变。
计算属性默认的只有getter,不过我们也可以通过需要提供一个setter:
computed: {
fullName: {
get: function () {
}
set: function () {
}
}
}
在vue中给我提供了一个$watch,用于观察vue实例上数据的变动,每当数据变动时会调用。通常如果是为了计算属性的话那么更好的办法还是使用computed。
vue的组件 |
组件是vue一个强大的功能,组件是可以扩展html元素,封装可以重用的代码。
全局注册组件:
div id="id">
<my-component></my-component>
</div>
Vue.component('my-component', {
template: '<p>我是一个组件</p>'
})
new Vue({
el: '#id'
})
局部注册组件:
var child = {
template: '<p>我是一个组件</p>'
}
new Vue({
...
component: {
'my-component': child
}
})
在使用组件的时候代理数据data必须是一个函数,函数返回的是代理的数据。
组件之间的通信 |
父组件可以通过Prop来给子组件传递数据,prop是父组件用来传递数据的一个自定义属性。子组件需要显示的用props选项声明prop:
Vue.component('child', {
// 子组件显示的声明props
props: ['message'],
// prop就像data一样可以再模板中使用也可以通过this来调用
template: '<span> {{ message }} </spam>'
})
我们可以通过v-bind动态的绑定props的值到父组件的数据中,每次当绑定的数据在父组件中发生改变的时候,该组件也会相应的传递给子组件。
<child v-bind:child-message='message'></child>
如果要给prop传递一个字面的时候必须要使用v-bind这样传递下去的才是正真的字面量,否则都会当做字符串。
<child v-bind:number="1"></child>
prop是单向绑定的:当父组件的属性变化时,将传递给子组件,但是在子组件中改变数据的时候并不会传递给父组件,为了防止子组件无意间修改父组件的状态,所以不应该在子组件 中改变prop的数据。
总结 |
学习再多的理论,最后都是要通过实践来证明,以前总是以为,看完一遍学习的视频,跟着敲一遍例子,就能会了,其实这才刚刚起步,看完视频,只能会一些皮毛,真正的东西,还得在项目中慢慢磨。