<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mustache语法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<<div id="app">
{{message}}
<h1>{{ message }},22</h1>
<h2>{{ firstName + lastName }}</h2>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好",
firstName: "kobe",
lastName: "bryant"
}
})
</script>
</body>
</html>
v-once用法 只是初始化一次 不会响应式修改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-once用法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<<div id="app">
{{message}}
<h2 v-once>{{message}}</h2>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好"
}
})
</script>
</body>
</html>
v-clock用法
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-clock</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2> {{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function (){
const app=new Vue({
el:"#app",
data:{
message: "你好"
}
})
},2000)
</script>
</body>
</html>
···
网友评论