<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Vue学习</title>
<!--引入vue.js-->
<script src="vue.js"></script>
<!--axios.js-->
<script src="axios.min.js"></script>
</head>
<body>
<!--挂载点，表示vue的作用域-->
<div id="root">
<!--通过指令显示内容-->
<h1 v-text="text"></h1><br>
<!--根据实例中的data数据显示内容-->
<h2>{{msg}}</h2><br>
<!--v-on:指令，简写@-->
<div v-on:click="alert()">点我试试</div><br>
<!--属性绑定 v-bind:指令，简写 -->
<div v-bind:title="title">这是验证属性双向绑定</div><br>
<!--数据双向绑定：v-model指令-->
<input v-model="content" style=" 30%;"/><!--双向绑定指令v-model，输入框值改变，content的数据也会变化-->
<div>{{content}}</div><br>
<!--侦听器，监听数据发生变化-->
<div>
姓：<input v-model="xing" />
名：<input v-model="ming" />
计数：{{count}}
</div><br>
<!--初始化页面数据-->
<div>
原数据：<input v-model="oldVlue" />
</div><br>
<!--v-if指令，为真显示，为假隐藏-->
<button @click="handleClick()">点击切换</button>
<div v-if="show">这是验证v-if指令</div>
<div v-show="show">这是验证v-show指令</div><br>
<!--v-for指令，循环操作-->
<div>
v-for指令：
<ul v-for="item of list"> <!--或者 item in list-->
<li>{{item}}</li>
</ul>
</div>
<!--vue的ajax练习-->
<div>
<input type="text" :name="users.getname" v-model="users.getname" placeholder="姓名">
<input type="text" :age="users.getage" v-model="users.getage" placeholder="年龄">
<button @click="sendGetajax">发送get请求</button>
</div><br>
<div>
<input type="text" :name="users.postname" v-model="users.postname" placeholder="姓名">
<input type="text" :age="users.postage" v-model="users.postage" placeholder="年龄">
<button @click="sendPostajax">发送post请求</button>
</div><br>
</div>
</body>
<script>
//创建一个vue实例
new Vue({
el: "#root", //vue实例和id="root"的dom做了绑定
//模板template，挂载点里边的内容
template: '', //一般不这么写，直接放在页面中
data: { //vue实例中的所有数据
msg: '大家好，vue大法好',
text: '这是h1内容',
title: '这是div的title属性里的内容', //用的比较少
content: '这是数据单项绑定显示的文本值',
xing: '',
ming: '',
count: 0,
show: true,
list: [
'联想', '百度', '腾讯', '阿里'
],
oldVlue: '',
//ajax测试数据
users: {
getname: '',
getage: '',
postname: '',
postage: '',
}
},
mounted () {
this.oldVlue = '初始化页面数据'; //页面初始化完成后执行的操作，一般编辑时使
},
methods: { //事件写在这里边
alert: function(){
alert('试试就试试');
},
//v-if,v-show进行验证
handleClick: function(){
this.show = !this.show;
},
//get提交
sendGetajax: function () {
//2.get通过params选项
axios.get(`http://www.baidu.com`,{
params:{
name:this.users.getname,
age:this.users.getname
}
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error);
});
},
//post请求
sendPostajax: function(){
console.log(this.users.postage);
axios.post('/post.php', {
pname: this.users.postname,
page: this.users.postage
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
},
//侦听器watch
watch: {
xing: function(){
this.count++;
},
//这种可以带参数，得到新老数据
ming: function(aa, bb){
console.log(aa);
console.log(bb);
this.count++;
},
},
});
</script>
</html>