前端页面页面渲染方式
- 数据:数据绑定
- 选择
- 循环
- 事件
数据绑定
- 双括号显示数据
- v-bind
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue取值和v-bind</title>
</head>
<body>
<!--view层-->
<div id="app">
{{message}}
<br>
<span v-bind:title="message">
鼠标悬浮时显示message中的内容。
</span>
</div>
<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,vue!"
}
});
</script>
</body>
</html>
上面这段代码就把数据绑定的两种方式都用上了,可以使用{{}}方式取数据显示在页面中,也可以通过v-bind指令来取数据。
选择:v-if指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
</head>
<body>
<!--view层-->
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<h1 v-if="type=='A'">A</h1>
<h1 v-else-if="type=='B'">B</h1>
<h1 v-else-if="type=='C'">C</h1>
<h1 v-else>D</h1>
</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",
data: {
ok: true,
type: 'A'
}
});
</script>
</body>
</html>
通过v-if指令、v-else-if指令、v-else指令可以实现选择条件渲染数据。
循环:v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<!--view层-->
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</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",
data: {
items: [
{message: 'Java'},
{message: 'Vue'},
{message: '运维'}
]
}
});
</script>
</body>
</html>
数据的遍历可以通过v-for指令来实现,关键词是in。
事件:v-on指令绑定事件方法
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on</title>
</head>
<body>
<!--view层-->
<div id="app">
<button v-on:click="sayHi">click me</button>
</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",
data: {
message: "hello"
},
methods: { //方法必须定义在vue的method中
sayHi: function(){
alert(this.message);
}
}
});
</script>
</body>
</html>
事件绑定可以通过v-on指令实现,将方法写在vue对象的methods属性中,在通过v-on指令绑定事件。
这就是最基本的vue语法,通过这几个指令就能实现最基本的数据展示页面渲染,操作后端传过来的数据。这样最基本的网页功能就能实现了。