[//]: ( Vue學習 Day01) 介紹 這個系列記錄自己學習Vue的過程. Vue官方 不推薦 新手直接使用 ,所以前面這幾天都是根據 "官方文檔" 學習. 步驟 1. 新建一個 文件. 2. 在html中導入vue.js依賴. firstvue 3. 現在就可以照著官方的例子學習了. 例子 ...
介紹
這個系列記錄自己學習Vue的過程.
Vue官方不推薦新手直接使用 vue-cli,所以前面這幾天都是根據官方文檔學習.
步驟
新建一個
html文件.在html中導入vue.js依賴.
<head> <meta charset="utf-8"> <title>firstvue</title> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本，優化了尺寸和速度 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> </head>現在就可以照著官方的例子學習了.
例子
聲明式渲染
數據和 DOM 建立了關聯,修改了js中data的值,DOM也會發生變化.
Hello Vue
<div id="app"> {{ message }} </div>JS代碼：
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })v-bind 指令1,作用是:滑鼠停留幾秒,會有提示信息.
<div id="app-2"> <span v-bind:title="message"> 滑鼠懸停幾秒鐘查看此處動態綁定的提示信息！ </span> </div>JS代碼：
var app2 = new Vue({ el: '#app-2', data: { message: '頁面載入於 ' + new Date().toLocaleString() } })
條件與迴圈
控制元素顯示 使用
v-if，seen的值決定是否顯示.<div id="app-3"> <p v-if="seen">現在你看到我了</p> </div>JS代碼：
var app3 = new Vue({ el: "#app-3", data: { seen: true } })迴圈 使用
v-for,在控制台輸入app4.todos.push({text: 'push text'}),列表添加一個項<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>JS代碼：
var app4 = new Vue({ el: "#app-4", data: { todos: [ { text: '學習Vue' }, { text: '整個項目' }, { text: '完成畢設' } ] } })
處理用戶輸入
v-on指令添加一個事件監聽器
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉消息</button>
</div>JS代碼：
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>JS代碼：
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})組件化應用構建
組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。
<div id="app-7">
<ol>
<!--
現在我們為每個 todo-item 提供 todo 對象
todo 對象是變數，即其內容可以是動態的。
我們也需要為每個組件提供一個“key”，稍後再
作詳細解釋。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>JS代碼：
Vue.component('todo-item', {
// todo-item 組件現在接受一個
// "prop"，類似與一個自定義特性。
// 這個prop 名為todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '乳酪' },
{ id: 2, text: '隨便其它什麼人吃的東西' }
]
}
})(假想)大型應用模板
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>源碼下載
https://www.lanzous.com/b00t79wkd
密碼:Vue01註解
el：對應div中的id
data：存放數據
methods: 存放方法
指令是Vue提供的特殊特性,指令帶有首碼
v-.↩
