实操 vue全套教程( 四 ) _vue

注意:
读取本地json文件中的数据时读取失败，如图

文章插图

解决方式就是右击浏览器快捷方式，更改属性，在目标后面加上
–allow-file-access-from-files

文章插图

说明:

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！

4.axios API可以通过将相关配置传递给 axios 来进行请求。
axios(config)
// 发送一个 POST 请求axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}});axios(url[, config])
// 发送一个 GET 请求 (GET请求是默认请求模式)axios('/user/12345');请求方法别名
为了方便起见，已经为所有支持的请求方法提供了别名。

axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）

注意
当使用别名方法时，不需要在config中指定url，method和data属性。
5.Vue的生命周期

文章插图

六、计算属性1.什么是计算属性当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护
computed主要的作用:

分离逻辑(模板和数据分离)
缓存值
双向绑定(getter,setter)

简单理解为：把计算的结果当作属性返回去
2.完整示例

<!--引入 JS 文件--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script></head><body><div id="app"><input type="text"v-model="num1"/><input type="text" v-model="num2"/><p>求和结果{{result}}</p></div><script>var app=new Vue({el:"#app",data:{num1:1,num2:2},computed:{//计算属性result:function(){return parseInt(this.num1)+parseInt(this.num2);}}})</script></body>

3、methods方法与computed计算属性区别

两者的执行结果是完全相同的
计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数
每次触发重新渲染时，调用方法将总会再次执行函数

七、前端工程化 vue-cliVue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
利用vue-cli脚手架来构建Vue项目需要先安装Node.js和NPM环境。
1.Node.js的安装
Node.js的安装比较简单，大家需要在node.js官网(
https://nodejs.org/en/download/)下载并安装node.js环境，windows的推荐下载Windows Installer (.msi) 。同时，大家会得到一个附送的NPM工具。
a，安装Node.js，双击下载好的node文件，如图所示。