新手學vue.js（一）基礎入門
阿新 • • 發佈：2019-01-04
前言介紹
對於前端人員來說，學習VUE很容易，我是從事WEB前端的，開始準備學習VUE。首先從官方文件看起點選進入VUE官網 。
安裝
學習的話還是選擇開發版比較好，有錯誤提示。
能力要求
需要具備 HTML、CSS 和 JavaScript 中級前端知識。一定要有前端知識，不然駕馭不了。
宣告式渲染
引入vue.js檔案
<script src="vue.js"></script>html&js
<!DOCTYPE html>
<html lang="en">
<head>
<meta 指令
例子：
<div id="app-2">
<span v-bind:title="message">
滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載於 ' + new Date()
}
})v-bind 屬性被稱為指令，V-是vue特有的。這裡該指令的作用是：“將這個元素節點的 title 屬性和 Vue 例項的 message 屬性保持一致”。
條件與迴圈
1.條件
元素的顯示與隱藏
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})值為true則顯示，否則隱藏
在控制檯設定 app3.seen = false，你會發現 “現在你看到我了” 消失了。
效果圖：
2.列表渲染
<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:'學習List1'},
{text:'學習List2'},
{text:'學習List3'}
]
}
})v-for 指令可以繫結陣列的資料來渲染一個專案列表
在控制檯裡，輸入 app4.todos.push({ text: ‘新專案’ })，你會發現列表中添加了一個新項。
效果圖：
