Vue模板語法：

模板語法概述：

如何理解前端渲染：把資料填充到HTMl標籤中

2.前端渲染方式

原生js拼接字串，使用前端模板引擎

3.原生js拼接字串

基本上就是將資料以字串的方式拼接到HTML標籤中，

4.使用前端模板引擎

5.模板語法概覽：插值表示式，指令，事件繫結，屬性繫結，樣式繫結，分支迴圈結構

3.2指令

1.指令：指令的本質是自定義屬性，指令的格式：以v-開始（比如：v-cloak）

2.v-cloak指令用法：解決插值表示式存在閃動問題

3.資料繫結指令：v-text填充純文字，v-html填充html片段容易被導致跨站指令碼攻擊，本網站內部資料可用第三方資料不可用

v-pre填充原始資訊

4.資料響應式：html5的響應式：螢幕尺寸的變化導致樣式的變化，資料的響應式：資料的內容的變化會導致頁面內容的變化；資料繫結：把資料填充到標籤中；V-once：只編譯一次

3.3雙向資料繫結

1.

2.v-model指令雙向繫結

            <input type="text" v-model="msg">

3.MVVM設計思想

M（model）V（view）VM（View-Model）

從檢視到模型用的是事件監聽，從模型到檢視用的是資料繫結

3.4事件繫結

1.v-on指令和簡寫形式：

            <button v-on:click
 
="num++">點選1</button>
            <button @click="num++">點選2</button>

2.事件函式的呼叫方式：

            <button @click="handle">點選3</button>
            <button @click="handle()">點選3</button>

3.事件函式引數傳遞：

普通引數和事件物件：

        <button @click="handle(123,456,$event)"
 
>點選1</button>

4.事件修飾符：

.stop阻止冒泡

.parent阻止預設行為

            <button @click.stop="handle1">點選</button>

            <a href="http://www.baidu.com" @click.prevent="handle2">百度</a>

5.按鍵修飾符

.enter回車鍵

.delete刪除鍵

                <input type="text" @keyup.delete="handle1" v-model="username">
                <input type="password" @keyup.enter="handleSubmit" v-model="password">

6.自定義按鍵修飾符

全域性config.keyCodes物件

            <input type="text" @keyup.aaa="handle">

摘要自：https://www.bilibili.com/video/BV1vE411871g?p=3