vue.js入門基礎
第1章 vuejs及相關工具介紹
1-1 vuejs課程簡介及框架簡介
課程簡介
- 初步瞭解vuejs框架
- 介紹Vuejs開發環境的搭建和腳手架工具的使用
- vuejs具體的指令和項目實踐
準備知識
- 前端開發基礎 html、css、js
- 前端模塊化基礎
- 對ES6有初步瞭解
10秒鐘看懂Vue.js
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js'
}
})Vue.js的一個組件
*.vue = (HTML) +
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todoList</title>
<style>
#app{
margin: 0 auto;
width: 400px;
}
#add-input{
width: 350px;
height: 30px;
}
li{
list-style: none
}
p{
display: inline
}
.finished{
text-decoration:line-through;
}
.item-status{
background-color: red;
color: #fff;
font-size: 12px;
padding: 0 5px;
}
.item-delete{
text-decoration:underline;
color: gray;
font-size: 12px;
cursor: pointer;
}
</style>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<input id="add-input" v-model="newItem" @keyup.enter="addNew">
<ul>
<li v-for="(item,index) in items">
<h3 @mouseenter="itemEnter(item)" @mouseleave="itemLeave(item)">
<input type="checkbox" @click="toggleFinish(item)" v-model="item.isFinished">
<p class="item-label" :class="{finished:item.isFinished}">{{ index + 1 }}.{{item.label}}</p>
<p class="item-status" v-if="item.isFinished">finished</p>
<p class="item-delete" v-if="item.showDelete" @click="deleteItem(item)">Delete</p>
</h3>
</li>
</ul>
</div>
<script>
var STORAGE_KEY = "todos_vuejs"; //放在最前面，因爲要拿到賦值"todos_vuejs"
new Vue({
el: '#app',
data:{
title:"This is a todoList",
items: fetch(),
newItem:''
},
watch:{
items:{
handler:function(items){
save(items);
},
deep: true
}
},
methods:{
toggleFinish:function (item) {
item.isFinished = !item.isFinished;
item.showDelete = true;
},
addNew:function(){
this.items.push({
label:this.newItem,
isFinished: false,
showDelete: false
})
this.newItem='';
},
itemEnter: function (item) {
item.showDelete = true
},
itemLeave:function(item){
item.showDelete = false
},
deleteItem:function(item){
var index = this.items.indexOf(item);
this.items.splice(index, 1)
}
}
})
function fetch() {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');
};
function save(items) {
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
}
</script>
</body>
</html>1-2 vuejs開發環境搭建及熱更新
NPM
在用Vue.js構建大型應用時推薦使用NPM安裝，NPM能很好地和諸如Webpack或
Browerify的CommonJS模塊打包器配合使用。Vue.js也提供配套工具來開發單文件組件。
# 最新穩定版本
$ npm install vue
# 最新穩定 CSP 兼容版本
$ npm install vue@csp命令行工具
Vue.js提供一個官方命令行工具，可用於快速搭建大型單元應用。該工具提供開箱即用的
構建工具配置，帶來了現代化的前端開發流程。只需要一分鐘即可啓動帶熱重載、保存時
靜態檢查以及可用於生產環境的構建配置的項目。
# 全局安裝 vue-cli
$ npm install -g vue-cli
# 創建一個基於“webpack”模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev1-3 從.vue到頁面
從*.vue到頁面
.vue –> webpack –> .html + .js + .css
一個最簡單的實例
<div id="app">
{{message}}
</div>new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
}
})1-4 vue.js組件的重要選項
- new一個vue對象的時候你可以設置它的屬性，其中重要的包括三個，分別是data，methods，watch。
- 其中data代表vue對象的數據，methods代表vue對象的方法，watch設置了對象的監聽方法。
- Vue對象裏的設置通過html指令進行關聯。
- 重要的指令包括
- v-text渲染數據
- v-if控制顯示
- v-on綁定事件
- v-for循環渲染
- 等
1-5 vuejs-學習基礎框架代碼
第2章 todolist項目學習
2-1 使用vuejs做一個todolist1
2-2 使用vuejs做一個todolist2
2-3 使用localstorage來存儲todolist
2-4 如何劃分組件
如何劃分組件
- 功能模塊 - select，pagenation…
- 頁面區域 - header，footer，sidebar…
Vuejs組件之間的調用 - 另外一個重要選項 - components
import Header from './header'
import Footer from './footer'
new Vue({
data: {
isShow: true
},
components: {
Header, Footer
}
})Vuejs組件之間的通信 - props
<!-- this is app.vue -->
<header msg='something interesting'></header>
<footer></footer>// this is header.vue
new Vue({
data: {
username: 'xxx'
},
props: ['msg'],
methods: {
doThis: function () {
console.log(this.msg)
}
}
})