[TOC]
## :-: 自定義指令(全局/局部)
```
<div id="app">
<input type="text" v-slice:5.number="content"> <p>{{ content }}</p>
</div>
<script>
// 自定義指令(全局/局部)
// 定義全局指令 -- Vue.directive(id, [definition])
// id -- String類型,5字符限制。v-slice
// [definition] -- 類型可以為 function / Object 、
// 例子:注冊一個全局自定義指令 `v-slice`
Vue.directive('slice', (el, bindings, vnode) => {
// --- function
// el -- 指令所綁定的元素,可以用來直接操作 DOM 。
/* binding -- 一個對象,包含以下屬性:
name -- 指令名,不包括 v- 前綴。
value -- 指令的綁定值,例如:v-my-directive="1 + 1" 中,綁定值為 2。
oldValue -- 指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression -- 字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中,表達式為 "1 + 1"。
arg -- 傳給指令的參數,可選。例如 v-my-directive:foo 中,參數為 "foo"。
modifiers -- 一個包含修飾符的對象。例如:v-my-directive.foo.bar 中,修飾符對象為 { foo: true, bar: true }。 */
// vnode -- Vue編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。https://cn.vuejs.org/v2/api/#VNode-接口
// ---------------------------------------------------------
// console.log(el, bindings, vnode);
// let len = bindings.arg || 5; // 獲取傳入的參數、
// const val = bindings.value.slice(0, len);
// vnode.content.content = val;
});
Vue.directive('slice', {
// --- Object
// v-slice 綁定的時候會執行,只執行一次、
bind(el, binding, vnode) {
// const val = bindings.value.slice(0, 5);
// vnode.content.content = val;
},
// 虛擬dom重新渲染的時候會執行(數據更新) updata,第一次加載不執行、
updata(el, binding, vnode) {},
// 當指令元素插入到DOM時會執行 inserted
inserted(el, binding, vnode) {
// 頁面渲染完成,讓input輸入框聚焦、
el.focus();
}
});
new Vue({
el: '#app', data: { content: 'abc' },
// 定義局部指令 -- directives
directives: {
// --- 跟全局的寫法一致,可以傳 對象/函數
slice: (el, binding, vnode) => {
// el -- 指令所綁定的元素,可以用來直接操作 DOM 。
/* binding -- 一個對象,包含以下屬性:
name -- 指令名,不包括 v- 前綴。
value -- 指令的綁定值,例如:v-my-directive="1 + 1" 中,綁定值為 2。
oldValue -- 指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression -- 字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中,表達式為 "1 + 1"。
arg -- 傳給指令的參數,可選。例如 v-my-directive:foo 中,參數為 "foo"。
modifiers -- 一個包含修飾符的對象。例如:v-my-directive.foo.bar 中,修飾符對象為 { foo: true, bar: true }。 */
// vnode -- Vue編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。https://cn.vuejs.org/v2/api/#VNode-接口
}
}
});
</script>
```
## :-: 自定義過濾器(全局/局部)
```
<!-- 自定義過濾器(全局/局部) -->
<div id="app">
<input type="text" v-model.number="content">
<span>{{ content | toMoney('times') }}</span>
</div>
<script>
// 自定義過濾器(全局/局部) -- Vue.filter(id, [definition])
// -- 全局·自定義過濾器
Vue.filter('toMoney', (value, times) => {
// 傳遞的實際參數為第二個形參
// 把數組轉換為本地字符串。
// (1000000).toLocaleString() // "1,000,000"
return value.toLocaleString();
})
new Vue({
el: '#app',
data: {
content: 1000000
},
// // -- 局部·自定義過濾器
// filters: {
// toMoney: () => {
// // ···
// }
// }
});
</script>
```
## :-: 掛載及dom構建流程
```
<div id="app">{{ test }}</div>
<script>
const oVue = new Vue({
el: '#app', template: '<p>111</p>',
render(createElement) {
// return <h1></h1>; // jsx語法,需要插件解析、
// createElement -- 新建一個新的元素
return createElement('div', {
class: ['className', 'test'],
style: {
color: 'red',
textAlign: 'center',
'background-color': '#444',
}
}, ['我是div呀...', createElement('h1', '我是一個h1標題')]);
},
data: { test: '123' }
});
oVue.$el // 返回:原生dom元素對象、
oVue.$el.outerHTML // 返回:"<div id="app">123</div>"
</script>
```

## :-: vue - 生命周期
```
<div id="app">{{ test }}</div>
<script>
// 生命周期
const oVue = new Vue({
el: '#app', data: { test: '123' },
beforeCreate() {
// vue實例創造前 (很少用)
console.log(this);
},
created() {
// vue實例創造后,開始有this.$data (一般用來調用ajax)
console.log(this.$data);
},
beforeMount() {
// 掛載前 (很少用)
console.log(this.$el); // dom對象:<div id="app">{{ test }}</div>
},
mounted() {
// 掛載后 (一般用來調用ajax,此時dom已經可以正常使用了)
console.log(this.$el); // dom對象:<div id="app">123</div>
},
beforeUpdate() {
// 更改數據之前
console.log('before');
},
updated() {
// 更改數據之后
console.log('after');
},
beforeDestroy() {
// 將被銷毀
},
destroyed() {
// 銷毀后
},
});
oVue.test = 'abc';
oVue.$destroy(); // 觸發銷毀
</script>
```
## :-: vue - 計算屬性/偵聽器
```
<div id="app">{{ demo }}</div>
<script>
// 計算屬性 及 偵聽器 的使用、
const oVue = new Vue({
el: '#app',
data: {
test: '123',
name: 1,
// data內this為window,所以 demo:'測試:'+this.test 的寫法是錯誤的!此時就需要借助 '計算屬性' / '偵聽器'
},
computed: {
// 計算屬性
demo() {
return '測試:' + this.test;
}
},
watch: {
// 偵聽器 (Function / Object)
test() {
// oVue.test 被改變時就會執行、
},
name: {
handler(newVal) {
console.log(1, newVal);
},
// 數據沒有改變,第一次渲染就偵聽
immediate: true
}
},
});
// 另外一種創建偵聽器的方式
oVue.$watch('name', (newVal) => {
console.log(2, newVal);
}, {
// 該Object為配置項
immediate: true
});
</script>
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request