Vue.js 基础

1.

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue.js is a Progressive JavaScript Framework.
响应式 Reactive
组件化 Component
Vue.js = Core + Vuex + Vue-Router

2.

{{ message }}

鼠标悬停几秒钟查看此处动态绑定的提示信息！

现在你看到我了

1. 
   {{ todo.text }}
   

{{ message }}

翻转消息

{{ message }}

v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
>

3.

var data = {a: 1}
var vm = new Vue({
el: '#example',
data: data
})
vm.a == data.a // => true change
vm.b = 'hi' // unchange
Object.freeze(obj) // unchange
vm.el === document.getElementById('example') // => true
// watch('a', function (newValue, oldValue) {
// 这个回调将在 vm.a 改变后调用
})
beforeCreate: function () {}
created: function () {}
beforeMount: function () {}
mounted: function () {}
beforeUpdate: function () {}
updated: function () {}
beforeDestroy: function () {}
destroyed: function () {}

4.

这个将不会改变: {{ msg }}

Using mustaches: {{ rawHtml }}

Using v-html directive:

...
...

...

...

...

5.

计算属性和侦听器
var vm = new Vue({
el: 'example',
data: {
message: 'Hello'
},
computed: {
// getter 计算属性是基于它们的响应式依赖进行缓存的
reversedMessage: function () {
return this.message.split('').reverse().join('')
},
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
watch: {
// 如果 question 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
}
})
绑定HTML Class

6.

组件基础
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: 'You clicked me {{ count }} times.'
})

new Vue({ el: '#components-demo' })
全局注册
Vue.component('my-component-name', {
// ... options ...
})
Vue.component('blog-post', {
props: ['title'],
template: '

{{ title }}

'
})



监听子组件事件

Enlarge text

通过插槽分发内容