vue复习提纲

复习提纲

选择102
名词解释54
简答5*6
编程12+18

一、基础

1. http://cn.vuejs.org官网
2. Vue特点：易用，灵活，高效
3. 安装
   （1）cdn引入<scrip src:””></>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

（2）npm引入

npm install -g vue-cil (脚手架安装
npm install -g webpack
vue init webpack project_name （新建项目)
npm install (安装node_modules)
npm run dev  (运行)

（3）路由 npm install vue-router --save
（4）Vuex npm install vuex --save
（5）Axios npm install axios --save

4. vue结构

5. Vue文件夹结构
   1、build:保存的是一些webpack的初始化配置
   　　2、config:保存一些项目初始化的配置
   　　3、node_module:项目的依赖库
   　　4、src:（源码）
   　　src文件夹保存的用于开发的目录，包括assets（放置图片）、store(vuex信息)、components（组件文件）、app.vue:（项目入口）、main.js(项目的核心文件)
   　　5、static:static保存的是项目的静态资源文件，webpack打包的时候不会打包该文件夹下的资源
   　　6、index.html:　入口页面
   7、package.json：指定项目开发和生成环境中需要使用的依赖库；
   8、app.Vue：入口组件
   9、main.js：入口 js 文件

二、生命周期图

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

render方法的实质就是生成template模板；
1、new vue(),数据还没有挂载，还是个空壳 Beforecreate

2、挂载数据，绑定事件，然后执行created函数

3、编译模版为虚拟的dom放入render函数中准备渲染，然后执行beforeMount钩子函数

4、接下来开始render，渲染出真实地dom，然后执行mounted钩子函数

5、当组件或实例的数据更改以后，会立刻执行beforeUpdate
6、当更新完成后，执行updated
7、当调用destroy时，立即执行beforeDestroy
8、组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed

三、vuex单项数据流

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
以下是一个表示“单向数据流”理念的极简示意：

1. state，驱动应用数据源
2. View，以声明的方式将state映射到视图
3. Actions，响应在view上的用户输入导致的状态变化

当我们的应用遇到多个组件共享状态时
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

四、Mvvm

View—modelView----model
HTML—桥梁—数据

五、语法

1. 计算属性vs方法
   然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
   相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
2. 计算属性 vs 侦听属性
   让代码更简洁
3. 计算属性：做动态的计算，让代码更简洁

Watch:{
Selected:function(newdata,olddata){

}
}

Computed:{
Fullname(){
Return this.user.firstname+this.lastname
}
}

3. {{msg}}
4. v-bind：title=“title”
5. v-html
6. v-if=“”
7. V-model(数据驱动视图–视图改变–数据改变—视图更新)
8. v-for=“（item，index） in items” ：key=“index”

method：{
Bt1（e）{
e.prevetdefault() 阻止默认事件
}
}

11. 按键修饰符

<input @keyup=””/> <input @keyup.enter=””/><input @keyup.alt.enter=””/>

11. 父子组件的传参

<child v-bind:abc=”msg” @sendmsg=”getmsg”></child>

props{
abc:{
type:String,
default:5
}
}
sendmsg(e){
this.$emit(“sendmsg”,{text:somemsg})
}
getmsg(data){
console.log(data.text)
}

12. 路由传参

path:/child:id
@click=”$router.push(‘/child’+user.id)”
{{$router.params.id}}

13. 子路由

{path：“/home”,name:”home”,component:home,
children:[
{},
{},
]
}

声明式 router-view router-link
编程式 router.push()

六、vue-router

import  VueRouter from ‘vue-router’
Vue.use(VueRouter)
const routes=[
{path:’/’,component:’’,beforeEnter:()=>{
}
}
]
const router =new VueRouter({
routes,
mode:’history’
})
const router=new VueRouter({}).beforeEacher((from,to,next)=>{

})

Hash与history区别
更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

六、Vuex

this.$store.state.name
this.$store.getters.getName
this.$store.commit(“setName”,data)
this.$store.dispatch(“setName”,data)
 

七、Axios

this.$axios.get(“getnew.php”,params).then(res=>{
If(res.data.code==200){
}
else{ }
})