学习了v-once和v-pre

2 years ago · cd1c55d56e
parent 0184ae76b3
commit cd1c55d56e
2 changed files with 79 additions and 0 deletions
--- a/15_内置指令/4.v-once_指令.html
+++ b/15_内置指令/4.v-once_指令.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>v-once</title>
+</head>
+<body>
+<!--
+v-bind: 单向绑定，可简写为 :xxx
+v-model: 双向绑定
+v-for: 循环逻辑
+v-on: 绑定监听事件，可简写为 @xxx
+v-if\v-else: 条件逻辑
+v-show: 条件渲染
+v-text: 所在标签替换文本
+v-html: 将文本渲染成html代码，具有安全隐患
+v-cloak: 在vue.js加载完成前加载html代码，结合css防闪烁 无需赋值
+v-once：指定节点仅在初始化时渲染，之后不在更新
+-->
+<div id="root">
+    <h2 v-once>n的初始值：{{n}}</h2>
+    <h2>当前n值：{{n}}</h2>
+    <button @click="n++">n+1</button>
+</div>
+<script type="text/javascript" src="../vue.js"></script>
+</body>
+
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 创建Vue实例
+    const x = new Vue({
+        el: '#root',
+        data: {
+            n: 1,
+        }
+    })
+</script>
+</html>
--- a/15_内置指令/5.v-pre_指令.html
+++ b/15_内置指令/5.v-pre_指令.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>v-pre</title>
+</head>
+<body>
+<!--
+v-bind: 单向绑定，可简写为 :xxx
+v-model: 双向绑定
+v-for: 循环逻辑
+v-on: 绑定监听事件，可简写为 @xxx
+v-if\v-else: 条件逻辑
+v-show: 条件渲染
+v-text: 所在标签替换文本
+v-html: 将文本渲染成html代码，具有安全隐患
+v-cloak: 在vue.js加载完成前加载html代码，结合css防闪烁 无需赋值
+v-once：指定节点仅在初始化时渲染，之后不在更新
+v-pre：对应节点不会解析，用于跳过没有指令和插值语法的节点
+-->
+<div id="root">
+    <h2 v-pre>Vue的v-pre质量</h2>
+    <h2 v-pre>当前n值：{{n}}</h2>
+    <button @click="n++">n+1</button>
+</div>
+<script type="text/javascript" src="../vue.js"></script>
+</body>
+
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 创建Vue实例
+    const x = new Vue({
+        el: '#root',
+        data: {
+            n: 1,
+        }
+    })
+</script>
+</html>