vue2.5开发去哪儿网APP知识点总结-原创手记-慕课网

基础知识

创建一个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 插槽