学习心得,
Vue模板语法(一)
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue模板语法(一)</title>
<style>
#app-10{
color: red;
}
#app-10gai{
color: green;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app-8">
<span v-once>{{mesg}}</span>
</div>
<hr>
<div id="app-9" v-html="rawHtml">
</div>
<hr>
<div id="app-10" v-bind:id="xiugaiID">{{mesg}}</div>
<hr>
<button id="app-11" v-bind:disabled="clickRemove">Button</button>
<hr>
<div id="app-12" v-if="panduan">{{msg}}</div>
<hr>
<a id="app-13" v-bind:href="hrefUrl">{{msg}}</a>
<hr>
<a id="app-14" v-on:click="doSomething">{{msg}}</a>
<hr>
<form id="app-15" v-on:submit.prevent="onSubmit">
<button>{{msg}}</button>
</form>
<hr>
<!-- 完整语法 -->
<a id="app-16-1" v-bind:href="urls">{{msg}}</a>
<br>
<!-- 缩写 -->
<a id="app-16-2" :href="urls">{{msg}}</a>
<hr>
<!-- 完整语法 -->
<a id="app-17-1" v-on:click="clicks">{{msg}}</a>
<br>
<!-- 缩写 -->
<a id="app-17-2" @click="clicks">{{msg}}</a>
<hr>
<script>
//文本,v-once,通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
var app8 = new Vue({
el:"#app-8",
data:{
mesg:"我爱你悦悦"
}
});
app8.mesg="我很爱你";
//原始HTML,v-html,双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令
var app9 = new Vue({
el:"#app-9",
data:{
rawHtml:"我爱你"
}
});
//特性,v-bind:id="xxx",修改id
var app10 = new Vue({
el:"#app-10",
data:{
xiugaiID:"app-10gai",
mesg:"我是内容,我被修改了ID"
}
});
//v-bind:disabled="xxx",是否添加disabled属性
var app11 = new Vue({
el:"#app-11",
data:{
clickRemove:true
}
});
//指令,v-,指令属性的值预期是单个 JavaScript 表达式
var app12 = new Vue({
el:"#app-12",
data:{
msg:"我在这里你能看到我吗",
panduan:true
}
});
//参数,v-bind:href="xxx",告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
var app13 = new Vue({
el:"#app-13",
data:{
msg:"我是个链接目标是百度",
hrefUrl:"http://www.baidu.com"
}
});
//v-on:click,它用于监听 DOM 事件
var app14 = new Vue({
el:"#app-14",
data:{
msg:"点我触发事件",
doSomething:function(){
alert("触发了弹窗");
}
}
});
//修饰符,修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
// 例如，.prevent 修饰符告诉 v-on
// 指令对于触发的事件调用 event.preventDefault()：
var app15 =new Vue({
el:"#app-15",
data:{
msg:"修饰符",
onSubmit:function(){
event.preventDefault();
}
}
});
//缩写,v-bind缩写,:
var app161 = new Vue({
el:"#app-16-1",
data:{
msg:"缩写v-bind,1",
urls:"http://www.baidu.com"
}
})
//缩写,v-bind缩写,:
var app162 = new Vue({
el:"#app-16-2",
data:{
msg:"缩写v-bind,2",
urls:"http://www.baidu.com"
}
})
//缩写,v-on缩写,@
var app171 = new Vue({
el:"#app-17-1",
data:{
msg:"缩写v-on,1",
clicks:function(){
alert("我触发点击事件1了");
}
}
})
//缩写,v-on缩写,@
var app172 = new Vue({
el:"#app-17-2",
data:{
msg:"缩写v-on,2",
clicks:function(){
alert("我触发点击事件2了");
}
}
})
</script>
</body>
</html>
网友评论