vue2 基礎學習01 （核心最基本的功能）

Vue · 發表 2019-03-06 12:50:02

摘要： vue學習路徑和建議----尤雨溪 vue官網根據官網一步步學習 1.專案構建引入vue庫，初學時直接通過CDN  <script ...

根據官網一步步學習

1.專案構建

引入vue庫，初學時直接通過CDN

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.宣告式渲染

留坑

在html中建立區域（元素標籤）

<div id="app">
{{ message }} <!--插值表示式--> 
</div>

例項化

在script 標籤中例項Vue,渲染資料

var app = new Vue({
el: '#app',//element,找到所渲染的坑位（div）
data: {//資料
message: 'Hello Vue!'
}
})

接下來官網介紹了指令v-bind

從後面我瞭解了下v-bind 的語法知識:

vue單向資料流繫結：v-bind: (屬性) 簡寫:(屬性)

例子：<input v-bind:value="name" v-bind:class="name">

value
v-bind

官網的例子簡化

<div id="app-2">
<span v-bind:title="message">
滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！
</span>
</div>

var app2 = new Vue({
el: '#app-2',
data: {
message: '我就是title的內容，哈哈哈'
}
})

以上的v-bind:title="message" 可以簡化為:title="message"

以後再細學。

--------------

3.條件與迴圈

這塊官網講了兩個指令v-if 和v-for

v-if

根據表示式的值的真假條件，銷燬(remove) 或重建(append) 元素

<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>

var app3 = new Vue({
el: '#app-3',
data: {
seen: true //可改為false
}
})

將true 改為false ，p標籤將消失！！！

v-for

迴圈陣列、物件

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>

var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '整個牛專案' }
]
}
})

4.處理使用者輸入

這塊是v-on 事件繫結

事件繫結v-on:事件名="表示式||函式名" 簡寫@事件名="表示式||函式名"

官網的例子：新增一個可以逆轉一句話的事件

<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉訊息</button>
</div>

var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

這塊是v-model 雙向繫結

<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>

var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})

5.組建化應用構建

這塊準備後面再學

vue2 基礎學習01 （ 核心最基本的功能）