【前端框架】vue~動態賦值
【前端框架】vue~條件判斷與遍歷
上面兩節內容涉及的操作都是在<template></template>標籤內，用於數據顯示。這節我們將瞭解這些數據在哪裏定義。
本文以【前端框架】vue~hello world中的項目進行演示
一個.vue文件有三部分組成，如圖(1)，分別是template、script、style，我們的關注重點主要集中在template、script這兩部分，而我們的數據就在script部分中。
所有的 Vue 組件都是 Vue 實例，並且接受相同的選項對象 (一些根實例特有的選項除外)
數據
vue的實例中有一個data屬性，是vue 實例的數據對象，其類型可以爲Object或Function，在定義組件的時候該data屬性只能是Function類型
實例創建之後，可以通過 vm.$data 訪問原始數據對象。Vue 實例也代理了 data 對象上所有的屬性，因此訪問 vm.a 等價於訪問 vm.$data.a。
效果一：在data中定義一個Object類型的對象，並在該對象中設置屬性，我們將在頁面展示該屬性值
在index.html文件中使用{{ }}在界面顯示test
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>firstvue</title>
</head>
<body>
<div id="app">{{content}}</div>
</body>
</html>
修改main.js文件添加我們希望在index.html中替換{{test}}的數據
import Vue from 'vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
data: {
content: 'test'
}
})
效果二：在data中定義一個Function類型的對象，並在該對象中返回一個對象，我們將在頁面展示該對象中的屬性值
我們在【前端框架】vue~hello world一節中新建的HelloVue頁面就是這樣實現的
<template>
<div id="vue">
Hello Vue.js! {{message}}
</div>
</template>
<script>
export default {
name: 'HelloVue',
data() {
return {
message: '吃飯'
}
}
}
</script>
方法
在編寫代碼的時候我們通常將處理邏輯放在方法中去實現，vue實例有一個methods屬性，我們可以在這個屬性中定義方法
methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue 實例。
效果一:實現按鈕切換
在【前端框架】vue~條件判斷與遍歷一節中我們曾實現登錄成功後需要顯示退出按鈕，未登錄時需要顯示登錄按鈕的邏輯
頁面元素與方法關聯是通過事件綁定，圖(4)中我們通過@click將signIn()與按鈕的單擊事件綁定。
事件綁定的兩種寫法：
v-on:指令v-on指令的簡寫形式@
<input type="button" name="signIn" value="登錄" @click="signIn" />
<input type="button" name="signIn" value="登錄" v-on:click="signIn" />