一，安装
# 全局安装 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