基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<p>{{content}}</p>
<p>{{show("小明")}}</p>
<p>{{show("小宏")}}</p>
</div>
<script type="text/javascript">
var vue = new Vue({
el : "#app",
data : {
title: "今天好热啊",
content: "杭州一下子进入夏天了"
},
methods: {
show : function(name){
return "我的名字叫"+name+",我是通过调用show方法显示出来的";
}
}
});
console.log(vue.title);
console.log(vue.show("张三"));
console.log(vue.$data.title);
console.log(vue.$data);
console.log(vue.$el == document.getElementById("app"));
</script>
</body>
</html>
v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p v-html="message"></p>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
message: "<a href='https://www.baidu.com'>百度一下</a>"
}
});
</script>
</body>
</html>
v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style>
.red{
color: red;
}
.green{
color: green;
}
.max{
font-size: 56px;
}
.min{
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:title="title">{{message}}</p>
<input type="text" :value="myname"/>
<a :href="url">百度一下</a>
<input type="button" value="按钮" :disabled="!btnEnabled" onclick="vue.btnEnabled = false"/>
<input type="button" value="修改myname的值" onclick="vue.myname = '李四'"/>
<p :class="{'red':wrong, 'green':!wrong, 'max': wrong,'min': !wrong}">带样式的段落</p>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
message: "段落",
title: "段落标题",
myname: "张三",
url: "https://www.baidu.com",
btnEnabled : true,
wrong: false
}
});
</script>
</body>
</html>
v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="days == 1">星期一</p>
<p v-else-if="days == 2">星期二</p>
<p v-else>其他</p>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
days : 2
}
});
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in news"><a :href="'detail?newsid='+item.newsId">{{item.title}}</a></li>
</ul>
<select>
<option v-for="item in citys" :value="item.cityCode">{{item.city}}</option>
</select>
<table border="1">
<tr>
<th>序号</th>
<th>名字</th>
</tr>
<tr v-for="(item,index) in names">
<td>{{index+1}}</td>
<td>{{item}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
news : [
{newsId:1,title:'title1',content:'content1'},
{newsId:2,title:'title2',content:'content2'},
{newsId:3,title:'title3',content:'content3'}
],
citys: [
{cityCode: "0571", city: "杭州"},
{cityCode: "0572", city: "宁波"},
{cityCode: "0573", city: "温州"}
],
names : ["张三","张思","张无"]
}
});
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="isInsert">新增</div>
<div v-show="isUpate">修改</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
isUpate : true,
isInsert : false
}
});
</script>
</body>
</html>
v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="count"/>
<input type="button" value="点击+1" v-on:click="count=count+1" />
用户名:<input type="text" v-model.lazy.trim="user.username"/>
<br/>
性别:
<input type="radio" name="sex" v-model="user.sex" value="1"/>女
<input type="radio" name="sex" v-model="user.sex" value="2"/>男
<br/>
爱好:
<input type="checkbox" name="hobby" v-model="user.hobby" value="1"/>打游戏
<input type="checkbox" name="hobby" v-model="user.hobby" value="2"/>打游戏
<input type="checkbox" name="hobby" v-model="user.hobby" value="3"/>打游戏
<input type="checkbox" name="hobby" v-model="user.hobby" value="4"/>打游戏
<br/>
<input type="button" value="新增收货地址" onclick="addAddress()"/>
<ul>
<li v-for="item in user.address">
联系人:<input type="text" v-model="item.name"/>
电话号码:<input type="tel" v-model="item.phone"/>
收货地址:<input type="tel" v-model="item.addr"/>
</li>
</ul>
{{user}}
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
user: {
username: null,
sex: 1,
hobby: [],
address: []
},
count : 0
}
});
function addAddress(){
var address = {
name : null,
phone : null,
addr : null
};
vue.user.address.push(address);
}
</script>
</body>
</html>
v-on
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击+1" onclick="vue.increament()"/>
<input type="button" value="点击+1" v-on:click="increament()"/>
<input type="button" value="点击+1" v-on:click="count++"/>
<input type="button" value="点击+1" @click="count++"/>
<span>{{count}}</span>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
count : 1
},
methods: {
increament : function(){
this.count ++;
}
}
});
</script>
</body>
</html>
computed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
计算属性
-->
<div id="app">
用户名:<input type="text" v-model="name">
<br/>
<div v-show="nameInvalid" style="color:red">用户名要求6-18位的字符组成 ,不能以数字开头</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
name : null
},
computed: {
nameInvalid : function(){
if(this.name == null){
return false;
}
var reg = /^[^\d].{5,17}$/;
if(reg.test(this.name)){
return false;
}else{
return true;
}
}
}
});
</script>
</body>
</html>
ajax-get
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax-get请求</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.js"></script>
</head>
<body>
<div id="app">
<h1>用户列表</h1>
<table border="1" width="80%" align="center">
<tr>
<th>序号</th>
<th>用户id</th>
<th>用户名</th>
</tr>
<tr v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.userId}}</td>
<td>{{user.username}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data : {
users : []
},
methods : {
goPage : function(pageNum){
var data = {
username : "lisi",
pageNum: pageNum,
userId: ""
};
var params = {
params : data
};
this.$http.get("user/select",params).then(
(resp) => {
console.log(resp);
this.users = resp.body;
},
(resp) => {
console.error("请求失败,"+resp);
}
);
}
},
mounted : function(){
this.goPage(1);
}
});
</script>
</body>
</html>
ajax-post
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.js"></script>
</head>
<body>
<div id="app">
用户名:<input type="text" v-model.lazy.trim="user.username" /> <br /> 性别:
<input type="radio" name="sex" v-model="user.sex" value="1" />女 <input
type="radio" name="sex" v-model="user.sex" value="2" />男 <br /> 爱好: <input
type="checkbox" name="hobby" v-model="user.hobby" value="1" />打游戏 <input
type="checkbox" name="hobby" v-model="user.hobby" value="2" />打游戏 <input
type="checkbox" name="hobby" v-model="user.hobby" value="3" />打游戏 <input
type="checkbox" name="hobby" v-model="user.hobby" value="4" />打游戏 <br />
<input type="button" value="新增收货地址" onclick="addAddress()" />
<ul>
<li v-for="item in user.address">联系人:<input type="text"
v-model="item.name" /> 电话号码:<input type="tel" v-model="item.phone" />
收货地址:<input type="tel" v-model="item.addr" />
</li>
</ul>
<input type="button" value="提交" @click="submitUser()" /> {{user}}
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
user: {
username: null,
sex: 1,
hobby: [],
address: []
},
count : 0
},
methods : {
submitUser : function(){
this.$http.post("user/save",this.user).then(
(resp) => {
console.log(resp);
},
(resp) => {
console.error(resp);
}
);
}
}
});
function addAddress(){
var address = {
name : null,
phone : null,
addr : null
};
vue.user.address.push(address);
}
</script>
</body>
</html>