vue.js入門開發

vue {{}} 雙向資料綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{}} 用于标簽内顯示資料 -->
        Hello , {{msg}}  <br>  
        <!-- v-model 進行資料雙向綁定 -->
        <input type="text"  v-model="msg">
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:'#app',  // 指定被vue管理的入口,值為選擇器，不可以指定body或者html
            data:{  // 初始化資料，在vue執行個體管理的Dom節點下，可以通過模闆請求來引用
                msg: '你好啊，王佳偉同學，你最棒！' 
            }
        })
    </script>
</body>
</html>

MVVC 模型

MVVC模型是 Model-View-ViewModel 的縮寫，是一種軟體架構風格。

他的哲學思想上：

通過資料驅動視圖：把需要改變的視圖資料初始化到Vue中，然後再通過修改Vue中的資料，進而實作對視圖的修改更新。
聲明式程式設計：按照vue的特定文法聲明開發就可以實作相應功能，不需要直接操作Dom元素。
指令式程式設計：需要擷取Dom元素。jquery就是需要手動操作才能實作功能。

Model - 代表模型，就是資料對象，data

View - 代表視圖，就是模闆頁面

ViewModel - 視圖模型，本質上就是Vue執行個體

原理哈！ view 的值被更改了之後，DOM Listeners 監聽到輸入框的值發生改變之後，會将 Model 中的資料進行更新。更新了之後，在通過 Data Bindings 資料綁定，将更新的Model中的資料渲染到 View 頁面。

上面的過程不需要我們開發者手動去進行操作，Vue已經幫我們完成了。我們隻需要在頁面上遵守Vue 的文法規則就可以自動幫我們實作以上功能。

Vue Devtools 插件

Vue Devtools 插件可以讓我們在一個更友好的界面中審查和調試Vue項目。

推薦在浏覽器上安裝 Vue Devtools。

模闆資料綁定渲染

可生成動态的 HTML 頁面，頁面中使用嵌入 Vue.js 文法動态生成。

{{ xxxx }} 雙大括号文本綁定
v-xxx 以 v- 開頭的用于标簽屬性綁定，成為指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        {{JS表達式}}  
    -->
    <div id="app">
        <h3>1. {{}}雙大括号輸出文本内容</h3>
        <!-- 直接擷取文本内容 -->
        <p>{{ msg }}</p>
        <!-- 直接執行JS表達式 -->
        <p>{{ sorce + 1 }}</p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',  
            data:{  
                msg: '王佳偉，你最棒！' ,
                sorce: 100,
            }
        })
    </script>
</body>
</html>

v-once一次性插值

通過 v-once 指令，隻執行一次性的插值，當資料改變的時候，插值處的資料不會被更新。

<h3>一次性插值 v-once</h3>
<p v-once>{{msg}}</p>

使用 v-once 修飾之後，當 msg 資料發生變化時，Dom元素上的資料也不會在更新。如果以後有相應的需求可以使用這個标簽，但是使用的比較少，基本上不會使用，但是以防萬一，遇到類似的需求知道有這個東西。

輸出HTML指令 v-html

允許直接渲染标簽，而不是以文本的方式渲染。

如果想要輸出HTML資料，雙大括号将資料以普通文本的方式輸出，為了輸出真正的HTML效果，需要使用 v-html 指定。

<p>v-html的形式：<span v-html="contentHtml"></span></p>

為了防止 XSS 攻擊。在此指令上做了安全處理，如果發現輸出内容上有script标簽的時候，則不渲染。XSS攻擊主要是利用了JS腳本注入到網頁，讀取cookie，讀取到了之後發送到黑客的伺服器，進而讓黑客可以使用你的賬号資訊做非法操作，還可以進入你的支付，跳轉到釣魚網站。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        {{JS表達式}}  
    -->
    <div id="app">
        <h3>1. {{}}雙大括号輸出文本内容</h3>
        <!-- 直接擷取文本内容 -->
        <p>{{ msg }}</p>
        <!-- 直接執行JS表達式 -->
        <p>{{ sorce + 1 }}</p>
        <h3>一次性插值 v-once</h3>
        <p v-once>{{msg}}</p>
        <h3>指令輸出真正的HTML内容 v-html</h3>
        <p>雙大括号的形式：{{contentHtml}}</p>
        <p>v-html的形式：<span v-html="contentHtml"></span></p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',  
            data:{  
                msg: '王佳偉，你最棒！' ,
                sorce: 100,
                contentHtml:`<span style="color:red">王佳偉，你最棒！
                    <script>alert("我是大傻逼！")<\/script>
                    </span>`
            }
        })
    </script>
</body>
</html>

元素綁定指令 v-bind

完整格式：

v-bind:元素的屬性名='xxxx'

縮寫格式：

:元素屬性名 = 'xxx'

作用：将資料動态綁定到指定元素屬性上面。

事件綁定指令 v-on

完整格式：

v-on:事件名稱="事件處理函數名"

縮寫格式：

@事件名稱 = "事件處理函數名"   注意：@後面沒有冒号

作用：用于監聽DOM事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        {{JS表達式}}  
    -->
    <div id="app">
        <h3>1. {{}}雙大括号輸出文本内容</h3>
        <!-- 直接擷取文本内容 -->
        <p>{{ msg }}</p>
        <!-- 直接執行JS表達式 -->
        <p>{{ sorce + 1 }}</p>
        <h3>一次性插值 v-once</h3>
        <p v-once>{{msg}}</p>
        <h3>指令輸出真正的HTML内容 v-html</h3>
        <p>雙大括号的形式：{{contentHtml}}</p>
        <p>v-html的形式：<span v-html="contentHtml"></span></p>
        <h3>元素綁定指令 v-bind</h3>
        <!-- 完整 -->
        <img v-bind:src="imgUrl">  
        <!-- 簡化 -->
        <img :src="imgUrl">
        <h3>事件綁定指令 v-on</h3>
        <input type="text" value="1" v-model="num">
        <!-- 完整 -->
        <button v-on:click="add">完整點選 +1</button>
        <!-- 簡化 -->
        <button @click="add">簡化點選 +1</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',  
            data:{  
                msg: '王佳偉，你最棒！' ,
                sorce: 100,
                contentHtml:`<span style="color:red">王佳偉，你最棒！
                    <script>alert("我是大傻逼！")<\/script>
                    </span>`,
                imgUrl:'https://profile.csdnimg.cn/B/9/A/3_weixin_42776111',
                num : 1
            },
            methods:{
                add:function(){
                    this.num ++
                }
            }
        })
    </script>
</body>
</html>

源碼位置：https://gitee.com/wjw1014/vue_learning_course

【重要說明】本文為本人的學習記錄，論點和觀點僅代表個人而不代表當時技術的真理，目的是自我學習和有幸成為可以向他人分享的經驗，是以有錯誤會虛心接受改正，但不代表此刻博文無誤！

vue.js入門開發