一篇搞懂前端框架 Vue
目录
一、Vue 初体验
二、Vue 命令
v-text 指令
v-html 指令
v-on 基础
v-show 指令
v-if 指令
v-bind 指令
v-for 指令
v-on 补充
v-model 指令
三、网络应用
axios
axios + vue
Vue 快速入门可查看官方文档：Vue.js (vuejs.org)
一、Vue 初体验
什么是 Vue.js ？
Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
起步
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
或者：
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
{{ message }}var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})页面就会显示：Hello Vue！
至此，我们已经成功地创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。
接下来我们聊一下 js 中两个参数：el 挂载点 和 data 数据对象
el 挂载点
- el 挂载点的作用是什么？ el 是用来设置 Vue 实例挂载（管理）的元素
- Vue 实例的作用范围是什么？ Vue 会管理 el 命中元素及其内部的后代元素
- 是否可以使用其他的选择器？ 可以，但建议使用 id 选择器
- 是否可以设置其他的 dom 元素？ 可以使用其他的双标签，但不能使用 html 和 body
data 数据对象
- data 用来定义 Vue 中用到的数据
- data 中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守 js 的语法即可，例如：对象的点语法、数组的索引下标语法
二、Vue 命令
指令汇总：
| 内容绑定、事件绑定 |
v-text v-html v-on基础 |
|---|---|
| 显示切换、属性绑定 |
v-show v-if v-bind |
| 列表循环、表单元素绑定 |
v-for v-on补充 v-model |
v-text 指令
- 设置标签的文本值
我爱北京
我爱{{message+"!"}}}
var app = new Vue({ el: '#app', data: { message: '北京' }})
v-html 指令
- 设置标签的 innerHTML
var app = new Vue({ el: "#app", data: { content: "百度" }});v-on 基础
- 为元素绑定事件
{{ food }}
var app = new Vue({ el: "#app", data: { food: "西兰花炒鸡蛋" }, /*methods与data为同一级, 表示方法*/ methods: { doIt: function () { alert("做It"); }, changeFood: function () { /*通过this获取当前dom对象, 并修改当前dom对象的数据, dom对象随之同步*/ this.food += "好好吃！"; } }});
注意：
当更改 dom 元素的数据时，dom 元素会随着数据的更改而同步。所以只需要更改数据即可，不用更改 dom 元素，数据更改后 dom 元素会同步更改。
v-show 指令
- 根据表达式的真假，切换元素的显示和隐藏（操纵样式）
=18">var app = new Vue({ el: '#app', data: { isShow: false, age: 18 }})v-show 指令的原理是修改标签元素的 display，实现显示和隐藏。指令后面的内容最终都会解析为布尔值，值为 true 时显示，值为 false 时隐藏。且数据改变之后，对应元素的显示状态会同步更新。
v-if 指令
- 根据表达式的真假，切换元素的显示和隐藏（操纵 dom 元素）
var app = new Vue({ el: '#app', data: { isShow: false }, methods: { toggleIsShow: function () { this.isShow = !this.isShow; } }})v-if 指令的原理是操纵 dom 元素，实现显示和隐藏。表达式的值为 true 时，元素存在于 dom 树中，值为 false 时，元素从 dom 中移除。频繁的切换使用 v-show，反之使用 v-if，前者的切换消耗小。
v-bind 指令
- 设置元素的属性
表达式语法：v-bind:属性名=表达式 （v-bind 可以省略）
var app = new Vue({ el: '#app', data: { imgSrc:"https://www.baidu.com", message: '页面加载于 ' + new Date().toLocaleString(), isActive:true }})v-for 指令
- 根据数据生成列表结构
- {{ index }}：我爱{{ item }}
我是: {{ item.name }}, 今年{{ item.age }}岁
var app = new Vue({ el: '#app', data: { arr:["北京","上海","广州","深圳"], student:[ {name:"小明", age:17}, {name:"小红", age:18}, {name:"小强", age:19} ] }})v-on 补充
- 传递自定义参数，事件修饰符
var app = new Vue({ el: '#app', methods:{ doIt:function (p1,p2) { alert(p2 + p1); }, sayHi:function () { alert("How are you?") } }})关于事件修饰符有很多，用法都一样，这里就不一一介绍了，更多可以参见官方 API：API — Vue.js (vuejs.org)
v-model 指令
- 获取和设置表单元素的值（双向数据绑定）
{{ message }}
var app = new Vue({ el: '#app', data: { message:"我真帅！！" }})
三、网络应用
上一章所讲的指令都是用来进行本地控制的，但网络应用的使用愈来愈多，下面我们聊一聊网络应用 axios。
axios
- 功能强大的网络请求库
首先我们要进行导包（联网状态下）
使用 get 或 post 方法即可发送对应的请求，then 方法中的回调函数会在请求成功或失败时触发，通过回调函数的形参可以获取响应内容或错误信息。
接下来通过以下两种示例及代码为大家演示 axios 的使用方法
/*随机获取笑话的接口*/document.querySelector(".get").onclick = function () { axios.get("https://autumnfish.cn/api/joke/list?num=3") .then(function (response) { // 成功时触发 console.log(response); },function (err) { // 失败时触发 console.log(err); })}/*用户注册接口*/document.querySelector(".post").onclick = function () { axios.post("https://autumnfish.cn/api/user/reg",{username:"baby"}) .then(function (response) { console.log(response); },function (err) { console.log(err); })}axios + vue
{{ joke }}
var app = new Vue({ el:"#app", data:{ joke:"很好笑的笑话" }, methods:{ getJoke:function () { var that = this; axios.get("https://autumnfish.cn/api/joke") .then(function (response) { console.log(response.data); // 这里的this已经变了,是axios,不是app了,所以不能直接通过this获取joke // 我们可以通过变量名记录之前的app // this.joke = response.data; that.joke = response.data; },function (err) { }) } }})
