1.Vue的使用
通过new一个Vue对象设置参数来操作某个区域的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"> <!--使用{{key}}获取值-->
{{message}}
<!--三目运算符-->
{{number==10? "Yes":"NO"}}
<!--数学运算-->
{{number+109}}
</div>
</body>
<script>
//view model
//创建Vue对象
new Vue({
el:"#app", //由Vue接管的id为app的区域
data: {
message:"hello,this is my FirstVue!",
number:100
}
})
</script>
</html>
2.基本语法
1.v-on:事件名="方法名([参数])"--- 可简写为@事件名="方法名([参数])"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-no:click</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>绑定click事件</p>{{message}}<br>
<button v-on:click="clicked">点击改变message</button><br><br><hr>
<p>绑定keydown事件</p>
Vue:<input type="text" v-on:keydown="func($event)">
<!--传统js方式-->
<hr>
传统js:<input type="text" onkeydown="showkeyValue()">
</div>
</body>
<script>
//view model
//创建Vue对象
new Vue({
el:"#app", //由Vue接管的id为app的区域
data: {
message:"点击前：哈哈哈"
},
methods:{
clicked:function () {
alert("点击按钮");
this.message="点击后：嘻嘻嘻！";
},
func:function(event){
if(event.keyCode<48 ||event.keyCode>57){
event.preventDefault();
}
}
}
})
//传统js方式
function showkeyValue() {
if(event.keyCode<48 ||event.keyCode>57){
event.preventDefault();
}
}
</script>
</html>
2.事件修饰符
.prevent：阻止默认事件执行，比如阻止表单提交
.stop：停止事件传播行为
<div id="app">
<!--<form action="/www.baidu.com" onsubmit="return func1()">
<input type="submit" value="提交">
</form>-->
<!--
事件修饰符.prevent:阻止默认事件执行
.stop: 停止事件传播行为
-->
<form action="/www.baidu.com" @submit.prevent="submit()">
<input type="submit" value="提交">
</form>
</div>
<script>
new Vue({
el:"#app",
methods:{
submit:function(){
alert("表单提交")
}
}
})</script>
3.v-text，v-html和v-bind
v-text和v-html就和js对象的innertext，innerhtml一样，用于向标签中插入html或text，v-bind用于设置标签属性，v-bind:可以简写为:
<div id="app">
<div v-text="text"></div>
<div v-html="text"></div>
<div style="width:300px;height:100px">
<font v-bind:color="bkcolor">v-bind测试</font>
<font :color="bkcolor1">v-bind简写测试</font>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
text:"<h1>hello</h1>",
bkcolor:"red",
bkcolor1:"blue"
}
});
</script>
4.v-model
当使用v-model时表单元素value，selected，checked会失效，使用v-model时data中的数据会随输入框中的数据改变而改变，是一种双向绑定
<div id="app">
<form action="">
用户名：<input type="text" name="username" v-model="user.username"><br>
密码：<input type="text" name="password" v-model="user.password"><br>
<p>{{user.username}}---{{user.password}}</p>
</form>
</div>
<script>
new Vue({
el:"#app",
data:{
user:{
username:"luo",
password:"123456"
},
}
});
</script>
5.v-for循环
<div id="app">
<h2>遍历数组</h2>
<ui>
<!--item代表数组中的元素，index代表下标-->
<li v-for="(item,index) in arr">{{item}}</li>
</ui>
<h2>遍历对象</h2>
<oi>
<!--这里括号内的变量名可以随意，第一个为对象的属性值，第二个为属性名-->
<li v-for="(val, key) in product">{{key}}=={{val}}</li>
</oi>
<h2>遍历数组对象</h2>
<table>
<tr v-for="(product) in products">
<!--<td>{{product.id}}</td>-->
<!--<td>{{product.name}}</td>-->
<!--<td>{{product.price}}</td>-->
<td v-for="(val) in product">{{val}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
//数组数据
arr:[3,4,2,7,5],
//对象数据
product:{id:1,name:"电脑",price:6000},
//数组对象数据
products:[
{id:7,name:"手机",price:2000},
{id:7,name:"自行车",price:300},
{id:7,name:"电视机",price:2000}
]
}
});
</script>
6.v-if和v-show
都是判断绑定的数据为true/false来展示的，v-if在true时对对数据渲染，在false时会删除包含的代码，而v-show不管是true还是false都会渲染数据，只是对节点设置display：none来隐藏节点。
<div id="app">
<p v-if="Tif">v-if测试</p>
<p v-show="Tshow">v-show测试</p>
<button @click="change()">change</button>
</div>
<script>
new Vue({
el:"#app",
data:{
Tif:true,
Tshow:true
},
methods:{
change:function () {
this.Tif=!this.Tif;
this.Tshow=!this.Tshow;
}
}
});
</script>