vue相关的知识点
1.vue指令
1.【 v-text】:v-text主要用来更新textContent,可以等同于JS的text属性;
2.【 v-html】:双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令,它等同于JS的innerHtml属性;
3.【 v-pre】:v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译;
4.【 v-cloak】 这个指令是用来保持在元素上直到关联实例结束时进行编译;
5.【v-once】 v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能;
6.【v-if】:v-if可以实现条件渲染,Vue会根据表达式的值的真假条件来渲染元素;
7.【v-else】:v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用;
8.【v-else-if】:v-else-if充当v-if的else-if块,可以链式的使用多次。可以更加方便的实现switch语句;
9.【v-show】:也是用于根据条件展示元素。和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性;
注意:v-if有更高的切换开销 v-show有更高的初始渲染开销。 因此,如果要非常频繁的切换,则使用v-show较好;如果在运行时条件不太可能改变,则v-if较好。
10.【v-for】:用v-for指令根据遍历数组来进行渲染;
注意:当v-for和v-if同处于一个节点时,v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中。
11.【v-bind】:v-bind用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等;(简写为一个冒号【 :】)
12.【v-model】:这个指令用于在表单上创建双向数据绑定。v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
13.【v-on】:v-on主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。(简写为:【 @ 】)
2.什么是vue生命周期?
vue实例从被创建到销毁的一系列过程就叫vue生命周期. 也就是从开始创建、初始化数据、编译模版、挂载DOM→渲染、更新、渲染、卸载等一系列过程。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。
3.数据如何进行双向绑定的?
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
4.axios是什么?怎么使用?描述使用它实现登录功能的流程?
请求后台资源的模块。npm install axios -S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中。
5.vuex是什么?怎么使用?哪种功能场景使用它?
vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,......export。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车。
6.mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
一个model+view+viewModel框架,数据模型model,viewModel连接两个
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷
7.vue-router是什么?它有哪些组件? vue用来写路由一个插件。router-link、router-view
8.请说出vue.cli项目中src目录每个文件夹和文件的用法?
assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件。
9.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default {};
第二步:在需要用的页面(组件)中导入:import smithButton from‘../components/smithButton.vue’;
第三步:注入到vue的子组件的components属性上面,components:{smithButton};
第四步:在template视图view中使用, ;
问题有:smithButton命名,使用的时候则smith-button。
10.组件之间的通信
其他知识点
1.解决跨域的几种方式:
【CORS】
优势:
1.JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求;
2.使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理;
3.JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。[低版本IE7以下不支持,要支持IE7还是要用jsonp方式]
使用:
1.前端:
纯js的ajax请求
<script type="text/javascript">
var xhr = new XMLHttpRequest(); //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
xhr.open("GET", "/haorooms",true);
xhr.send();
</script>
以上的haorooms是相对路径,如果我们要使用CORS,相关Ajax代码可能如下所示:
<script type="text/javascript">
var xhr = new XMLHttpRequest();//ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
xhr.open("GET", "http://www.haorooms.com/CORS",true);
xhr.send();
</script>
当然,你也可以用jquery的ajax进行。
2.后端或者服务器端的配置:
下面我们主要介绍Apache和PHP里的设置方法
Apache:Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。你只需要在Apache配置文件的 < Directory >, < Location>, < Files >或< VirtualHost>的配置里加入以下内容即可:
Header set Access-Control-Allow-Origin *
PHP:只需要使用如下的代码设置即可
<?php
header("Access-Control-Allow-Origin:*");
以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然,这样有很大的危险性,恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源,例如下面的设置使得只有www.haorooms.com这个域才能跨域访问服务器的API。
Access-Control-Allow-Origin: http://www.haorooms.com
【JSONP】
【通过修改document.domain来跨子域】
【使用window.name来进行跨域】
【使用HTML5的window.postMessage方法跨域】
【webpack解决跨域问题】