- 字符串反轉(zhuǎn)
.split('').reverse().join('')
- 按鈕事件
<button v-on:click="action”>點擊事件</button>
- 強轉(zhuǎn)字符串
obj.toString()
- 過濾器串聯(lián)樣式
{{ message | filterA | filterB }}
- if-else 、if-else if使用
<div v-if="條件"></div>
<div v-else></div>
<div v-if="條件"></div>
<div v-else-if="條件"></div>
<div v-else></div>
- v-show
<div v-show="條件"></div>
- v-for （可以遍歷數(shù)組，也可以遍歷對象內(nèi)的屬性）
// 001
<ol>
<li v-for="obj in 數(shù)據(jù)源">
{{ obj.屬性 }}
</li>
</ol>
// 002
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
// 003
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
// 004
<ul>
<li v-for="i in 6">
{{ I }}
</li>
</ul>
- 對象
object:{
property1: '',
property2: '',
property3: ''
}
- methods和computed區(qū)別
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的百宇，但是 computed 是基于它的依賴緩存疹尾，只有相關(guān)依賴發(fā)生改變時才會重新取值。而使用 methods 惯殊，在重新渲染的時候酱吝，函數(shù)總會重新調(diào)用執(zhí)行。
- 只能輸入數(shù)字 使用.number修飾符
<input type="number" v-model.number="age" placeholder="number"/>
- 輸入框獲取焦點
<input v-focus/>
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
- 增加土思、刪除屬性
Vue.set(obj, key, value)
Vue.delete(obj, key)
- 監(jiān)聽屬性
expOrFn: 監(jiān)聽的屬性名
calllback: 回調(diào)函數(shù)
Vue.$watch(expOrFn, callback, options)
- 類型篩選
numberArr: function() {
let arr = [1, "#42B983", 3, "fjaljf", [], [123, 2], {}, 5];
let temp = arr.filter(function(item) {
if (typeof item == 'number') {
return item;
}
});
return temp;
}
- 使用sass
npm install sass-loader node-sass --save-dev
<style scoped lang="sass">
xxxx
xxxx
</style>
- Vue.js is detected on this page. Open DevTools and look for the Vue panel.
Vue.config.devtools = true
[圖片上傳失敗...(image-ded6f4-1552887206116)]
Vue藏的很深
[圖片上傳失敗...(image-2fb6bc-1552887206116)]
- Vue文件內(nèi)引用js文件
<script>
import {
buttonCounter
} from '../js/prodfile.js'
import {
alertView
} from '../js/alertView.js'
export default {
}
</script>
- Awesome
[https://github.com/vuejs/awesome-vue#table](https://github.com/vuejs/awesome-vue#table)
- 混用本地和全局樣式
<style>/* 全局樣式 */ </style>
<style scoped>/* 本地樣式 */ </style>
- 深度作用選擇器
如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”务热，例如影響子組件，你可以使用 >>> 操作符：
<style scoped>.a >>> .b { /* ... */ } </style>
- vue單文件分離js和css
<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
- 斷言export 單元測試框架
Jasmine框架 [https://www.cnblogs.com/wushangjue/p/4541209.html](https://www.cnblogs.com/wushangjue/p/4541209.html)
Vue test utils [https://vue-test-utils.vuejs.org/zh/](https://vue-test-utils.vuejs.org/zh/)
- extend和component
Vue.extend返回的是一個擴展實例構(gòu)造器己儒，也就是預(yù)設(shè)了部分選項的Vue實例構(gòu)造器崎岂。其主要用來服務(wù)于Vue.component，用來生成組件闪湾〕甯剩可以簡單的理解為當(dāng)在模板中遇到該組件名稱作為標(biāo)簽的自定義元素時，會自動調(diào)用擴展實例構(gòu)造器來生產(chǎn)組件實例途样，并掛載到自定義元素上江醇。著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處何暇。
- 響應(yīng)式與非響應(yīng)式區(qū)分
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 是響應(yīng)的
vm.b = 2
// `vm.b` 是非響應(yīng)的
官方??陶夜，聲明響應(yīng)式屬性
var vm = new Vue({
data: {
// 聲明 message 為一個空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后設(shè)置 `message`
vm.message = 'Hello!'
- Vue對象的結(jié)構(gòu)
class Vue {
constructor(options) {
this.$options = options;
this._data = options.data;
this.$el = document.querySelector(options.el);
}
}
- 正則表達式使用
var reg = "/^[A-Z]+$/";
reg.test(篩選的字符串);
[https://github.com/vuejs/awesome-vue#components--libraries](https://github.com/vuejs/awesome-vue#components--libraries)
- 開發(fā)插件
官方代碼如下
MyPlugin.install = function (Vue, options) {
// 1\. 添加全局方法或?qū)傩?
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2\. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3\. 注入組件
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4\. 添加實例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
}
- computed 計算屬性
computed: {
字段: {
// getter
get: function () {
return ...
},
// setter
set: function (newValue) {
}
}
}
- watch 監(jiān)聽屬性
watch: {
// 如果 `value` 發(fā)生改變，這個函數(shù)就會運行
value: function (newValue, oldValue) {
}
},
- import裆站、require和@import
樣式里面引入樣式不能直接用import条辟，需要使用@import
<style lang="stylus" scoped>
@import "common/stylus/index.styl"
</style>
CommonJS 還是 ES6 Module 輸出都可以看成是一個具備多個屬性或者方法的對象；
default 是 ES6 Module 所獨有的關(guān)鍵字遏插，export default fs 輸出默認的接口對象捂贿，import fs from 'fs' 可直接導(dǎo)入這個對象；
ES6 Module 中導(dǎo)入模塊的屬性或者方法是強綁定的胳嘲，包括基礎(chǔ)類型厂僧；而 CommonJS 則是普通的值傳遞或者引用傳遞。
// counter.js
exports.count = 0
setTimeout(function () {
console.log('increase count to', ++exports.count, 'in counter.js after 500ms')
}, 500)
// commonjs.js
const {count} = require('./counter')
setTimeout(function () {
console.log('read count after 1000ms in commonjs is', count)
}, 1000)
//es6.js
import{count} from './counter'
setTimeout(function () {
console.log('read count after 1000ms in es6 is', count)
}, 1000)
increase count to 1in counter.jsafter 500ms
read count after 1000ms in common.jsis 0
read count after 1000ms in es6.jsis 1
這種情況下一個組件生成一個js文件
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], resolve)
}
webpack中使用import()
// 下面2行代碼了牛，沒有指定webpackChunkName颜屠，每個組件打包成一個js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// 下面2行代碼鹰祸，指定了相同的webpackChunkName甫窟，會合并打包成一個js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
routes: [
{
path: '/importfuncdemo1',
name: 'ImportFuncDemo1',
component: ImportFuncDemo1
},
{
path: '/importfuncdemo2',
name: 'ImportFuncDemo2',
component: ImportFuncDemo2
}
]
})
- vue-router配置路由蛙婴，使用webpack的require.ensure技術(shù)粗井，也可以實現(xiàn)按需加載。這種情況下，多個路由指定相同的chunkName浇衬，會合并打包成一個js文件懒构。
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
path: '/hello',
name: 'Hello',
// component: Hello
component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}
- 字符串截取
var s = "1234567890";
s = s.substring(9, s.length);
console.log(s);
打印結(jié)果：0
- QRCode 字符串生成二維碼
npm I qrcodejs2
<div id="qrcode" ref="qrcode"></div>
qrCodeAction(url) {
let qrcode = new QRCode('qrcode', {
width: 150, //圖像寬度
height: 150, //圖像高度
colorDark: "#000000", //前景色
colorLight: "#ffffff", //背景色
typeNumber: 4,
correctLevel: QRCode.CorrectLevel.H //容錯級別 容錯級別有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
})
qrcode.clear() //清除二維碼
qrcode.makeCode(url) //生成另一個新的二維碼
},
- Vue文件引入js文件
注意：js文件需要export vue文件需要import（注意路徑正確）注意方法名字要一直（js文件的方法名，與export的名字和import要一致）
// js文件
function ga_getUrlKey(url, key) {
return decodeURIComponent((new RegExp('[?|&]' + key + '=' + '([^&;]+?)(&|#|;|$)').exec(url=='' ? location.href : url) || [, ""])[1].replace(
/\+/g, '%20')) || null;
}
export {
ga_getUrlKey
}
// vue文件
import {
ga_getUrlKey
} from '../js/UrlKey.js’
methods: {
getUrlKey(url, key) {
return ga_getUrlKey(url, key);
},
}
//使用：getUrlKey(‘’,'')
-
進入界面觸發(fā)方法
2018041610260284.png
仔細梳理上圖生命周期耘擂，可以在mounted方法中調(diào)用要觸發(fā)的方法胆剧。