1.mvvm
m:module,
v:view
vm:viewmodule
2.vue,react,angular的区别
vue,react
数据驱动,组件化,
vue,angular:双向绑定
vue,react,angular:虚拟dom
angular:模块化开发。
react:mvc
vue,angular:mvvm
angular:有脏检查。
3.v-show和v-if
v-show:改变的是css,控制显示与隐藏
v-if:是否渲染dom,控制显示与隐藏。
4.在vue中引入插件,
import …from
…
vue.use(”);
5.列举常用的生命钩子。
6.简述vuex的工作原理和使用方法。
生命钩子专题
1.第一次页面加载会触发哪几个钩子?
beforeCreate,created,beforemount,mounted.
2.DOM 渲染在
哪个周期中就已经完成?
mounted
3.简单描述每个周期具体适合哪些场景?
beforecreat:加载一个loading事件。
created:初始化完成事件。比如结束loading,异步请求。
mounted :
挂载元素,获取到DOM节点
updated :
如果对数据统一处理,在这里写上相应函数
beforeDestroy
: 比如删除一个地址。
4.传递参数
父子传参:
父组件传递数据给子组件
父组件数据如何传递给子组件呢?可以通过props属性来实现;
props接收2种类型:
1.数组;
2.对象。
slot:插槽,也可以向子组件传递数据。
子父传参:
使用emit方法。调用父级定义好的@方法,使用on事件监听
非父子组件传参:
如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信.
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.
let Hub = new Vue(); //创建事件中心组件1触发:
<div @click="eve">methods: {
eve() {
Hub.$emit('change','hehe'); //Hub触发事件
}
}
组件2接收:
created() {
Hub.$on('change', () => { //Hub接收事件
this.msg = 'hehe';
});
}
http://blog.csdn.net/binginsist/article/details/68941772作为参考
非父子组件间触发事件:
在a页面自定义事件,@my-event=“onClickEvent”
在b页面@click=”emitMyEvent”
在methods中定义emitMyEvent:{
this.$emit(‘my-event’,this.hello)
}
5.computed
和methods的异同:
同:2个的执行再某些情况下的执行结果一样。
异:
计算属性的更新根据其他值的变化而更新,如果其他值不变,则计算属性则不再变化。
methods方法则是每次都去获取最新的值。
写法上的区别是computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用,必须加()
两种方式在缓存上也大有不同,利用computed计算属性是将
content与message绑定,只有当message发生变化时才会触发content,而methods方式是每次进入页面都要执行该方法,但是在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式
methods: {
now:function(){
returnDate.now()
}
}
如果用computed计算属性的话,每次进入页面将一直沿用第一次的信息,不会再触发now。
6.keep-alive:
有缓存的作用,提高加载速度。
异步请求插件。
类似jquery的ajax
前端路由的优点缺点
优点:
用户体验好,不需要每次都从服务器全部获取,快速展现给用户
缺点:
不利于seo
使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存。
单页面无法记住滚动的位置。无法在前进,后退的时候技术滚动的位置。
vue-router用来构建spa
router-link, router-view
动态路由匹配
嵌套路由
编程式路由
命名路由和命名视图
动态路由匹配:
export default new Router({
mode:’history’,
routes: [
{
path:’/goods/:goodsId/user/:name’,
name:’GoodsList’,
component:GoodsList
}
]
});
解决vue router使用 history 模式刷新后404问题
因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误。
想要history模式正常访问,还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源:如果 URL
匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
也就是在服务端修改404错误页面的配置路径,让其指向到index.html。
警告:
因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html
文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。
1
2
3
4
5
6
const router =newVueRouter({
mode:'history',
routes:
[
{
path:'*',
component: NotFoundComponent }
]
})
如此便解决了页面刷新后404问题。
问题延伸:
但是后面又发现,在IE浏览器下刷新仍然还是404,在网上找了一下原因,是因为IE自作聪明,对错误页面的处理在ie来看页面大小<1024b
会被认为十分不友好,所以ie就将改页面给替换成自己的错误提示页面了,而我的index.html刚好只有一个DIV:
1
2
3
4
5
6
7
8
9
10
11
"utf-8">
"app">
解决办法就是充实一下页面,让大小超过1024即可。
嵌套路由
export default new Router({
mode:’history’,
routes: [
{
path:’/goods/:goodsId/user/:name’,
name:’GoodsList’,
component:GoodsList,
children: [{
path:’title’,
name:’title’,
component:title
}]
}
]
})
编程式路由
通过js来实现页面的跳转
$router.push(‘name’);
$router.push({path:’name’})
$router.push({path:’name?a=123′})或者$router.push({path:’name’,query:{a:123}})
接收参数形式
1.动态路由传参:
使用$route.params.goodsId
2.使用query传参,
使用this.$route.query.a 来显示传递过来的参数
命名路由和命名视图
给路由定义不同的名字,根据名字进行匹配。
给不同的router-view定义名字,通过名字进行对应组件的渲染。
export default new Router({
mode:’history’,
routes: [
{
path:’/’,
name:’GoodsList’,
components: {
default:goodsList,
title:Title,
img:Img
}
}
]
})