Vue模版语法
2020-09-13 本文已影响0人
想吃热干面了
制作一个自用的Vue模版
1.创建一个简单的模版代码
<div id="app">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！"
}
})
</script>
2.将代码设置为模版
-
file-setting-Live templates-vue-将上面的代码复制到框中
vue模版.png
-
设置define-将Html选择上
vue模版2.png
-
之后创建新的html时，只需输入vue再按tab键，就可启用模版
vue模版3.png
插值操作
Mustache语法(也就是"｛｛｝｝"双大括号)
<div id="app">
{{message}}
</div>
mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式
<h2>{{message}}</h2>
<h2>{{message}},李银河!</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
v-once
某些情况下，我们不希望界面随意的跟随改变，这个时候，我们就可以用v-once这个Vue指令
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！"
}
})
</script>
v-html
某些情况下，从服务器请求的数据本身就是一个HTML代码，如果直接通过{{}}输出，会将HTML代码也一块输出，这是后就用v-html指令来解析显示对应内容
v-html指令：后面往往会跟上一个string类型
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url">{{url}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！",
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
v-text
v-text不灵活，不推荐使用
v-text的作用和Mustache比较相似，都是用于将数据显示在界面上。通常情况下，接受一个string类型
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！"
}
})
</script>
v-pre
跳过元素和它子元素的编译过程，用于显示原本的Mustache语法
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！"
}
})
</script>
v-cloak
在vue解析之前，div中有一个属性c-cloak，解析之后，就没有这个属性了，防止js解析慢，暴漏信息。基本不用，了解就好
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function () {
const app = new Vue({
el: "#app",
data: {
message: "你好啊！"
}
})
},1000)
</script>
