一，安裝
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run devhttps://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI
https://segmentfault.com/a/1190000011275993
二，todo-demo
參照慕課上兩個課程，快速熟悉一個vue的demo
https://www.imooc.com/learn/980
https://www.imooc.com/learn/694
項目目錄
main.js 入口文件
引入了vue的庫，引入了根組件App.vue
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
index.html 入口html文件
上個文件中el: '#app' 對應index.html 的id爲app的掛載點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue根組件
<template>
<div id = "app">
<!--屬性綁定-->
<h1 v-bind:title="titleValue">todo</h1>
<div>
<!--雙向數據綁定-->
<input class="item-color" v-model="inputValue" v-on:keyup.enter="addNew"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--監聽子組件的delete方法，執行父組件的刪除方法-->
<todo-item v-for="(item, index) of items"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
@finish="handleFinish">
</todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem'
import Store from './store'
export default {
components:{//註冊組件
'todo-item': TodoItem
},
data() {//組件數據
return {
titleValue: 'this is a todo list',
inputValue:'',
items: Store.fetch()
}
},
watch:{//監聽組件數據
items:{
handler(items){
Store.save(items)
},
deep:true
}
},
methods:{//組件方法
handleSubmit(){
this.items.push({
label:this.inputValue,
isFinished:false
})
this.inputValue = ''
},
handleDelete(index){
this.items.splice(index, 1)
},
handleFinish(index){
this.items[index].isFinished = !this.items[index].isFinished
},
addNew(){
this.items.push({
label:this.inputValue,
isFinished:false
})
this.inputValue = ''
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>TodoItem.vue子組件
<template>
<li class="item-color" @dblclick="handleDelete" @click="handleFinish" v-bind:class="{finished: content.isFinished}">{{content.label}}</li>
</template>
<script>
export default{
//接收父組件傳來的屬性參數
props:['content','index'],
methods:{
handleDelete(){
//觸發刪除事件
this.$emit('delete',this.index)
},
handleFinish(){
//觸發刪除事件
this.$emit('finish',this.index)
}
}
}
</script>
<style scoped>
.item-color{
color: #42B983;
}
.finished{
text-decoration: line-through;
}
</style>store.js 本地存儲文件
const STORAGE_KEY = 'todos-vuejs'
export default{
fetch(){
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save(items){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
}
}
總結：
1，vue組件都是由template, script, style三部分組成的
2，vue父組件—>子組件傳值，通過屬性props
3，vue子組件—>父組件傳值，通過子組件觸發事件$emit，父組件監聽事件
擴展：
4，vue template下只能有一個根標籤
5，樣式加上scoped，組件樣式解耦，樣式只在組件內起作用，否則是全局樣式
三，單頁應用和多頁應用
- 單頁應用頁面跳轉都是通過js去加載組件，替換組件完成的
- 多頁應用頁面跳轉都是通過訪問新的http請求，獲取新的html完成的
- seo搜索引擎主要針對html的篩查效果更好
- 單頁應用雖然有缺點，但vue可以通過其他方法解決
四，路由
1，組件引入路由
// 路由就是根據網址的不同，返回不同的內容給用戶
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})2，組件使用路由
<template>
<div id="app">
<!--顯示的是當前路由地址所對應的內容-->
<router-view/>
</div>
</template>3，路由的配置
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/list',
name: 'List',
component: List
}
]
})完整代碼
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
// es6:router = router:router, App = App:App
// 路由就是根據網址的不同，返回不同的內容給用戶
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<!--顯示的是當前路由地址所對應的內容-->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import List from '@/pages/list/List'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/list',
name: 'List',
component: List
}
]
})
Home.vue
<template>
<div>
<div class="home">home</div>
<router-link to="/list">列表頁</router-link>
</div>
</template>
<script>
export default{
name: 'Home'
}
</script>
<style>
.home{
font-size: 10px;
}
</style>
List.vue
<template>
<div>list</div>
</template>
<script>
export default{
name: 'List'
}
</script>
<style>
</style>
五，注意
- Hbuilder配置Avalon、Vue指令提示
https://blog.csdn.net/jianggujin/article/details/71419828
