VUE框架简单基础
一个构建用户界面的框架
通过指令，来给DOM元素赋值或者其他操作。
1. 简单的指令及其作用：
在HTML标签中显示数据：
--> {{}}
--> v-text
--> v-html
这三条指令都是给HTML具体标签填充内容，可以是文本，也可以是其他标签
-------------------
--> v-if
--> v-else
这两条命令配合使用，如果变量为true，则插入if所在的标签，否则就插入else所在的标签。
-------------------
--> v-show
如果变量为true则显示v-show所在的标签，否则隐藏v-show所在的标签，即添加属性display: none;
注意和v-if的区别：一个是插入/删除标签的操作，一个是显示/隐藏标签的操作（标签一直都存在）
-------------------
--> v-for 循环数组或者对象{}
--> v-bind 绑定标签的属性，随时修改
--> v-on 为标签绑定事件
例子:
<head>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{v1}}</p>
<p v-text="v1"></p>
<p v-html="v2"></p>
<p v-if="v3">哈哈哈</p>
<p v-else="v3">呜呜呜</p>
<p v-show="v3">嘻嘻嘻</p>
<a v-bind:href="url">{{url}}</a>
<input type="button" v-on:click="showtest"/>
</div>
<div id="fTest">
<ul>
<li v-for="item in d1">
{{item}}
</li>
</ul>
<ul>
<li v-for="(item,index) in d1">
{{index}},{{item}}
</li>
</ul>
<ul>
<li v-for="(val,key) in d2">
{{key}},{{val}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
v1:"哈喽",
v2:"<a>hello</a>",
v3:true，
url:"http://www.baidu.com"
},
methods:{
showtest: function(){
alert(123)
}
}
})
var f = new Vue({
el:"#fTest",
data:{
d1:[11,22,33,44],
d2:{'name':'egon','age':23,'weight':45,'height':180}
}
})
<script>
</body>
2. v-model的使用：
数据的双向绑定：应用于input标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
用户名：<input type="text" v-model="username">
密码：<input type="password" v-model="password">
<input type="button" value="登录" @click="login">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
username:'',
password:''
},
methods:{
login:function () {
console.log(this.username+" "+this.password) #可以直接取到input标签中输入的值，而不必去找到标签，然后再取值
}
}
})
</script>
</body>
</html>
应用在select标签：
<div id="app1">
<select name="city" v-model="v1">
<option value="1">衡水</option>
<option value="2">石家庄</option>
<option value="3">保定</option>
<option value="4">唐山</option>
</select>
<input type="button" value="提交" @click="sel">
</div>
<script>
var c = new Vue({
el:"#app1",
data:{
v1:'1' #默认选中衡水
},
methods:{
sel:function () {
console.log(this.v1)
}
}
})
</script>
3. axios（异步请求）的应用
类似于ajax
主要有两种请求方式：get和post
1.get请求：有两个参数
--->1 请求的url
--->2 请求需要加在url后面的参数params
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="加载数据" @click="load">
<p v-text="v1"></p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
v1:''
},
methods:{
load:function () {
url='index/load/'; #去哪请求数据
var self = this; #这个this指的是vm
axios.get(url,{
params:{
'name':'egon',
'age':13
}
}).then(function (response) {
console.log(this) #这里的this是Windows object，不能取到data中的值
self.v1 = response; #把返回的数据赋值给vm中的变量v1
console.log(response)
}).catch(function (err) {
console.log(err)
})
}
}
})
</script>
</body>
</html>
2.post请求
有三个参数：
-->1 url,往哪发送数据
-->2 {},要发送的数据，最外层是字典，数据以键值对存在
-->3 {},携带请求头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="app">
用户名：<input type="text" v-model="username">
密码：<input type="password" v-model="pwd">
<input type="button" value="提交" @click="login">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
username:'',
pwd:''
},
methods:{
login:function () {
url='hotcity.json';
axios.post(url,
{
username:this.username,
pwd:this.pwd
},{
'headers':{'Content-Type':'application/x-www-form-urlencode'}
}).then(function (response){
console.log(response)
}).catch(function (err){
})
}
}
});
</script>
</body>
</html>
二、通过脚手架创建VUE工程：
--> 安装脚手架
npm install vue-cli -g
-->创建基于webpack模板的项目
vue init webpack myProject
-->进入项目并安装依赖
cd myProhect
npm install
-->启动项目
npm run dev
