基础知识
创建一个vue实例
var vue = new Vue({
el: "#app",
props:{
},
components:{
},
data:{
},
methods:{
},
watch:{
},
computed:{
},
......
})
直接引入vue.js情况下，需要创建一个vue实例，每个vue实例都要有一个挂载点el，id或者class均可，在vue实例中包含挂载点、data、组件、方法、侦听器、计算属性等。
声明式渲染
<div id="app">{{msg}}</div>
var vue = new Vue({
el:"#app",
data:{
msg:"hello world"
}
})
插值表达式的使用
指令
v-model
主要用于表单组件input select textarea
v-text v-html
插入数据，区别是否解析html标签
v-show v-if
控制显示 隐藏，区别在于被控制的模块是否会重新被渲染
v-if v-else-if v-else
条件判断渲染
v-for
循环，通常与属性key一块使用
v-on
事件绑定，可简写为@，绑定事件在vue实例中的methods中执行，事件修饰符有.stop .prevent .capture .self .once .passive
v-bind
属性绑定，可简写为：，常见 :key :src :class :style
v-slot
插槽绑定，可简写为#，用于绑定插槽名称，区分插槽
组件传值
父组件向子组件传值
父组件传递数据，在组件上绑定属性，给属性赋值
<vue-component :list="list"></vue-component>
子组件接收数据，在vue实例中用props接收数据，可使用type default required validator选项
var APP = new Vue({
el:"#app",
props:{
list:String, // 数据类型
default:"default" // 默认值,
required: true, // 是否必填项 Boolean
validator:function(){
// 验证
}
}
})
子组件向父组件传值
子组件发生某个方法，可带参数，传递给父组件，使用$emit
<div @click="handleClick"></div>
var vue = new Vue({
el:"#app",
methods:{
handleClick:function(){
this.$emit("getData","参数")
}
}
})
父组件接收参数，父组件定义相对应的方法接收，在methods中执行
<div @getData="getHandleClick"></div>
var vue = new Vue({
el:"app",
methods:{
getHandleClick:function(e){
// 执行方法
}
}
})
兄弟组件传值
方法1：先传给父组件，再通过父组件传递给兄弟组件
方法2：使用状态管理 vuex
生命周期
生命周期钩子
beforeCreate
create
beforeMount
mounted
update
activated
deactivated
beforeDestroy
destroyed
errorCaptured
搭建项目
- 安装node.js npm
- 安装vue-cli
- 最好安装git，使用git base
- 创建项目 vue init webpack project-name
项目中的组件化
使用脚手架vue-cli搭建项目，src目录为资源目录，存放资源文件、页面、路由、状态管理文件、main.js、App.vue等
这里是单页面项目，页面文件夹pages中按页面创建单页面文件夹，一个页面一个文件夹，每个文件夹中有一个父组件页面，和一个子组件页面文件夹components。
每个页面分为多个单独的组件，以组件的形式引入父组件，然后父组件使用路由router引入App.vue
单页面子组件，template script style，命名导出
<template>
// html标签，最外层只能有一个父元素
</template>
<script>
import // 引入依赖或组件
export detault {
name:"Header", // 定义组件名称，向外部导出
// 这里就是一个vue实例
}
</script>
<style lang="stylus" scoped>
// @import 引入公共样式
// css样式，一般使用css扩展语言，sass/scss,less,stylus
// scoped表示样式只在这个组件内起作用
// 如果想要改变组件外样式，使用 >>> 符号
</style>
单页面父组件，引入子组件，其实单页面父组件也可以看做是一个子组件
<template>
<home-header></home-header>
</template>
<script>
// import 引入依赖或组件
import HomeHeader from "./components/Header"
export detault {
name:"Header", // 定义组件名称，向外部导出
// 这里就是一个vue实例
components:{
HomeHeader:Homeheader
}
}
</script>
<style lang="stylus" scoped>
</style>
路由router
定义页面路由，标签如下，作用类似a标签
<router-link tag="div" to=""></router-link>
有一个专门定义路由的文件router/index.js
// 引入vue vue-router 各单页面组件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'
Vue.use(Router)
// router 设置页面路由
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: Home
},{
path: '/city',
name: 'City',
component: City
},{
path: '/detail/:id', // 动态路由
name: 'Detail',
component: Detail
}],
scrollBehavior(to,from,savedPosition){
return {x:0,y:0}
}
})
状态管理 vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 使用vuex
export default new Vuex.Store({
state:{
// 存储状态数据
},
mutations:{
// 接收方法，改变状态
}
})
其他
keep-alive 缓存
transition 动画
slot 插槽