Vue从0-死亡

2019-03-18 本文已影响1人 GA_

字符串反转

.split('').reverse().join('')

按钮事件

<button v-on:click="action”>点击事件</button>

强转字符串

obj.toString()

过滤器串联样式

{{ 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 （可以遍历数组，也可以遍历对象内的属性）

// 001

<ol>

    <li v-for="obj in 数据源">

        {{ 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区别

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

只能输入数字使用.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)

监听属性

expOrFn: 监听的属性名

calllback: 回调函数

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文件内引用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返回的是一个扩展实例构造器，也就是预设了部分选项的Vue实例构造器。其主要用来服务于Vue.component，用来生成组件。可以简单的理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用扩展实例构造器来生产组件实例，并挂载到自定义元素上。著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

响应式与非响应式区分

var vm = new Vue({ 

    data: {

         a: 1 

    } 

}) 

// `vm.a` 是响应的 

vm.b = 2

// `vm.b` 是非响应的

官方🌰，声明响应式属性

var vm = new Vue({

  data: {

    // 声明 message 为一个空值字符串

    message: ''

  },

  template: '<div>{{ message }}</div>'

})

// 之后设置 `message`

vm.message = 'Hello!'

Vue对象的结构

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)

开发插件

官方代码如下

MyPlugin.install = function (Vue, options) {

  // 1\. 添加全局方法或属性

  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 监听属性

watch: {

    // 如果 `value` 发生改变，这个函数就会运行

    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 所独有的关键字，export default fs 输出默认的接口对象，import fs from 'fs' 可直接导入这个对象；
ES6 Module 中导入模块的属性或者方法是强绑定的，包括基础类型；而 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技术，也可以实现按需加载。这种情况下，多个路由指定相同的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);

打印结果：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(‘’,'')

进入界面触发方法

2018041610260284.png


仔细梳理上图生命周期，可以在mounted方法中调用要触发的方法。

Vue从0-死亡

猜你喜欢

热点阅读