目錄
第一章 安裝
1.1 兼容性
1.2 Vue Devtool 安裝
1.3 直接<script>引入使用
1.4 NPM安裝方式
第二章 介紹
2.1 vue是什么瓦侮？
2.2 vue 簡單使用
第三章 生命周期
第一章 安裝
1.1 兼容性
Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性佣谐。但它支持所有兼容 ECMAScript 5 的瀏覽器肚吏。
1.2 Vue Devtool 安裝
在google store 中，查詢 vue devtools 進行安裝狭魂， 安裝成功顯示如下：
1.3 直接<script>引入使用
CND
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
你可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼罚攀。
當把基本使用掌握之后，可以根據(jù)源碼查看vue中常見標簽的使用原理雌澄。
Vue 也可以在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯后)斋泄。
1.4 NPM安裝方式
# 最新穩(wěn)定版
$ npm install vue
[1] 對于中國大陸用戶，建議將 NPM 源設(shè)置為國內(nèi)的鏡像镐牺，可以大幅提升安裝速度炫掐。or yarn.
第二章 介紹
2.1 vue是什么？
Vue (讀音 /vju?/睬涧，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架募胃。Vue 的核心庫只關(guān)注視圖層旗唁，不僅易于上手，還便于與第三方庫或既有項目整合痹束。
2.2 vue 簡單使用
常見用法：
{{ message }}
v-bind:title="message"
v-if="seen"
v-for="todo in todos"
v-on:click="reverseMessage
v-model="message"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue起步</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '聲明式渲染'
}
})
</script>
<div id="app-2">
<span v-bind:title="message">
鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息检疫！
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date().toLocaleString()
}
})
</script>
<div id="app-3">
<p v-if="seen">現(xiàn)在你看到我了, 條件語句</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學(xué)習(xí) JavaScript' },
{ text: '學(xué)習(xí) Vue' },
{ text: '整個牛項目' }
]
}
})
</script>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
<div id="app-7">
<ol>
<!--
現(xiàn)在我們?yōu)槊總€ todo-item 提供 todo 對象
todo 對象是變量，即其內(nèi)容可以是動態(tài)的祷嘶。
我們也需要為每個組件提供一個“key”屎媳，稍后再
作詳細解釋。
-->
<todo-item1
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item1>
</ol>
</div>
<script>
Vue.component('todo-item1', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '隨便其它什么人吃的東西' }
]
}
})
</script>
</body>
</html>
第三章 生命周期
學(xué)習(xí)地址：https://segmentfault.com/a/1190000008010666?utm_source=tag-newest
創(chuàng)建一個項目：
https://www.cnblogs.com/huihuijiang/p/8252851.html
npm install -g vue-cli
vue init webpack Vue-Project
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
beforeCreate: function () {
console.group('------beforeCreate創(chuàng)建前狀態(tài)------')
console.log('beforeCreate: print hello world')
},
created: function () {
console.group('------created創(chuàng)建完畢狀態(tài)------')
console.log('created: print hello world')
},
beforeMount: function () {
console.group('------beforeMount掛載前狀態(tài)------')
console.log('beforeMount: print hello world')
},
mounted: function () {
console.group('------mounted 掛載結(jié)束狀態(tài)------')
console.log('mounted: print hello world')
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》')
console.log('beforeUpdate: print hello world')
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》')
console.log('updated: print hello world')
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》')
console.log('beforeDestroy: print hello world')
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》')
console.log('destroyed: print hello world')
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
