学习了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>