vue.js模板语法demo
2017-12-19 本文已影响8人
张小小小七
html & css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<style>
.text-color{
color: red;
}
</style>
<body id="body">
<!--文本插值-->
<div id="app">
<p>{{ message }}</p>
</div>
<!--Html:v-html-->
<div id="app2">
<p v-html="message2"></p>
</div>
<!--属性:v-bind-->
<div id="app3">
<lable for="check">修改下面hello world的颜色</lable>
<input id="check" type="checkbox" v-model="hasTextColor">
<!--注意：v-bind后是冒号“：”；class="{'a',a}"外有双引号，style类有单引号-->
<p v-bind:class="{'text-color':hasTextColor}">hello world</p>
</div>
<!-- 表达式-->
<div id="app4">
<p>{{ 5+5 }}</p>
<p>{{ok?"yes":"no"}}</p>
<p v-bind:id="'p-'+id">{{ok?"id:"+id:"ok:"+ok}}</p>
</div>
<!-- 指令-->
<div id="app5">
<lable for="cc">是否可见</lable>
<input id="cc" type="checkbox" v-model="seen">
<!-- v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。-->
<p v-if="seen">你可以看见我啦</p>
</div>
<!-- 参数-->
<div id="app6">
<a v-bind:href="url">好123网</a>
<button v-on:click="doAdd">添加</button>
<!-- v-bind 缩写-->
<a :href="url2">菜鸟网</a>
<!-- v-on 缩写-->
<button @click="doAdd">添加</button>
</div>
<!-- 修饰符-->
<!-- 用户输入-->
<div id="app7">
<lable for="name">姓名</lable>
<label>{{name}}</label>
<input id="name" type="text" v-model="name">
</div>
<!-- 过滤器-->
<div id="app8">
<label>{{name|filter}}</label>
</div>
</body>
<!-- 引入js-->
<script src="js/vue.js"></script>
<script src="js/demo.js"></script>
</html>
js
new Vue({/*文本插值*/
el:'#app',
data: {
message:'文本插值!'
}
});
new Vue({ /*Html */
el:'#app2',
data: {
message2:'<h4>Html !</h4>'
}
});
new Vue({/*属性 */
el:'#app3',
data: {
hasTextColor:false
}
});
new Vue({/*表达式*/
el:'#app4',
data: {
ok:true,
id:"one"
}
});
new Vue({/*指令*/
el:'#app5',
data: {
seen:true
}
});
new Vue({/*参数*/
el:'#app6',
data: {
url:"http://www.hao123.com",
url2:"http://www.runoob.com"
},
methods:{
doAdd:function () {
alert("add!");
}
}
});
new Vue({/*用户输入*/
el:'#app7',
data: {
name:"zhangyanqi"
}
});
new Vue({/*过滤器*/
el:'#app8',
data: {
name:"app8"
},
filters:{
filter:function (value) {
/* value = value.toString();*/
return value+"!"
}
}
});
