前言：此据狂神哔哩哔哩视频所写笔记，其中掺杂自己的理解，有不妥之处，望指正，转载请附上链接点击跳转其视频
什么是双向绑定？
vue.js遵从M（model）V（view）VM（ViewModel）模式，双向绑定指的的是Model（即代码中data内容，猜想：这部分后面可能取得是数据库的内容）里面的数据和View里面显示的数据同步，即Model变化，View也跟着变化，View变化，Model也跟着变化。
为什么要数据双向绑定？
在全局性数据流使用单向（基于vuex），方便跟踪；局部性数据流使用双向（基于UI控件），简单操作。
怎么实现数据双向绑定？
表现形式：
通过View层文本输入改变数据，引起Model的值变化：View=>Model通过控制台给data的键值对赋值，引起View的显示数据变化：Model=>View代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF_8"> <title>01HelloWorld</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <P>Hello {{ msg }}</P> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> //创建Vue实例 const vm = new Vue({//配置对象 el: '#app', //element：选择器 data: { //数据（model） msg: 'Hello Vue!' } }) </script> </body> </html>效果图展示：
View=>Model
操作步骤：1、从代码看出msg的初始值为Hello Vue!，打开控制台，查看msg的值也是Hello Vue! 2、现在删除文本框中的内容，重新输入新的数据，再次在控制台查看，会发现其值与视图层的数据一致，说明View的数据是绑定Model的数据的。
Model=>View
操作步骤：1、同上；2、现在控制给msg赋新的值，然后观察View视图层的变化，会发现其值与控制台输入的数据一样，说明Model的数据是绑定View的数据的。
补充说明：
v-model
v-model指令不但可以在<input>中，还可以在其他<textarea>、<select>中。用法类似于<input>的案例，注意<textarea></textarea同步：想要改Dom节点的值，就必须到代码中重写，然后在浏览器刷新才可以看到改变的值，而上案例中，发现不管是先改变View的显示数据，还是先改变Model的数据，对应的Model的数据，对应的View的数据不需要刷新，就会立马显示出来，其两者的变化是同步的。
扩展：
单选框（多选框略）
<div id="app"> 性别： <input type="radio" name="sex" value="男" v-model="msg">男 <input type="radio" name="sex" value="女" v-model="msg">女 <P>选中了：{{msg}}</P> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { msg: "" } }); </script>效果图：
下拉框
1、selected（放到那个开放标签，那个就是默认选项）
代码实现：
<div id="app"> 下拉框： <select > <option>A</option> <option selected>B</option> <option>C</option> </select> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { msg: "" } }) </script>效果图片：
2、v-model（若在中加入 v-model=“msg”，怎会失去默认效果）
解决措施为：将绑定值换成selected，在选项中 中增加value值，然后对value的进行操作，确定默认项
代码实现：
<div id="app"> 下拉框： <select v-model="selected"> <option value="a">A</option> <option value="b">B</option> <option value="v">C</option> </select> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { selected: "b" } }) </script>效果图片：
3、v-model（双向绑定）
代码实现：
<div id="app"> 下拉框： <select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> <span>value: {{selected}}</span> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { selected: "" } }) </script>效果图片：
但在苹果iSO中如果首项为空，则意味着将不能选择，所以会留一个预留项 请选择，实现方式是 A前面加一个请选择,效果图片如下：
注意：v-model会忽视所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过Javascript组件的data选项中声明初始值!组件可以理解为集合很多标签的一种模板，可能是页头、侧边栏、内容区等组件，每个组件有包含其它的像导航栏链接、博文之类的组件。
组件是可复用的 Vue 实例，且带有一个名字。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项。你可以将组件进行任意次数的复用：
第一个组件
代码实现：
<div id="app"> <uxiang v-for="item in items" v-bind:signal="item"></uxiang> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> //定义一个Vue组件component Vue.component("uxiang",{ props: ['signal'], template: '<li>{{signal}}</li>' }); //创建vue实例 let vm = new Vue({ el: "#app",//element：选择器 data: { items: ['Java','Linux','Go'] } });补充说明：
//组件：传递给组件中的值：props，props里面的内容要小写 <uxiang v-for="item in items" v-bind:signal="item"></uxiang> 通过v-for="item in items"讲data里面items: ['Java','Linux','Go']中遍历出每一项item，再将每一项item绑定到参数signal上面：v-bind:signal="item"，通过 props: ['signal']接受，由{{signal}}取出显示出来。 Vue.component():注册组件 my-component-li:自定义组件的名字 tempalte:组件的模板效果图片：
Axios是一个开源的可以在浏览器端和NodeJs的异步通信框架，它的主要作用是实现AJAX异步通信，其功能特性如下：
从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF由于Vue.js是一个视图层框架，并且作者（尤雨溪）严格遵守SOC（关注度分离原则），所以Vue.js并不包含AJAX的通行功能，为了解决通信问题，作者单独开发了一个vue-resource的插件，不过在进入2.0版本以后停止了对该插件的的维护并推荐了Axios框架。少了jQuery，因为它操作Dom太频繁！
可以通过gitee下载：gitee的安装和配置
使用git从码云(gitee)下载代码到本地点击跳转
和Vue的导入思路一样，将下载好的axios文件中的axios.js文件复制到项目的一个目录下（我建得是ajs）便可，如下：
1、找到从gitee下载下来的axios，再找到axios里面dist下的axios.js(或者axios.min.js)文件，将其复制。
2、打开你的vscode中的项目，见其复制到js文件下
3、创建第7个Axios工程，在07axios目录下创建2个文件一个为data.json,另一个为index.html，这样工程就建立完了。
第一个Axios程序：（实现功能：使用mounted钩子函数进行通信，获取数据，其他钩子函数的用法类似，后面补充说明部分会讲到）
代码实现：
data.json
{ "name":"狂神说java", "url":"https://www.baidu.com/", "page":1, "isNonProfit":true, "address":{ "stree":"含光门", "city":"窝窝村", "country":"中国" }, "links":[ { "name":"bilibili", "url":"https://space.bilibili.com/" }, { "name":"baidu", "url":"https://www.baidu.com/" }, { "name":"", "url":"https://editor.csdn.net/" } ] }inidex.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07axios</title> </head> <body> <div id="vue"> </div> <script src="../js/vue.js"></script> <script src="../js/axios.js"></script> <script type="text/javascript"> //创建vue实例 let vm =new Vue({ el: "#vue",//element：选择器 mounted (){//钩子函数，链式编程 axios.get('./data.json').then(response=>(console.log(response.data))); } }); </script> </body> </html>出现了什么问题？（基于本地操作，没有部署到服务器上面）：
跨域问题解决
什么是跨域？ 跨域是指跨域名的访问，以下情况都属于跨域：
跨域原因说明示例域名不同www.baidu.com 与 www.taobao.com域名相同，端口不同www.jd.com:8080 与 www.jd.com:8081二级域名不同service.jd.com 与 goods.jd.com为什么会出现？
浏览器的安全限制机制会出现禁止跨域
本地file协议浏览会产生跨域问题
该怎么解决？：(暂无解决)
检查vscode是否安装插件
鼠标右击打开浏览器快捷的属性，在其目标里面添加"–allow-file-access-from-files"代码
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files效果图片
打开控制台(consde)，查看相关信息，看看是否成功获取本地数据；
再打开网络请求(Network),查看是否为Status：200，Type：xhr；
然后鼠标左击data.json,Headers里查看Status Code：200 OK ；
最后可以再Response里面查看请求获取到的本地数据
若没有运行成功，则为下列情况
打开控制台（Console）,有5出报错情况；
在网络请求(Network),发现是Status：failed，Type：xhr报红；
鼠标左单击data.json中发现Headers并没有Status Code：200 OK ，Response里面是Failed to load response data。
说明补充
Vue的生命周期
跳转推荐博主
HTTP请求错误类型跳转原文博客
点击跳转百度百科
HTTP 错误 400 400 请求出错 由于语法格式有误，服务器无法理解此请求。不作修改，客户程序就无法重复此请求。 HTTP 错误 401 401.1 未授权：登录失败 此错误表明传输给服务器的证书与登录服务器所需的证书不匹配。 请与 Web 服务器的管理员联系，以确认您是否具有访问所请求资源的权限。 401.2 未授权：服务器的配置导致登录失败 此错误表明传输给服务器的证书与登录服务器所需的证书不匹配。此错误通常由未发送正确的 WWW 验证表头字段所致。 请与 Web 服务器的管理员联系，以确认您是否具有访问所请求资源的权限。 401.3 未授权：由于资源中的 ACL 而未授权 此错误表明客户所传输的证书没有对服务器中特定资源的访问权限。此资源可能是客户机中的地址行所列出的网页或文件，也可能是处理客户机中的地址行所列出的文件所需服务器上的其他文件。 请记录试图访问的完整地址，并与 Web 服务器的管理员联系以确认您是否具有访问所请求资源的权限。 401.4 未授权：授权服务被筛选程序拒绝 此错误表明 Web 服务器已经安装了筛选程序，用以验证连接到服务器的用户。此筛选程序拒绝连接到此服务器的真品证书的访问。 请记录试图访问的完整地址，并与 Web 服务器的管理员联系以确认您是否具有访问所请求资源的权限。 401.5 未授权：ISAPI/CGI 应用程序的授权失败 此错误表明试图使用的 Web服务器中的地址已经安装了 ISAPI 或 CGI程序，在继续之前用以验证用户的证书。此程序拒绝用来连接到服务器的真品证书的访问。 请记录试图访问的完整地址，并与 Web服务器的管理员联系以确认您是否具有访问所请求资源的权限 HTTP 错误 403 403.1 禁止：禁止执行访问 如果从并不允许执行程序的目录中执行 CGI、ISAPI或其他执行程序就可能引起此错误。 如果问题依然存在，请与 Web 服务器的管理员联系。 403.2 禁止：禁止读取访问 如果没有可用的默认网页或未启用此目录的目录浏览，或者试图显示驻留在只标记为执行或脚本权限的目录中的HTML 页时就会导致此错误。 如果问题依然存在，请与 Web 服务器的管理员联系。 403.3 禁止：禁止写访问 如果试图上载或修改不允许写访问的目录中的文件，就会导致此问题。 如果问题依然存在，请与 Web服务器的管理员联系。 403.4 禁止：需要 SSL 此错误表明试图访问的网页受安全套接字层（SSL）的保护。要查看，必须在试图访问的地址前输入https:// 以启用 SSL。 如果问题依然存在，请与 Web服务器的管理员联系。 403.5 禁止：需要 SSL 128 此错误消息表明您试图访问的资源受 128位的安全套接字层（SSL）保护。要查看此资源，需要有支持此SSL 层的浏览器。 请确认浏览器是否支持 128 位 SSL安全性。如果支持，就与 Web服务器的管理员联系，并报告问题。 403.6 禁止：拒绝 IP 地址 如果服务器含有不允许访问此站点的 IP地址列表，并且您正使用的 IP地址在此列表中，就会导致此问题。 如果问题依然存在，请与 Web服务器的管理员联系。 403.7 禁止：需要用户证书 当试图访问的资源要求浏览器具有服务器可识别的用户安全套接字层（SSL）证书时就会导致此问题。可用来验证您是否为此资源的合法用户。 请与 Web服务器的管理员联系以获取有效的用户证书。 403.8 禁止：禁止站点访问 如果 Web服务器不为请求提供服务，或您没有连接到此站点的权限时，就会导致此问题。 请与 Web 服务器的管理员联系。 403.9 禁止访问：所连接的用户太多 如果 Web太忙并且由于流量过大而无法处理您的请求时就会导致此问题。请稍后再次连接。 如果问题依然存在，请与 Web 服务器的管理员联系。 403.10 禁止访问：配置无效 此时 Web 服务器的配置存在问题。 如果问题依然存在，请与 Web服务器的管理员联系。 403.11 禁止访问：密码已更改 在身份验证的过程中如果用户输入错误的密码，就会导致此错误。请刷新网页并重试。 如果问题依然存在，请与 Web服务器的管理员联系。 403.12 禁止访问：映射程序拒绝访问 拒绝用户证书试图访问此 Web 站点。 请与站点管理员联系以建立用户证书权限。如果必要，也可以更改用户证书并重试。 HTTP 错误 404 404 找不到 Web 服务器找不到您所请求的文件或脚本。请检查URL 以确保路径正确。 如果问题依然存在，请与服务器的管理员联系。 HTTP 错误 405 405 不允许此方法 对于请求所标识的资源，不允许使用请求行中所指定的方法。请确保为所请求的资源设置了正确的 MIME 类型。 如果问题依然存在，请与服务器的管理员联系。 HTTP 错误 406 406 不可接受 根据此请求中所发送的“接受”标题，此请求所标识的资源只能生成内容特征为“不可接受”的响应实体。 如果问题依然存在，请与服务器的管理员联系。 HTTP 错误 407 407 需要代理身份验证 在可为此请求提供服务之前，您必须验证此代理服务器。请登录到代理服务器，然后重试。 如果问题依然存在，请与 Web 服务器的管理员联系。 HTTP 错误 412 412 前提条件失败 在服务器上测试前提条件时，部分请求标题字段中所给定的前提条件估计为FALSE。客户机将前提条件放置在当前资源 metainformation（标题字段数据）中，以防止所请求的方法被误用到其他资源。 如果问题依然存在，请与 Web 服务器的管理员联系。 HTTP 错误 414 414 Request-URI 太长 Request-URL太长，服务器拒绝服务此请求。仅在下列条件下才有可能发生此条件： 客户机错误地将 POST 请求转换为具有较长的查询信息的 GET 请求。 客户机遇到了重定向问题（例如，指向自身的后缀的重定向前缀）。 服务器正遭受试图利用某些服务器（将固定长度的缓冲区用于读取或执行 Request-URI）中的安全性漏洞的客户干扰。 如果问题依然存在，请与 Web 服务器的管理员联系。 HTTP 错误 500 500 服务器的内部错误 Web 服务器不能执行此请求。请稍后重试此请求。 如果问题依然存在，请与 Web服务器的管理员联系。 HTTP 错误 501 501 未实现 Web 服务器不支持实现此请求所需的功能。请检查URL 中的错误，如果问题依然存在，请与 Web服务器的管理员联系。 HTTP 错误 502 502 网关出错 当用作网关或代理时，服务器将从试图实现此请求时所访问的upstream 服务器中接收无效的响应。 如果问题依然存在，请与 Web服务器的管理员联系。第二个Axios程序（功能实现：将mounted钩子函数请求获取到的本地数据（即data.json里的数据）赋值到data(){}方法里的return{info：{}}里面，然后通过{{}}渲染到View视图层）
代码实现：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07axios</title> </head> <body> <div id="vue"> <div>{{info.name}}</div> <div>{{info.assress.street}}</div> </div> <script src="../js/vue.js"></script> <script src="../js/axios.js"></script> <script type="text/javascript"> //创建vue实例 let vm =new Vue({ el: "#vue",//element：选择器 //data：此处是data的方法 data(){ return{ //请求的返回参数合适，必须和json字符串一样 info:{ name:null, address:{ street:null, city:null, country:null } } } }, mounted (){//钩子函数，链式编程 ES6新特性 axios.get('data.json').then(response=>(this.info=response.data)); } }); </script> </body> </html>data.json
{ "name":"狂神说java", "url":"https://blog.kuangstudy.com/", "page":1, "isNonProfit":true, "address":{ "stree":"含光门", "city":"窝窝村", "country":"中国" }, "links":[ { "name":"bilibili", "url":"https://space.bilibili.com/" }, { "name":"baidu", "url":"https://www.baidu.com/" }, { "name":"", "url":"https://editor.csdn.net/" } ] }效果图片
补充说明
闪烁问题解决
什么是闪烁问题？
在显示过程中，会出现短暂的显示模板的瞬间。
怎么解决？
解决措施是手写一个白屏操作，让瞬间显示模板的过程被替换成显示白屏的过程，实现方式是先在
开标签中加v-clock接着在标签中添加一下代码 //v-clock:解决闪烁问题 <style> [v-clock]{ display:none; } </style> <div id="vue" v-clock> 略：见上面 </div>如何访问一个获取data.json中的链接？用v-bond来绑定，具体代码如下：
<div id="vue"> <div>{{info.name}}</div> <div>{{info.assress.street}}</div> <a v-bind:href="info.url">点我刷新</a>//绑定href </div> info:{ name:null, address:{ street:null, city:null, country:null }, url:null //初始化 }