日常

vue.js

基础：

Vue构造器：Vue.extend(options)

• 是vue构造器的扩展，调用Vue.extend创建的是一个vue构造器。参数是一个包含组件选项的对象。
• options中的属性:
  • template属性用于定义组件要渲染的html。在vue.extend()的选项中data必须是函数；
• 注意：调用vue.extend生成的是一个组件构造器，不能直接拿来渲染的，必须要使用vue.component来进行注册；

全局组件：Vue.component()

• 参数：2个：
  • 第一个参数：组件的标签；
  • 第二个参数是组件构造器；
  • 组件应当挂载到某个vue实例上，否则不会生效；

Vue.component('组件名'，{ 
    // 选项（组件）
})

组件语法糖：

• 由于以上注册组件的过程过于繁杂，vue提供了注册语法糖：使用vue.component()直接创建和注册组件；
• 用法：vue.component(name, options)
• 参数:
  • name: 组件标签名；
  • options:选项对象

Vue.set(target,key,value)/this.$set(target,key,value)

• 应用场景：当生成VUE实例后，修改date中属性的值有时视图并不会同步更新，（即如果在实例创建后添加新的属性到实例上，他不会触发视图更新）
• 原因：Vue的双向绑定时基于set和get的
• 解决方法：使用Vue.set/this.$set来添加新属性；
• Vue.set(target,key,value)
• 参数：
  • target: 要添加属性的对象（目标对象）
  • key: 要添加的属性
  • value：属性值
    -eg:

  

    
正常类: {{earnings.a}}
    
宝宝类: {{earnings.b}}
    
活期存款: {{earnings.c}}
  
  

  export default {
    data () {
      return {
        earnings: {},
        }
    },
    methods: {
        getNum () {
            this.earnings.a = 1
            this.earnings.b = 2
            this.earnings.c = 3
        }
    } 
// 1.如上点击button按钮，视图不会更新；
// 2.将getNum函数改写成如下形式，即可式对象earnings的属性变成响应式的
   getNum () {
       this.$set(earnings, 'a', 1)
       this.$set(earnings, 'b', 2)
       this.$set(earnings, 'c', 3)
   }

this.$nextTick([callback, context])/Vue.nextTick([callback, context])

• 应用场景：有时我们通过更改数据 配合v-html更新dom,然后获取更新后的dom，但 数据更新后dom不会马上更新完成，此时就应用到了this.$nextTick;
• 作用：在下次Dom更新循环结束之后执行回掉，在数据更新之后立即调用该方法，获取更新后的Dom;

理解：

• vue.js是一个构建数据驱动的web界面的库。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
• vue.js自身并不是一个全能框架，它只聚焦于视图层。因此学习起来比较容易，它也非常容易和其他库已有项目整合。另一方面，在与相关工具和支持库一起使用市，vue.js也能完美驱动复杂的但也应用。
• vue.js的核心是一个响应的数据绑定系统，它让数据与Dom保持同步非常简单。在使用jquery手动操作DOM时，我们的代码常常是命令式的，重复的与易错的，vue.js用数据驱动的视图的概念，通俗的讲，将意味着我们在普通的HTML模板中使用特殊的语法将DOM‘绑定’到数据层，一旦创建了绑定，DOM将和数据保持同步。每当修改了数据，DOM便相应的更新。这样我们应用中的逻辑几乎都是修改数据了，比与DOM更新搅在一起。这让我们的代码更容易撰写，理解与维护

vue.js中使用到的两个重要函数。

• Object.defineProperty(object, propertyname, decriptor)
• eg: 添加属性访问器

var obj = {},newVal;
 // Add an accessor property to the object.
 Object.defineProperty(obj, "name", {
     set: function (x) {
         console.log("in property set accessor" + newVal);
         this.firstName= x;
     },
     get: function () {
         console.log("in property get accessor" + newVal);
         return this.firstName;
     },
     enumerable: true,
     configurable: true
 });

vue和angular的

vuex严格模式

开启严格模式；

const store = new Vuex.Store({
  // ...
  strict: true
})

JSlint语法要求

• 代码文档结尾要留白一行；
• 一句代码结尾不能用 ‘；’，不能有空格
• 注释格式‘空格 // 注释内容’

严格模式中this的指向

• 严格模式中自调用函数this不指向window，指向undefined

bind

• 和apply， call作用类似，只是bind不会改变原函数的this指向，他会返回一个新的函数，改变新函数的this指向为指定的值，新函数的函数体和原函数一样

• eg

this.x = 9; 
var obj = {
  x: 81,
  getX: function() { return this.x; }
};

obj.getX(); // 返回 81

var retrieveX = obj.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域

// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(obj);
boundGetX(); // 返回 81

路由懒加载；

• 使用原因：使用vue写单页面应用时，会出现打包后javascript包非常的大，影响页面加载，可以用路由懒加载的方法去优化路由，当用到某个路由时在去加载对应的模块；

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['components/Hello.vue'], resolve)
    },
    {
        path: '/about',
        component: resolve => require(['components/About.vue'], resolve)
    }
  ]
})

vue中watch

• 用来添加监视，其值为一个对象，要观察的数据以键值的形式写入其中，（一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。）
  • 键为要观察的数据，值为一个函数表达式，函数表达式有两个参数；第一个为新值，第二个为老值（变化前的值），
  • 当药观察的数据发生改变时，会执行对应键的函数表达式；

element-ui

• 模态框可以通过 v-model来呼出，取值为boolean

es6向外暴露模块的方法；

• export
  • export { 要暴露的变量名 }
  • export var/ const/let 变量名 = 对象/function
• export default = obj
• module exports = object/function

eg:

1.第一种方法：
const form = {
  id: input().protect(true).value(),
  name: RI().label('姓名').val('').type('text').checkDefault().value(),
    
    }
    
export { form } // 向外暴露一个form对象

app.use()

• 参数：obj|function
• 安装vue.js插件式如果插件是一个对象，必须提供install方法，如果插件是一个函数，那么它会被作为install方法，install方法将被作为vue的参数；

vue的特殊属性

slot ：内容分发插槽

• 具名插槽/和匿名插槽： 可以使用元素的一个特殊属性name来配置如何分发内容，将给据name属性来进行内容匹配，可以使用一个匿名插槽作为默认插槽，负责匹配不到插槽的能容将被抛弃。
• eg:

- 假定有一个app-layout组件，其模板为：


  

    
  
  

    
  
  

    
  

- 父组件模板：

 
  
这里可能是一个页面标题
  
主要内容的一个段落。
  
另一个主要段落。
  
这里有一些联系信息


- 选人结果为：


  

    
这里可能是一个页面标题
  
  

    
主要内容的一个段落。
    
另一个主要段落。
  
  

    
这里有一些联系信息
  

• 注意：如果子组件中没有匿名插槽，那么匹配不到插槽的那部分内容将被抛弃

计算属性

• 使用计算属性的原因：模板内表达式是非常便利的，但是他们实际是用于简单运算的，在模板中放入太多逻辑会让模板过重且难以维护。
• eg:

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

• 计算属性（computed）VS被观察的属性
• 当某一个值A依赖于另外两个值BC且，当BC中任意一个值发生改变是A的值也要发生改变，此时使用计算属性，比watch更简洁。
• eg:

{{ fullName }}

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

//上面代码时命令式的和重复的，使用计算属性书写如下，会变得简洁明了

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

• 何时使用watch？
  • 当你想要在数据变化响应时，执行一步操作，或者开销较大的操作时使用。

ES6新增的数组方法：

• reduce( function(accumulator, currentValue, currentIndex, array), initialValue) ：为数组中的每一个元素一次执行回掉函数，不包括数组中被删除的或者从未被赋值的元素
• 参数：
  • callback :执行数组中每个值的函数
    • 参数四个：accumulator：上一次 回掉的返回值
    • currentValue：正在处理的元素
    • currentIndex：正在处理的元素的索引
    • array: 调用reduce的数组
  • initialValue ：可选项，气质用于地磁调用callback的第一个参数，如果没有设置初始值，则将数组中的第一个元素作为初始值，空数组调用reduce

总结：数组中的元素每次执行callbak函数会将return的值赋给accumulator

webpack config文件配置

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //css单独打包
var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html


var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目录，以此类推
var APP_FILE = path.resolve(APP_PATH, 'App.jsx'); //根目录文件app.jsx地址
var BUILD_PATH = path.resolve(ROOT_PATH, '/pxq/dist'); //发布文件所存放的目录

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: {
        app: APP_FILE
    },
    output: {
        publicPath: '/pxq/dist/', //编译好的文件，在服务器的路径,这是静态资源引用路径
        path: BUILD_PATH, //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: '[name].[chunkhash:5].min.js',
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /^node_modules$/,
            loader: 'babel',
            include: [APP_PATH]
        }, {
            test: /\.css$/,
            exclude: /^node_modules$/,
            loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer']),
            include: [APP_PATH]
        }, {
            test: /\.less$/,
            exclude: /^node_modules$/,
            loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less']),
            include: [APP_PATH]
        }, {
            test: /\.scss$/,
            exclude: /^node_modules$/,
            loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'sass']),
            include: [APP_PATH]
        }, {
            test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
            exclude: /^node_modules$/,
            loader: 'file-loader?name=[name].[ext]',
            include: [APP_PATH]
        }, {
            test: /\.(png|jpg)$/,
            exclude: /^node_modules$/,
            loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
            //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
            include: [APP_PATH]
        }, {
            test: /\.jsx$/,
            exclude: /^node_modules$/,
            loaders: ['jsx', 'babel'],
            include: [APP_PATH]
        }]
    },
  plugins: [
    new htmlwebpackPlugin({ // 生成html文件配置；
      // 生成html文件的名字，路径和生产环境下的不同，要与修改后的publickPath相结合，否则开启服务器后页面空白
      filename: 'index.html',
      // 源文件，路径相对于本文件所在的位置
      template: path.resolve(__dirname, 'index.html'),
      // 需要引入entry里面的哪几个入口，如果entry里有公共模块，记住一定要引入
      // chunks: ['vendors', 'index'],
      // 要把