一、环境布置
首先安装vue插件
cdn vue.js：主要导入在我们前端页面上
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
?二、第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
message:"hello,vue!"
}
});
</script>
</body>
</html>
?浏览器的控制台输入：
vm.message="hello"
可对浏览器页面上显示的结果进行修改?
三、v-指令?
1、v-bind：绑定
v-bind和{{}}差不多的意思
v-bind:title? ? 鼠标放上信息显示
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-bind:title="message">我是谁！</span>
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
message:"狗!"
}
});
</script>
</body>
</html>
2、v-if，v-else，v-else-if：判断
v-if，v-else
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
ok : true
}
});
</script>
</body>
</html>
v-if，v-else，v-else-if
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="ok==='A'">A</h1>
<h1 v-else-if="ok==='B'">B</h1>
<h1 v-else-if="ok==='C'">C</h1>
<h1 v-else>D</h1>
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
ok : "A"
}
});
</script>
</body>
</html>
3、v-for：循环
不带索引?
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
items:[
{message:"Java"},
{message:"C#"},
{message:"C"}
]
}
});
</script>
</body>
</html>
带索引?
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items">
{{item.message}},{{index}}
</li>
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
items:[
{message:"Java"},
{message:"C#"},
{message:"C"}
]
}
});
</script>
</body>
</html>
4、v-on：事件
各种事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">click me</button>
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
message : "hello,vue"
},
methods : {
sayHi : function () {
alert(this.message);
}
}
});
</script>
</body>
</html>
5、v-model：双向绑定
是两边的messge信息绑定在一起
input：text：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message"/> {{message}}
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
message : "hello,vue"
},
});
</script>
</body>
</html>
?input：radio：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" value="男" v-model="message"/> 男
<input type="radio" value="女" v-model="message"/> 女<br>
选中了:{{message}}
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
message : ""
},
});
</script>
</body>
</html>
select：
disabled属性：不能被选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="message">
<option value="" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select><br>
选中了:{{message}}
</div>
<script>
var vm=new Vue({
el : "#app",
data:{
message : ""
},
});
</script>
</body>
</html>
?四、组件
类似于Thymeleaf的th:fragment
初体验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ly></ly>
</div>
<script>
Vue.component("ly",{
template: '<li>java</li>'
});
var vm=new Vue({
el : "#app"
});
</script>
</body>
</html>
实现组件中数据的动态：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ly v-for="item in items" v-bind:pr="item"></ly>
</div>
<script>
Vue.component("ly",{
props : ['pr'],
template: '<li>{{pr}}</li>'
});
var vm=new Vue({
el : "#app",
data : {
items : ["Java","C","C#"]
}
});
</script>
</body>
</html>
|