提交 8f5e815d 编写于 作者: 奋斗的小菜菜's avatar 奋斗的小菜菜 🥊

测试

上级 dacee149
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
...@@ -8,35 +9,36 @@ ...@@ -8,35 +9,36 @@
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script> <script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css"> <style type="text/css">
[v-cloak]{ [v-cloak] {
display: none; display: none;
} }
</style> </style>
<body> <body>
<!--数据的响应式--> <!--数据的响应式 -->
<div id="app"> <div id="app">
<div>{{msg}}</div> <div>{{msg}}</div>
<div>{{msg1}}</div> <div>{{msg1}}</div>
<div v-cloak>{{1 + 1}}</div> <div v-cloak>{{1 + 1}}</div>
<div v-text='msg'></div> <div v-text='msg'></div>
<div v-html='msg2'></div> <div v-html='msg2'></div>
<div v-pre>{{msg}}</div> <!--显示原始内容 不编译--> <div v-pre>{{msg}}</div>
<div v-once>{{msg3}}</div> <!--v-once只编译一次--> <!--显示原始内容 不编译-->
<div v-once>{{msg3}}</div>
<!--v-once只编译一次-->
</div> </div>
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
var vm = new Vue({ var vm = new Vue({
el:'#app', //元素的挂载位置 el: '#app', //元素的挂载位置
data:{ //元素的数据 data: { //元素的数据
msg:"hello Vue", //数据元素 msg: "hello Vue", //数据元素
msg1:"text", msg1: "text",
ss:"dsa1", ss: "dsa1",
msg2:"<H1>html<H1>", msg2: "<H1>html<H1>",
msg3:"v-once" msg3: "v-once"
} }
}); });
</script> </script>
<!-- <!--
v-cloak指令的用法 解决闪动问题 v-cloak指令的用法 解决闪动问题
...@@ -54,4 +56,5 @@ var vm = new Vue({ ...@@ -54,4 +56,5 @@ var vm = new Vue({
v-once:如果显示的信息后续不在需要修改那么就用v-once 提高程序的的性能 v-once:如果显示的信息后续不在需要修改那么就用v-once 提高程序的的性能
--> -->
</html> </html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册