<———
在這之前，你肯定會注意到上面箭頭所指的位置，那麼你一定會看見，文章外面的大拇指圖示，動動你的手指，就能點一下它，表示你很喜歡這篇文章。
正題：
如果你不願意多花時間去自學vue.js 官網的API，那麼你可以在跟著下面的例子學習最實用，最容易上手的案例。

正題：
如果你還不會使用最基本的vue.js的話，推薦你先去看一下我的“1.學習使用vue.js（適合初學者）”然後再來學習以下內容：

這篇文章主要講vue的基本指令：

首先你需要引入vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue"></script
 
>

宣告式渲染（其實就是在頁面新增內容）
Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統：

第一種方法：v-html繫結一條內容

<div id="app">
    <div v-html="msg"></div>
</div>

你可以在js裡這麼寫：

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'<h1>HELLO VUE</h1>'
 

            }
        }
    })
</script>   

然後你的頁面會出現一條一模一樣的內容。

第二種方法：v-text繫結一條內容

<div id="app">
    <div v-text="msg"></div>
</div>

你可以在js裡這麼寫：

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'HELLO VUE'
            }
        }
    })
 
</script>   

第三種方法：{{msg}}繫結一條內容

<div id="app">
    <h1>{{msg}}</h1>
</div>

你可以在js裡這麼寫：

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'HELLO VUE'
            }
        }
    })
</script>   

這裡需要說一下三種方法的區別：
v-html: 可以繫結html標籤，並且瀏覽器會識別你的標籤
v-text 和 {{}} : 不可以識別標籤，會把你寫的“<></>”以文字的形式展示到瀏覽器上

除了文字插入，你還可以像這樣來繫結元素特性：

用 v-bind 來繫結元素的屬性

<div id="app">
    <input type="text" v-bind:value="msg"/>
</div>

js :

data(){
    return {
        msg:'HTLLO VUE'
    }
}

v-bind其實就是指令。你今後所有看到的 ”v-“就是繫結一條指令v-bind可以所寫為一個冒號 ”:“

<div id="app">
    <input type="text" :value="msg"/>
</div>

js :

data(){
    return {
        msg:'HTLLO VUE'
    }
}

當然，你並不是只能繫結表單輸入框的value,你也可以繫結其他元素的tittle、src、href、alt等等…..

下面是VUE官網解釋的v-bind:

這裡我們遇到了一點新東西。你看到的 v-bind 特性被稱為指令。指令帶有字首 v-，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這裡，該指令的意思是：“將這個元素節點的 title 特性和 Vue 例項的 message 屬性保持一致”。
如果你再次開啟瀏覽器的 JavaScript 控制檯，輸入 app2.message = '新訊息'，就會再一次看到這個綁定了 title 特性的 HTML 已經進行了更新。

Vue 還提供了 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。

<div id='app'>
    <h1>{{msg}}</h1>
    <input type="text" v-model="msg"/>
</div>

js:

data(){
    return {
        msg : 'hello vue'
    }
}

你可以試著在表單輸入框裡面輸入點東西，檢視效果

文章持續跟新中。。。
請持續關注。。。。
如果你想學習的話，請在下方評論你的想法，
讓我們共同進步~