准备工作:IDEA安装vue.js插件
IDEA中File ->setting -> plugins
搜索vue下载安装
第一个vue程序
在script标签中, 定义一个Vue对象,对象中有el:id属性,data:数据属性
使用vue的v-bind属性,将数据进行绑定。
以下代码是将message数据和span标签的title属性进行绑定,当message改变时,span标签的title属性也将改变
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>firstvue</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
{{message}}
<br/>
<!-- v-bind : 绑定 -->
<span v-bind:title="message">span标签</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
//Model层 : 数据
data: {
message:"Hello World!"
}
});
</script>
</body>
</html>
if…else…使用
在vue中,if和else使用v-if,v-else,v-else-if使用
<body>
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<div id="app1">
<h1 v-if="num==='A'">A</h1>
<h1 v-else-if="num==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm1 = new Vue({
el: "#app",
data: {
ok: false,
}
});
var vm2 = new Vue({
el: "#app1",
data: {
num: "A",
}
});
</script>
</body>
</html>
在浏览器控制台修改vm1.ok=true时,h1标签显示Yes
修改vm1.ok=false时,h1标签显示No
循环的使用
和java中for(int a : arr)类似
在vue中, 使用的是 v-for = “item in items”,其中,items是数组
<body>
<div id="app1">
<ol>
<li v-for="item in items">
{{ item.message }}
</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm1 = new Vue({
el: "#app1",
data: {
items: [
{message: 'aaaa'},
{message: 'bbbb'},
{message: 'cccc'}
]
}
});
</script>
</body>
事件
给按钮添加v-on:clicked属性
在Vue对象中,function函数一定要写在methods内部,
<body>
<div id = "app1">
<button v-on:click="sayHi" style="color: red; width: 300px; height: 100px; font-size: 4em">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app1",
data: {
message: 'hello'
},
methods: { //方法必须定义再Vue的Method中, v-on绑定事件
sayHi: function () {
alert(this.message);
}
}
});
</script>
</body>
可以控制台更改vm的message属性,来更改function函数弹出的信息
双向绑定
通过v-model属性,将前台数据和后端数据绑定,只要更改一个,另外一个就会更改
<div id="app">
请输入文本:<input type="text" v-model="message">
{{message}}
<br/><br/><br/><br/>
文本框输入<textarea name="" id="" cols="30" rows="10" v-model="textareaMessage"></textarea>
{{textareaMessage}}
<br/><br/><br/><br/>
单选按钮
<input type="radio" name="sex" value="男" v-model="radioMessage">男
<input type="radio" name="sex" value="女" v-model="radioMessage">女
{{radioMessage}}
<br/><br/><br/><br/>
下拉列表
<select name="" id="sel" v-model="selectMessage">
<option value="" disabled>--请选择--</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
{{selectMessage}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "",
textareaMessage: "",
radioMessage: "",
selectMessage: "",
}
});
</script>
</body>
后面显示的消息都是对应message的消息,只不过打印出来了而已,当更改输入消息时,后面显示会同步更改,当控制台更改message消息是,对应输入框的消息也会更改