Vue.js 基础
1.
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue.js is a Progressive JavaScript Framework.
响应式 Reactive
组件化 Component
Vue.js = Core + Vuex + Vue-Router
2.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">翻转消息</button>
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message"/>
</div>
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script type="text/javascript">
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello, world.',
message: '页面加载于 ' + new Date().toLocaleString(),
seen: true,
todos: [
{text: '学习 JavaScript'},
{text: '学习 Vue'},
{text: '整个牛项目'}
],
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
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.
<span v-once>这个将不会改变: {{ msg }}</span>
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
<form v-on:submit.prevent="onSubmit">...</form>
<a :href="url">...</a>
<a @click="doSomething">...</a>
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
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
6.
组件基础
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
全局注册
Vue.component('my-component-name', {
// ... options ...
})
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
监听子组件事件
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
通过插槽分发内容
<slot></slot>
