java-microservice-01-vue-02-introduction
Vue常见用法
先来看个完整例子：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>advance</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<!--绑定属性-->
<div id="d1" v-bind:title="title1">
<!--普通文本渲染-->
message：{{message}}<br/>
<!--条件判断-->
<span v-if="showAge">年龄：1</span><br/>
<!--for循环-->
name:<span v-for="name in names"><span>{{name}} </span></span><br/>
<!--v-on事件监听-->
<button v-on:click="cli">点击改变时间</button>
<br/>
<!--双向绑定-->
<span>{{ inp }}</span><br/>
<input type="text" v-model="inp"/>
<!--组件化：注意自定义名和参数避免使用大写特殊符-->
<comp v-for="name in names" v-bind:param="name"/>
</div>
<script>
<!--定义组件-->
Vue.component("comp",{
<!--入参-->
props:["param"],
<!--模板-->
template:"<li>{{param}}</li>"
})
var vm = new Vue({
<!--组件-->
el: "#d1",
<!--数据-->
data: {
message: "普通文本",
title1: "提示",
showAge:true,
names:["张三","李四"],
inp:""
},
<!--方法-->
methods:{
cli:function(){
this.message = Date();
}
}
})
</script>
</body>
</html>
- 绑定属性：
v-bind:[attribute]=[value]
- 普通文本渲染：
{{[value]}}
- 条件判断：
v-if=[bool/condition]
- for循环：
v-for=[item] in [items]
- 事件监听：
v-on:[event]=[methodName]
- 双向绑定：
v-model=[value]
- 自定义组件：
参考上述comp组件
