基础语法指令
-
v-bind
现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新!
??我们还可以使用v-bind来绑定元素特性!
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<!-- { {message} }-->
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<!-- 1.导入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,Vue"
}
});
</script>
</body>
</html>
你看到的v-bind等被称为指令。
指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。
??如果你再次打开浏览器的JavaScript控制台， 输入app， message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。
2、v-if， v-else，v-else-if
条件判断语句，以下两个属性!
- v-if
- else-if
- v-else
三个等号在JS中表示绝对等于(就是数据与类型都要相等)
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<!-- <hi v-if="ok">Yes</hi>-->
<!-- <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>
<!-- 1.导入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:{
//ok: true
type: ‘B‘
}
});
</script>
</body>
</html>
v-for
-
v-for
格式：
<div id="app">
<li v-for="(item,index) in items">
{ {item.message} }---{ {index} }
</li>
</div>
注：items是数组，item是数组元素迭代的别名。Thymeleaf模板引擎的语法和这个十分的相似！
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!-- 1.导入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: ‘前端‘},
{message: ‘运维‘}
]
}
});
</script>
</body>
</html>