前端|JavaScript学会了，Vue 给你两眼，应该够了，多看一眼（完全没必要！） mvc|vue.js|javascript

每个时代，都不会亏待快速学习的人！

把我的上一篇文章瞅一眼之后，vue让你多瞅一眼，给自己30分钟吧，（10分钟学习，20分钟思考人生！）

上一篇文章：Java基础语法学会了，JavaScript瞄一眼就行，瞅第二眼我看不起你！

前端|JavaScript学会了，Vue 给你两眼，应该够了，多看一眼（完全没必要！）

文章图片

Vue

简述
1. HelloWorld
2.基础指令
- 2.1 v-bind
- 2.2 v-if v-else
- 2.3 v-for
- 2.4 v-on
3. 双向绑定(v-model)
4. 异步通信(axios)

简述 VUE，前端框架，架构为MVVM，（view-viewmodel-model），你可能听说过MVC（model-view-controller）,其实差不多，
view 控制视图，你肉眼能在网页上看见的东西。
model 数据模型，就是自己封装的数据，可以从文本，数据库，或者其他数据的来源里获取，通常以JSON来进行传输为佳，因为轻量！
viewmodel 连接view和model，相当于桥梁，和mvc的controller差不多！

资源文件链接我放在了文末（在本人的服务器上），及时获取，避免失效！

1. HelloWorld

一切从hello world开始！

准备一个vue的JavaScript文件

可以有两种方式来获取到这个文件：

CDN (内容分发网络，可以看作一中网络资源)，地址：https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js

我的vue.min.js文件

文章图片

编写HTML页面

这个html包含了下面所有的内容，直接cp就可以用了，记得资源文件带上！

Title - 锐客网{ {message}} v-bind:title="message"> 此处为使用v-bind动态绑定的信息！你的选择是c1！你的选择不是c1! { {item.name}} v-model="choice"> 你的选择是：{ {choice}},明智的选择！个人简介 { {info.name}} { {info.job}} { {info.message}} src="https://www.it610.com/article/vue.min.js">src="https://unpkg.com/axios/dist/axios.min.js"> > var vm= new Vue({el:"#app", data:{message:"hello World!" } }) var vm2=new Vue({el:"#app2", data:{message:"这是第二个message!" } }) var vm3=new Vue({el:"#app3", data:{c1:true } }) var vm4=new Vue({el:"#app4", data:{arr:[ { name:"zhangsan"}, { name:"lisi"}, { name:"wangwu"} ] } }) var vm5=new Vue({el:"#app5", data:{massage:"你好坏，我好喜欢！" }, methods:{ck1:function(){alert(this.massage) } } }) var vm6=new Vue({el:"#app6", data:{choice:"" } }) var vm7=new Vue({el:"#axios1", data(){return {info:{name:"default", job:"default", message:"default" } } }, mounted(){axios.get('data.json').then(res=>this.info=res.data) } })

用浏览器打开HTML

文章图片

2.基础指令 2.1 v-bind

【前端|JavaScript学会了，Vue 给你两眼，应该够了，多看一眼（完全没必要！）】顾名思义，绑定，咋绑定，一看就会，上代码(小贴士：上面的html里面都是有的,这里分开讲了)：

html部分

v-bind:title="message"> 此处为使用v-bind动态绑定的信息！

js部分

var vm2=new Vue({el:"#app2", data:{message:"这是第二个message!" } })

效果:内容的提示信息会显示，不明显（我手机拍的）

2.2 v-if v-else

选择判断，一遍过，代码：

html部分

你的选择是c1！你的选择不是c1!

js部分

var vm3=new Vue({el:"#app3", data:{c1:true } })

效果:上面的c1为true，则展示：你的选择是c1！

文章图片

2.3 v-for

for，不陌生，循环，可用于循环遍历有结构的数据（最常用的数组），代码：

html部分

{ {item.name}}

js部分

var vm4=new Vue({el:"#app4", data:{arr:[ { name:"zhangsan"}, { name:"lisi"}, { name:"wangwu"} ] } })

效果:遍历数组内容，用html的列表展示出来

文章图片

2.4 v-on

这玩意就用的有点多了，比如添加一些动作（也就是所说的绑定事件），代码：

html部分

js部分

var vm5=new Vue({el:"#app5", data:{massage:"你好坏，我好喜欢！" }, methods:{ck1:function(){alert(this.massage) } } })

效果:点击按钮，弹出一个提示框信息

文章图片

文章图片

3. 双向绑定(v-model)

顾名思义，在页面上改变内容，model数据模型中的数据也会发生改变，啥玩意，看下图秒懂，上代码：

html部分

v-model="choice"> 你的选择是：{ {choice}},明智的选择！

js部分

var vm6=new Vue({el:"#app6", data:{choice:"" } })

效果：在下拉框中选择内容，下方会对应更新内容！

文章图片

文章图片

4. 异步通信(axios)

啥是通信？我只知道打电话通信，微信、QQ通信都不知道【手动滑稽】，概念差不多啦！
用于前端和后端服务器或者后端编写的接口之间进行交互，后端开发人员（yy：如果你同时也是后端程序猿，那么还是你)给你接口的文档，你来调用、请求这个地址，返回指定信息，你来解析这个信息！

这里有人会说，我学过AJAX，也可以实现通信呀，你说的没错，axios就是使用ajax的，只不过做了封装，你看不见罢了！

html部分

个人简介 { {info.name}} { {info.job}} { {info.message}}

js部分

var vm7=new Vue({el:"#axios1", data(){return {info:{name:"default", job:"default", message:"default" } } }, mounted(){ //顾名思义，挂载函数 // 实现json文件里的data数据和date()函数里的info传值 axios.get('data.json').then(res=>this.info=res.data) } })

data.json文件