html回顧及vue.js在html中使用(三)
jquery以及css不在回顧，粗略看了一遍，今天開始vue.js學習。如果遇到沒有接觸的可以及時學習一下。
開始vue.js之旅
學習vue.js看官網，沒有比這更好的資料了。
首先 我們需要知道 vue.js是什麼?
首先，它是一個js框架， 是一套構建使用者介面的漸進式框架.
與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。
Vue 的核心庫只關注檢視層，它不僅易於上手，還便於與第三方庫或既有專案整合。
另一方面，當與單檔案元件和 Vue 生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動。
採用邊看邊練的形式，寫html檔案然後執行。
新建test.html檔案
開啟並編輯：
在head標籤引入vue包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p style="color:red">{{ message }}</P>
</div>
<script 執行之後出現：
Hello Vue!
修改script程式碼：
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
app.message = "wow change!" 執行：
wow change!
條件與迴圈：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: false
}
})
</script>
</body>
</html>執行：
結果就是什麼都不顯示，隱藏。
處理使用者輸入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉訊息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>執行：
寫法上不同點：onclick換成了v-on:click 方法 methods:{方法：function(){}}.
元件化
// 定義名為 todo-item 的新元件
Vue.component('todo-item', {
template: '<li>這是個待辦項</li>'
})//使用該元件
<ol>
<!-- 建立一個 todo-item 元件的例項 -->
<todo-item></todo-item>
</ol>//元件改進
Vue.component('todo-item', {
// todo-item 元件現在接受一個
// "prop"，類似於一個自定義屬性
// 這個屬性名為 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})v-bind使用：
html使用元件：
<div id="app-7">
<ol>
<!--
現在我們為每個 todo-item 提供待辦項物件
待辦項物件是變數，即其內容可以是動態的。
我們也需要為每個元件提供一個“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', {
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: '隨便其他什麼人吃的東西' }
]
}
})此時 對vue.js有一定的瞭解了
下面具體學習下：
構造器
每個vue.js通過vue建立例項
var vm = new Vue({
// 選項
})可擴充套件：
var MyComponent = Vue.extend({
// 擴充套件選項
})
// 所有的 `MyComponent` 例項都將以預定義的擴充套件選項被建立
var myComponentInstance = new MyComponent()既然是元件，就有屬性方法吧 來看下：
代理data屬性
var data1 = { a: 1 }
var vm = new Vue({
data: data1
})
生命週期：
模板語法：
文字：
雙大括號
<span>Message: {{ msg }}</span>想要輸出純html,使用v-html 指令:
<div v-html="rawHtml"></div>支援JavaScript表示式
指令：
指令（Directives）是帶有 v- 字首的特殊屬性
引數：
一些指令能夠接收一個“引數”，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 屬性：
<a v-bind:href="url"></a>在這裡 href 是引數，告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。
修飾符：
修飾符（Modifiers）是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>過濾器：
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})縮寫：
v-bind
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>v-on
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>計算屬性：
html:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>js:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})需要處理的可以放在computed中
Class 與 Style 繫結：
class繫結:
我們可以傳給 v-bind:class 一個物件，以動態地切換 class 。
<div v-bind:class="{ active: isActive }"></div>上面的語法表示 classactive 的更新將取決於資料屬性 isActive 是否為真值 。
style繫結：
html:
<div v-bind:style="styleObject"></div>js:
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}條件渲染：
v-if
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>列表渲染：
v-for
v-for 指令需要以 item in items 形式的特殊語法， items 是源資料陣列並且 item 是陣列元素迭代的別名。
html:
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>js:
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
]
}
})執行：
剩下的大體看了一遍 有的需要慢慢研究。