vue使用總結心得
vue的安裝
在這里我們主要針對的是vue的單頁面項目 如果僅僅是為了單個案例可以直接下載 然后script安裝
Vue 提供一個官方命令行工具，可用于快速搭建大型單頁應用。該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可創建并啟動一個帶熱重載、保存時靜態檢查以及可用于生產環境的構建配置的項目：
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
vue的生命周期
vue的生命周期圖示
mark
| header 1 | header 2 |
|---|---|
| beforeCreate | 實例剛剛被創建 el和data并未初始化 |
| created | 實例創建完成 data被初始化 但是el沒有被初始化 dom不存在 |
| beforeMount | 完成了el的初始化 模板編譯之前 |
| mounted | 模板編譯之后 完成掛載 |
| beforeUpdate | 組件更新之前 |
| uodated | 組件更新之后 |
| beforeDestory | 組件銷毀前調用 |
| destoryed | 組件銷毀后調用 |
vue的核心思想（數據綁定和組件化）
- ==vue的雙向數據綁定==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
{{ text }}
</div>
</body>
</html>
<script>
/*
1 數據監聽器 首先有一個數據監聽的函數 目的是 監聽數據的變化 拿到最新值 并通知訂閱者
2 指令解析器 有一個編譯的函數 對元素的節點進行掃描和解析 并綁定相關的更新函數
3 watcher 作為連接observe和compile的敲了
3 訂閱者 這個訂閱者 負責與watcher 配合收到屬性變動的通知，執行相應的回調函數 完成視圖的更新 */
function observe(obj, vm) {
// 對傳入的對象 遍歷 并分別添加 object.defineProperty
Object.keys(obj).forEach((key) => {
defineReactive(vm, key, obj[key])
})
}
function defineReactive(vm, key, val) {
var dep = new Dep();
Object.defineProperty(vm, key, {
get: function () {
// 通過這一步 添加訂閱者
if (Dep.target) dep.addSub(Dep.target)
return val;
},
set: function (newval) {
if (newval === val) return
val = newval;
// 通知訂閱者
dep.notify()
}
})
}
// 需要實現一個消息訂閱器
function Dep() {
// 消息訂閱的讓容器是一個數組 數組的每一項 都是指代一個view和mode的中間者
this.subs = []
}
Dep.prototype = {
addSub: function (sub) {
this.subs.push(sub)
},
notify: function () {
this.subs.forEach((sub) => {
// 在這里 需要配合watcher進行更新
sub.update()
})
}
}
// 在這里增加dom編譯模板
function nodeToFragment(node, vm) {
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child, vm);
// 將子節點劫持到文本節點中
flag.appendChild(child)
}
return flag
}
function compile(node, vm) {
var reg = /\{\{(.*)\}\}/;
// 跟據節點類型去判斷
if (node.nodeType === 1) {
var attr = node.attributes;
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName === 'v-model') {
// 此時 name為text
var name = attr[i].nodeValue;
// 增加數據的變化監聽
node.addEventListener('input', (e) => {
vm[name] = e.target.value;
});
// 在這里 因為 我們的數據監聽器 已經封裝了vm[name] 觸發了 getter方法 完成了數據的初始化
node.value = vm[name];
node.removeAttribute('v-model')
}
}
new Watcher(vm, node, name, 'input')
}
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1;
name = name.trim();
new Watcher(vm, node, name, 'text')
}
}
}
//訂閱者 搭建數據監聽變化和變異模板的橋梁
function Watcher(vm, node, name, nodeType) {
Dep.target = this;
this.vm = vm;
this.node = node;
this.name = name;
this.nodeType = nodeType
this.update()
Dep.target = null;
}
Watcher.prototype = {
update: function () {
this.get()
if (this.nodeType === 'text') {
this.node.nodeValue = this.value
}
if (this.nodeType === 'input') {
this.node.value = this.value
}
},
get: function () {
this.value = this.vm[this.name];
}
}
function Vue(options) {
// 將options里面的data屬性 放入數據監聽器
this.data = options.data;
var data = this.data;
observe(data, this); // this指代vm
// 對指定id的dom 進行頁面的渲染
this.$el = options.el;
var id = this.$el;
var Dom = nodeToFragment(document.getElementById(id), this);
// 編譯完成之后 將dom 添加到節點中
document.getElementById(id).appendChild(Dom)
}
var vm = new Vue({
el: 'app',
data: {
text: 'hello,world'
}
})
vm.text = 'ma'
</script>
mark
- 組件化思想
-
將實現頁面的某一部分功能的結構，樣式和邏輯封裝為一個整體，使其高內聚，低耦合，達到分治和復用的目的
為了提高代碼復用性，減少重復性的開發，我們就把相關的代碼按照 template、style、script 拆分，封裝成一個個的組件。組件可以擴展HTML 元素，封裝可重用的 HTML 代碼，我們可以將組件看作自定義的 HTML 元素。在 Vue 里面，每個封裝好的組件可以看成一個個的 ViewModel。
組件的執行順序
- 子組件先在父組件中的 components 中進行注冊。
- 父組件利用 Vue.component 注冊到全局。
- 當渲染父組件的時候，渲染到 <child-component> ，會把子組件也渲染出來。
vue的路由分發（vue-router）
vue的路由分發主要是使用vue-router 本質來說 使用了哈希路徑和瀏覽器的history（html5新增api）
vue-router的安裝和項目中的配置
npm install vue-router --save
// 在main.js中這樣配置
import Vue from 'vue'
import App from './App'
import router from './router'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {App},
methods: {
},
created() {
},
})
// 在router文件夾下的index.js中 這樣配置
import Vue from 'vue';
import Router from 'vue-router';
import dashboard from '../pages/dashboard/dashboard.vue';
import index from '../pages/index.vue';
//系統設置頁面
import systemSetting from '../components/systemSetting/systemSetting.vue'
// 引入登錄頁
import login from '../pages/auth/login/login.vue'
//引入注冊頁
import register from '../pages/auth/register/register.vue'
Vue.use(Router)
var router = new Router({
routes: [
{
path: '/login',
name: 'login',
component: superTubeLogin,
},
{
path: '/register',
name: 'register',
component: register
},
{
path: '/',
name: 'index',
component: index,
children: [
{
path: '/dashboard',
name: 'dashboard',
component: dashboard,
},
//系統設置的頁面
{
path: '/systemSetting',
name: 'systemSetting',
component: systemSetting,
},
//工作組
//授權用戶管理
{
path: '/boxUserManageAllow',
name: 'boxUserManageAllow',
component: boxUserManageAllow
},
]
},
{
path: '*',
component: notFoundComponent
}
]
})
router.beforeEach((to, from, next) => {
// 這里寫的邏輯 任何路由跳轉之前都會執行
})
export default router
我們可以使用vue-router做那些事
配置路由分發
-
設置路由重定向
- 典型的應用場景有 做登錄前的禁止跳轉
- 在用戶訪問不存在的頁面的時候 跳轉到自定義的404頁面
在組件中進行路由的跳轉
-
進行組件之間的傳參
const router = new VueRouter({ routes: [ { // path: '/user/:userId', name: 'user', component: User } ] }) // 在組件中 應該這樣寫 router-link 在渲染時 會被轉化為a標簽 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // 在vue的生命周期 或者 methods中 應該這樣寫 router.push({ name: 'user', params: { userId: 123 }}) // 關于如何使用query進行傳遞參數 這里給出了一個示例 // http://blog.csdn.net/k491022087/article/details/70214664向路由組件傳遞props
https://router.vuejs.org/zh-cn/essentials/passing-props.html
根據路由元信息 設置組件的初始化或者區別組件
設置過渡的動態效果
-
路由信息對象
vue-router的使用注意事項
-
在組件中跳轉的時候 和 獲取路由元信息的時候
// 組件中跳轉 this.$router.push({ name: page, params: {id: 0, type: page, content: item.content, template: item.template} }) // 獲取路由元信息 this.$route.params.apiId?
-
監聽路由變化
wacth:{ '$route'(to, from) { ..... }, }
