vuejs心法和技法

var MyComponent = Vue.extend({
//扩展选项对象
})
var myComponentInstance = new MyComponent();

var data = { a: 1 }
var vm = new Vue({
  data: data
})

vm.a === data.a // -> true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2

// ... 反之亦然
data.a = 3
vm.a // -> 3

<p v-if="greeting">Hello!</p> //根据greeting表达式的值真假来插入或者删除p元素；
<a v-bind:href="url"></a> //href是argument，表示将a元素的href属性和url表达式绑定起来
其对应的简写形式为：
<a :href="url"></a> //这个是一种缩写的形式
<a v-on:click="doSomething"> //click是参数，表示on click时，执行doSomething这个表达式(函数）

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

<a v-bind:href.literal="/a/b/c"></a> //href为argument,literal为修饰符，表示后面"/a/b/c"为字面值而不是表达式！！
<button :disabled="someDynamicCondition">Button</button>  // 绑定到一个布尔值，如果真则disabled属性就加在button上

el: the element the directive is bound to.
vm: the context ViewModel that owns this directive.
expression: the expression of the binding, excluding arguments and filters.
arg: the argument, if present.
name: the name of the directive, without the prefix.
modifiers: an object containing modifiers, if any.
descriptor: an object that contains the parsing result of the entire directive.
params: an object containing param attributes.

<div id="demo" v-demo:arghello.modifiera.modifierb="expmsg" :parax="xdata"></div>
// 注意需要watch directive的parameter才能实现xdata变化就能触发directive内部的变化
Vue.directive(‘example‘, {
  params: [‘parax‘],
  paramWatchers: {
    parax: function (val, oldVal) {
      console.log(‘parax changed!‘)
    }
  }
})

<div v-bind:style="styleObject"></div>

<li v-bind:class="{‘j_current‘: currenttab==‘login‘}"> 这是class绑定的演示</li>

data: { styleObject: { color: ‘red‘, fontSize: ‘13px‘ } }

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    ‘class-a‘: true,
    ‘class-b‘: false
  }
}

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<h1 v-show="ok">Hello!</h1>

<ul id="example-2">
  <li v-for="(index, item)  of items">
   {{index}}  {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: ‘#example-2‘,
  data: {
    parentMessage: ‘Parent‘,
    items: [
      { message: ‘Foo‘ },
      { message: ‘Bar‘ }
    ]
  }
})
//结果：
0 Parent - 0 -Foo
1 Parent - 1 -Foo

//v-for也可以应用在template标签上,这样做的好处是：不用额外的无意义的tag，template tag不会被渲染出来
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ $key }} : {{ value }}
  </li>
</ul>
new Vue({
  el: ‘#repeat-object‘,
  data: {
    object: {
      FirstName: ‘John‘,
      LastName: ‘Doe‘,
      Age: 30
    }
  }
})
//输出一下结果
<ul id="repeat-object" class="demo">
  <li>
    FirstName : John
  </li><li>
    LastName : Doe
  </li><li>
    Age : 30
  </li>
</ul>

<button v-on:click="say(‘hello!‘, $event)">Submit</button>
// ...
methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
}

<div id="example">
  <my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
  template: ‘<div>A custom component!</div>‘
})

// 注册
Vue.component(‘my-component‘, MyComponent)

// 创建根实例
new Vue({
  el: ‘#example‘
})
//结果：
<div id="example">
  <div>A custom component!</div>
</div>

var Child = Vue.extend({
template: ‘<div>A custom component!</div>‘ 
})

var Parent = Vue.extend({
  template: ‘...‘,
  components: {
    // <my-component> 只能用在父组件模板内
    ‘my-component‘: Child
  }
})

// 在一个步骤中扩展与注册
Vue.component(‘my-component‘, {
  template: ‘<div>A custom component!</div>‘
})

// 局部注册也可以这么做
var Parent = Vue.extend({
  components: {
    ‘my-component‘: {
      template: ‘<div>A custom component!</div>‘
    }
  }
})

var data = { a: 1 }
var MyComponent = Vue.extend({
  data: data
})

var MyComponent = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

watch: {
    // whenever question changes, this function will run
    question: function (newQuestion) {
      this.answer = ‘Waiting for you to stop typing...‘
      this.getAnswer()
    },
　　deepwachedArrayOrObject: {

　　　　handler: function(nv,ov){
             // watch handler function body
　　　　},
       deep: true // 指示深度侦测

}

<table>
  <tr is="my-component"></tr>
</table>

Vue.component(‘child‘, {
  // 声明 props
  props: [‘msg‘],
  // prop 可以用在模板内
  // 可以用 `this.msg` 设置
  template: ‘<span>{{ msg }}</span>‘
})
//传入一个普通的字符串给child组件的msg属性
<child msg="hello!"></child>

Vue.component(‘child‘, {
  // camelCase in JavaScript
  props: [‘myMessage‘],
  template: ‘<span>{{ myMessage }}</span>‘
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

Vue.component(‘child‘, {
  // camelCase in JavaScript
  props: [‘myMessage‘],
  template: ‘<span>{{ myMessage }}</span>‘
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>
//简化版本：
<child :my-message="parentMsg"></child>

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
<!-- 传递实际的数字  -->
<comp :some-prop="1"></comp>

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 ：注意单次绑定在数据传入后就不会同步后面的任何变化了，适合传入初始化数据的场景-->
<child :msg.once="parentMsg"></child>

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

this.objFromParent = newObjectCreatedByChild  //这样会导致vuejs报错 Avoid mutating a prop directly ... 

this.objFromParent.propertyChangedByChild = newObjectCreatedByChild.propertyChangedByChild  //这样数据就很轻松保持了一致性，而不用$emit消息到数据源来维护数据了！！！

<!-- within parent template removeThisSon() resonsible for remove data which hosted by parent -->
<son v-for="son in sons"> 
  <div @click="removeThisSon(son)"> some operation affected parent data</div> 
</son>

<div id="parent">
  <user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: ‘#parent‘ })
// 访问子组件
var child = parent.$refs.profile

<child>
  {{ msg }}
</child>

<!-- 无效：原因是这个模板是父组件的，而父组件模板不知道子组件的数据状态！ -->
<child v-show="someChildProperty"></child>

<my-component
  v-for="item in items"
  :item="item"
  :index="$index">
</my-component>

Vue.component(‘async-example‘, function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: ‘<div>I am async!</div>‘
    });
  }, 1000);
});
new Vue({
  el: ‘#body‘
});

<async-example></async-example>

 methods:{
     attachNewPermission: function(){
         var vm = this;
         var html = ‘<async-example roleid=‘+this.roleid+‘ ></async-example> ‘;
         var vmtemp = Vue.extend({
                                     template: html,
                                     replace: false,
                         el: function(){
                             return vm.$el.getElementsByClassName(‘asyncloadednode‘)[0];
                         }
                             });
         new vmtemp();

     }

1 <!-- url为update-text-inplace组件的属性，其值为/admin/roles/xx，其中role.id为在父组件的template可见的数据 -->
2 <update-text-inplace :url=‘"/admin/roles/"+role.id‘ fieldname="name">
3       <div class="role-name">@{{ role.name }}</div>
4 </update-text-inplace>

// PascalCase
import TextBox from ‘./components/text-box‘;
import DropdownMenu from ‘./components/dropdown-menu‘;

export default {
  components: {
    // use in templates as <text-box> and <dropdown-menu>
    TextBox,
    DropdownMenu
  }
}
// in a component definition
components: {
  // register using camelCase
  myComponent: { /*... */ }
}
<!-- use dash case in templates -->
<my-component></my-component>

// flash-message.js
function alertMessage(message) {
   alert(message);
}

function logMessage(message) {
   console.log(message);
}

export {alertMessage, logMessage};

//app.js

import {alertMessage, logMessage} from ‘./flash-message‘;

alertMessage("Hello");
logMessage("Hello");


//flash-message.js
export default function(message){
   alert(message);
}

//app.js
import flashMessage from ‘./flast-message‘;

flashMessage("Hello");

import MyComponent from ‘./my-component‘

export default {
  components: {
    MyComponent // es2015 shorhand
  }
}
//然后在template中使用-代替非首单词大写字母:
<my-component></my-component>

var Spinner = require(‘spin.js‘);
// export singleton：这是由于require会cache一个object
module.exports = exports = new Spinner;

var spin = require(‘./supportlibs/spinner‘);
var spin2 = require(‘./supportlibs/spinner‘);
spin===spin2 //返回true!

var alert = require(‘vue-strap/src/alert‘);
// or
var alert = require(‘vue-strap‘).alert;

new Vue({
  components: {
    ‘alert‘: alert
  }
})

import alert from ‘vue-strap/src/alert‘
// or
import { alert } from ‘vue-strap‘

new Vue({
  components: {
    alert
  }
})

$ bower install vue-strap

define([‘vue-strap‘], function(VueStrap) { var alert = VueStrap.alert; ... });

<script src="path/to/vue.js"></script>
<script src="path/to/vue-strap.js"></script>
<script>
    var vm = new Vue({
        components: {
            alert: VueStrap.alert
        },
        el: "#app",
        data: {
            showRight: false,
            showTop: false
        }
    })
</script>

_self.vm.$compile(_self.vm.$el); //这个是不行的，因为dom已经是编译过的
//下面的代码是获取需要recompile的html node，并且$compile，这样就形成了活动的代码了！
_.each($(‘[recompile]‘), function(el){
                _self.vm.$compile(el);
            });

<!-- html -->
<div id="app">
  by dynamic Component:
  <component
    v-for="item in items"
    :is="item.component"  //这里根据item.component来决定渲染哪类组件
    :opts="item.options"> //同时通过opts传入要渲染组件的props
  </component>
</div>

Vue.component(‘node‘, {
  template: "<div>node: {{ opts }}</div>",
  props: [‘opts‘]
});

Vue.component(‘node2‘, {
  template: "<div>node2: {{ opts }}</div>",
  props: [‘opts‘]
});

new Vue({
  el: ‘#app‘,
  data() {
    return {
      items: [{
        component: "node",  //node节点类型
        options: ‘node节点数据‘
      }, {
        component: "node2", //node2节点类型
        options: ‘node2节点数据‘
      }]
    };
  }
  methods: {
    addItem() {
      this.items.push(this.newItem);
      this.newItem = {
        component: "",
        options: ""
      }
    }
  }
});

Vue.config.devtools = true; //在new Vue()之前执行
//Vue.config.debug = true;
//window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue;

// diretive定义
module.exports = {
  update: function(newValue, oldValue) {
    console.log(newValue)
    console.log(oldValue)
  },
  bind: function() {

  },
  unbind: function() {

  }
}
// component定义应用directive
module.exports = {
  template: require(‘./template.html‘),
  directives: {
    currency: require(‘./directives/currency.js‘)
  }
}
//在template中
<div v-currency>$1.00</div>

var sourceOfTruth = {}

var vmA = new Vue({
  data: sourceOfTruth
})

var vmB = new Vue({
  data: sourceOfTruth
})

import ExecPlayer from ‘./components/pages/exercise/exec-player.vue‘; //这里exec-player只是export了一个component option object

var execplayercomp = Vue.extend(ExecPlayer); //这里通过传入定义好的component option object作为Vue.extend的参数，以写程序的方式获得了component的构造函数
                var execplayer = new execplayercomp({
//                    ‘el‘: ‘#execplayer‘,  //调用new xxx的方式来创建组件，如果给了el配置项，则无需再调用$mount
// 需要注意的是这种方式创建的组件在devtool中并不会显示为rootvm的子组件，但是实际上他们是有父子关系的！！！
// 如果在html代码中直接以 <exec-player></exec-player>调用的方式来composite组件的话，则在devtool中能够正确显示父子关系~！
                    created(){
                        this.exercises = rootvm.exercises;
                    }
                }).$mount(document.getElementById(‘execplayer‘));

vm.$set(‘b‘, 2)
// `vm.b` and `data.b` are now reactive

Vue.set(data, ‘c‘, 3)
// `vm.c` and `data.c` are now reactive

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

<div id="example">{{msg}}</div>
var vm = new Vue({
  el: ‘#example‘,
  data: {
    msg: ‘123‘
  }
})
vm.msg = ‘new message‘ // change data
vm.$el.textContent === ‘new message‘ // false
Vue.nextTick(function () {
  vm.$el.textContent === ‘new message‘ // true
})

// 对于component下面的调用方法
Vue.component(‘example‘, {
  template: ‘<span>{{msg}}</span>‘,
  data: function () {
    return {
      msg: ‘not updated‘
    }
  },
  methods: {
    updateMessage: function () {
      this.msg = ‘updated‘
      console.log(this.$el.textContent) // => ‘not updated‘
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => ‘updated‘
      })
    }
  }
})

var CompA = { ... }

// extend CompA without having to call Vue.extend on either
var CompB = {
  extends: CompA,
  ...
}

import CompTypeA from ‘comp-type-a.vue‘
import CompTypeB from ‘comp-type-b.vue‘

export default {
  ...
  components: [ CompTypeA, CompTypeB ]
}

// html: 
<component :is="comptype" :optionstoComp></component>

import Comp from ‘generic-comp.vue‘

var CompTypeA = {
   extends: Comp,
   templates: ‘A‘,
   methods: ..A..
}
var CompTypeB = {
   extends: Comp,
   templates: ‘B‘,
   methods: ..B..
}
export default {
  ...
  components: [ CompTypeA, CompTypeB ]
}

// html: 
<component :is="comptype" :optionstoComp></component>

// mixin引用方法
import VuexStateGetterMixin from ‘./mixin.js‘
export default {
        mixins: [ VuexStateGetterMixin ],
｝

// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);
// ES5
$("#confetti-btn").click(function (event) {
  playTrumpet();
  fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
  playTrumpet();
  fireConfettiCannon();
});

const obj = { first: ‘Jane‘, last: ‘Doe‘ };
const {first: f, last: l} = obj;
    // f = ‘Jane‘; l = ‘Doe‘

// {prop} 是 {prop: prop} 的缩写
const {first, last} = obj;
    // first = ‘Jane‘; last = ‘Doe‘

npm install vue@next --save
npm install vuex@next --save

$ npm run dev 

Vue packages version mismatch:

- vue@2.0.0-rc.2
- vue-template-compiler@2.0.0-beta.7

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader or vueify, re-installing them should bump vue-template-compiler to the latest.

    import { mapActions } from ‘vuex‘
      export default {
        methods:{
          doJob: function(){
              this.changeme(content)
          },
          ...mapActions([
              ‘changeme‘
          ])
        }
    }

v-for="skill in pskills" :key="skill.id"

<transition>
  <div v-if="ok">toggled content</div>
</transition>

<transition name="fade" mode="out-in" appear>
<!-- classname 为 fade,fade-active,fade-leave,fade-leave-active为transition class -->
<!-- 模式为先出再入,并且首次渲染时也应用transition -->
  <component :is="view"></component>
</transition>

<transition @after-enter="transitionComplete">
  <div v-show="ok">toggled content</div>
</transition>

Vue.component(‘fade‘, {
  functional: true,
  render (createElement, { children }) {
    const data = {
      props: {
        name: ‘fade‘
      },
      on: {
        beforeEnter () { /* ... */ }, // <-- Note hooks use camelCase in JavaScript (same as 1.x)
        afterEnter () { /* ... */ }
      }
    }
    return createElement(‘transition‘, data, children)
  }
})

<fade>
  <div v-if="ok">toggled content</div>
</fade>

<!-- html content for root management partial -->

<div id="root">
    <div class="root" v-for="(item,index) of outerloop2times"><!-- 外围需要loop 2次 -->
        <a></a>
        <b></b>
    </div>
    <c></c>  <!-- 注意c组件是最后一个created和mounted to root的元素 -->
</div> <!-- root结束 -->
<script type="x/template" id="a-template">
    <div class="a-root">
        <a-sub v-for="(item,index) of innerloop3times"></a-sub> <!-- 需要loop 3次 -->
    </div>    
</script>
<script type="x/template" id="b-template">
    <div class="b-root">
        <!-- standard html partial -->
    </div>    
</script>

Vue.component(‘select2‘, {
  props: [‘options‘, ‘value‘],
  template: ‘#select2-template‘,
  mounted: function () {
    var vm = this
    $(this.$el)
      .val(this.value)
      // init select2
      .select2({ data: this.options })
      // emit event on change.
      .on(‘change‘, function () {
        vm.$emit(‘input‘, this.value)  //这个非常重要，通过emit一个input事件来更新v-model数据 
      })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).select2(‘val‘, value)
    },
    options: function (options) {
      // update options
      $(this.$el).select2({ data: options })
    }
  },
  destroyed: function () {
// 这里也很重要，在vue组件销毁时，jquery ui自己生成的dom并不会销毁，我们要通过jquery ui select2的api来实现销毁
    $(this.$el).off().select2(‘destroy‘)
  }
})

        <select2 v-model="selectedValue"
            <!-- 这里selectedValue会作为value属性传入select2组件, 组件更新数据时通过$emit(‘input‘, select2internalValue)传给selectedValue -->
         >
        </select2>

<input v-model="message"> 
<!-- roughly the same as: -->
<input v-bind:value="message" @input="message = $event.target.value"> 

<my-component v-model="message"></my-component>
<!-- roughly the same as: -->
<my-component v-bind:value="message" @input="setMessage"> </my-component>
<!-- setMessage provided by v-model, doing essentially: 
       function (valuefrom$emittedInputEvent) { message = valuefrom$emittedInputEvent }
-->

<router-view class="view" :users="users"></router-view>

export default{ 
   data: function () {
        return {
            ["thisrootstore_"+this.$options.name]: {
                bus: new Vue()
            }
        }
    }
}