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 = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3

<p v-if="greeting">Hello!</p> //根据greeting表达式的值真假来插入或者删除p元素；<a v-bind:href="http://www.mamicode.com/url"></a> //href是argument，表示将a元素的href属性和url表达式绑定起来其对应的简写形式为：<a :href="http://www.mamicode.com/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 -Foo1 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>

// PascalCaseimport 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 definitioncomponents: {  // register using camelCase  myComponent: { /*... */ }}<!-- use dash case in templates --><my-component></my-component>

// flash-message.jsfunction alertMessage(message) {   alert(message);}function logMessage(message) {   console.log(message);}export {alertMessage, logMessage};//app.jsimport {alertMessage, logMessage} from ‘./flash-message‘;alertMessage("Hello");logMessage("Hello");//flash-message.jsexport default function(message){   alert(message);}//app.jsimport 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一个objectmodule.exports = exports = new Spinner;

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

var alert = require(‘vue-strap/src/alert‘);// orvar alert = require(‘vue-strap‘).alert;new Vue({  components: {    ‘alert‘: alert  }})

import alert from ‘vue-strap/src/alert‘// orimport { alert } from ‘vue-strap‘new Vue({  components: {    alert  }})

$ bower install vue-strapdefine([‘vue-strap‘], function(VueStrap) { var alert = VueStrap.alert; ... });

<script src="http://www.mamicode.com/path/to/vue.js"></script><script src="http://www.mamicode.com/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定义应用directivemodule.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 objectvar 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 datavm.$el.textContent === ‘new message‘ // falseVue.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 eithervar 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 ],｝

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

this.pcomBus.$on(‘toggle-checked-all-for-role‘, e => {                // 这里this指针就指向的是定义这个pcomBus.$on调用的那个vue instance了！}

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 --savenpm install vuex@next --save

$ npm run dev Vue packages version mismatch:- vue@2.0.0-rc.2- vue-template-compiler@2.0.0-beta.7This 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 = http://www.mamicode.com/{>

<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="http://www.mamicode.com/message" @input="message = $event.target.value"> <my-component v-model="message"></my-component><!-- roughly the same as: --><my-component v-bind:value="http://www.mamicode.com/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()            }        }    }}

JSON.parse(JSON.stringify($vm.action.roles))

<my-component v-on:click.native="doTheThing"></my-component>

<a :href="http://www.mamicode.com/shouldhavehref ? ‘http://xx.com/yy‘ : null">

<li v-for="todo in todos" v-if="!todo.isComplete">  {{ todo }}</li>

// 将这段代码放在你的html页面中<complete-progress inline-template>You have complete {{ count }} lessons<complete-progress>// 这段代码放在html页面引用的js文件中Vue.component(‘complete-progress‘,{  data: function(){    return {     count: 50  }}})