JavaScript学会了，Vue 给你两眼，应该够了，多看一眼？完全没必要！
每个时代，都不会亏待快速学习的人！
把我的上一篇文章瞅一眼之后，vue让你多瞅一眼，给自己30分钟吧，（10分钟学习，20分钟思考人生！）
上一篇文章：Java基础语法学会了，JavaScript瞄一眼就行，瞅第二眼我看不起你！
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/[email protected]/dist/vue.js
- 我的vue.min.js文件
- 编写HTML页面
这个html包含了下面所有的内容，直接cp就可以用了，记得资源文件带上！
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">{
{message}}div>
<hr>
<div id="app2">
<span v-bind:title="message">
此处为使用v-bind动态绑定的信息！
span>
div>
<hr>
<div id="app3">
<p v-if="c1">你的选择是c1！p>
<p v-else>你的选择不是c1!p>
div>
<hr>
<div id="app4">
<ol>
<li v-for="item in arr">
{
{item.name}}
li>
ol>
div>
<hr>
<div id="app5">
<button v-on:click="ck1">请按住我button>
div>
<hr>
<div id="app6">
<select v-model="choice">
<option value="" disabled>请选择你的爱好：option>
<option>Coption>
<option>Javaoption>
<option>Pythonoption>
<option>Otheroption>
select>
<p>你的选择是：{
{choice}},明智的选择！p>
div>
<hr>
<div id="axios1">
<p>个人简介p>
<ul title="个人简介">
<li>{
{info.name}}li>
<li>{
{info.job}}li>
<li>{
{info.message}}li>
ul>
div>
<script src="vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
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)
}
})
script>
body>
html>
- 用浏览器打开HTML
2.基础指令
2.1 v-bind
顾名思义，绑定，咋绑定，一看就会，上代码(小贴士：上面的html里面都是有的,这里分开讲了)：
html部分
<div id="app2">
<span v-bind:title="message">
此处为使用v-bind动态绑定的信息！
span>
div>
js部分
var vm2=new Vue({
el:"#app2",
data:{
message:"这是第二个message!"
}
})
效果:内容的提示信息会显示，不明显（我手机拍的）
2.2 v-if v-else
选择判断，一遍过，代码：
html部分
<div id="app3">
<p v-if="c1">你的选择是c1！p>
<p v-else>你的选择不是c1!p>
div>
js部分
var vm3=new Vue({
el:"#app3",
data:{
c1:true
}
})
效果:上面的c1为true，则展示：你的选择是c1！
2.3 v-for
for，不陌生，循环，可用于循环遍历有结构的数据（最常用的数组），代码：
html部分
<div id="app4">
<ol>
<li v-for="item in arr">
{
{item.name}}
li>
ol>
div>
js部分
var vm4=new Vue({
el:"#app4",
data:{
arr:[
{
name:"zhangsan"},
{
name:"lisi"},
{
name:"wangwu"}
]
}
})
效果:遍历数组内容，用html的列表展示出来
2.4 v-on
这玩意就用的有点多了，比如添加一些动作（也就是所说的绑定事件），代码：
html部分
<div id="app5">
<button v-on:click="ck1">请按住我button>
div>
js部分
var vm5=new Vue({
el:"#app5",
data:{
massage:"你好坏，我好喜欢！"
},
methods:{
ck1:function(){
alert(this.massage)
}
}
})
效果:点击按钮，弹出一个提示框信息
3. 双向绑定(v-model)
顾名思义，在页面上改变内容，model数据模型中的数据也会发生改变，啥玩意，看下图秒懂，上代码：
html部分
<div id="app6">
<select v-model="choice">
<option value="" disabled>请选择你的爱好：option>
<option>Coption>
<option>Javaoption>
<option>Pythonoption>
<option>Otheroption>
select>
<p>你的选择是：{
{choice}},明智的选择！p>
div>
js部分
var vm6=new Vue({
el:"#app6",
data:{
choice:""
}
})
效果：在下拉框中选择内容，下方会对应更新内容！
4. 异步通信(axios)
啥是通信？我只知道打电话通信，微信、QQ通信都不知道【手动滑稽】，概念差不多啦！
用于前端和后端服务器或者后端编写的接口之间进行交互，后端开发人员（yy：如果你同时也是后端程序猿，那么还是你)给你接口的文档，你来调用、请求这个地址，返回指定信息，你来解析这个信息！
这里有人会说，我学过AJAX，也可以实现通信呀，你说的没错，axios就是使用ajax的，只不过做了封装，你看不见罢了！
html部分
<div id="axios1">
<p>个人简介p>
<ul title="个人简介">
<li>{
{info.name}}li>
<li>{
{info.job}}li>
<li>{
{info.message}}li>
ul>
div>
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文件
{
"name":"张三",
"job":"偷鸡摸狗",
"message":"喜欢在csdn上白嫖！"
}
效果:现在没有效果，会有bug，这里涉及到跨站访问的问题，将在下期文章中进行展示
资源的压缩包，用bandzip等压缩软件打开即可，地址为：helloworld.tar
