<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                [TOC] >[success] # 常用模版語法講解 1. **v-text 與 {{}}** :用來渲染純文字 2. **v-html** :用來渲染標簽 3. **v-bind**:動態屬性 4. **v-once**:元素中的變量只使用一次 5. **v-if** :顯示/隱藏重新渲染頁面元素 6. **v-show** :顯示/隱藏元素,不重新渲染dom元素(display:none,來會切換顯示隱藏) 7. **v-on** :定義事件,例如:**click** 之類的 8. **簡寫形式**:**v-on** 以及 **v-bind** 等等的簡寫 9. **動態屬性**:**動態** 給 **屬性名** 或者 **事件名** 賦值 10. **事件修飾符**:**阻止冒泡事件** 等等的一些 **語法糖** >[success] ## v-text 與 {{}} 如果我們想在頁面渲染一個 **data** 中的 **變量** ,可以使用 **v-text** 如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, template: '<div v-text="message"></div>' }) const vm = app.mount('#root') </script> </html> ~~~ 或者使用 **{{}}** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, template: '<div>{{message}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ **v-text** 與 **{{}}** 的區別:**v-text** :**將數據解析為純文本,不能輸出真正的 html** ,與 **花括號** 的區別是在頁面加載時不顯示 **{{}}** >[success] ## v-html 如果我們想 **動態** 在 **字符串中拼接標簽** 并且 **展示在頁面上** ,我們可以使用 **v-html** ,如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: '<strong>hello world</strong>' } }, template: '<div v-html="message"></div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## v-bind 如果我們想 **動態給標簽添加屬性** 時,可以使用 **v-bind** ,代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, // template: '<div v-bind:title="message">{{message}}</div>' // 或者 // template: '<div :title="message">{{message}}</div>' // 或者可以寫一些表達式 template: '<div :title="message">{{ message ? "1" : "0" }}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## v-once **需求** :**只想展示第一次變量中展示的數據**,以后 **變量改變了,頁面展示的數據也不跟隨改變**,可以使用 **v-once** ,它的意思是 **元素中的變量只使用一次** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, template: '<div v-once>{{message}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## v-if 應用場景:適用于 **不頻繁顯示隱藏元素** 的需求,如果 **頻繁顯示隱藏** ,可使用 **v-show** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world', show: true } }, template: '<div v-if="show">{{message}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## v-show 應用場景:適用于 **頻繁顯示隱藏** index.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world', show: true } }, template: '<div v-show="show">{{message}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## v-on **應用場景**:給元素添加事件時,例如: **給一個元素,添加click事件**,代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world', show: true } }, methods: { handleClick(){ alert('click') } }, template: '<div v-on:click="handleClick">{{message}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ 這里要注意,**方法 一定要寫在 methods** 中。 >[success] ## 簡寫形式 1. **v-on:click** 可以寫成 **@click** 2. **v-bind:title** 可以寫成 **:title** >[success] ## 動態屬性 **應用場景**:假如說元素身上的 **屬性名或者事件名不確定** ,可以用一個 **變量的形式來定義動態定義屬性** ,代碼如下: **index.htrml** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world', show: true, name: 'title', // 屬性名稱 event: 'click' // 事件名稱 } }, methods: { handleClick(){ alert('click') } }, template: '<div @[event]="handleClick" :[name]="message">{{message}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 事件修飾符 **應用場景** :以前 **js 阻止冒泡默認事件** 都用 **event對象** 下的自帶方法,例如:**e.preventDefault()** ,現在 **vue** 中有了新的方式 **語法糖** 解決同樣問題,代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常用模版語法講解</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world', show: true, name: 'title', // 屬性名稱 event: 'click' // 事件名稱 } }, methods: { handleClick(){ alert('click') } }, template: ` <form action="https://www.baidu.com" @click.prevent="handleClick"> <button type="submit">提交</button> </form> ` }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看