最细致的vue.js基础语法 值得收藏!

<!-- html --><div id="demo"> <p>{{message}}</p> <input v-model="message"></div>new Vue({ el: '#demo', data: {  message: 'Hello Vue.js!' }})

<!-- html --><div id="demo"> <p>{{message}}</p> <input v-model="message"></div>new Vue({ el: '#demo', data: {  message: 'Hello Vue.js!' }})

Vue.filter('wrap', function (value, begin, end) { return begin + value + end;})<!-- 'vue' => 'before vue after' --><span>{{ message | wrap 'before' 'after' }}</span>

<!-- 当greeting为true时，才显示p节点 --><p v-if="greeting">hello</p><!-- 绑定href属性为js中url的值 --><a v-bind:href="url"></a><!-- 绑定事件，btnClick是js方法 --><button v-on:click="btnClick"></button>

<a v-bind:href="url"></a><a :href="url"></a><button v-on:click="btnClick"></button><button @click="btnClick"></button>

Vue.directive('demo', { bind: function () {  // 准备工作  // 例如，添加事件处理器或只需要运行一次的高耗任务 }, update: function (newValue, oldValue) {  // 值更新时的工作  // 也会以初始值为参数调用一次 }, unbind: function () {  // 清理工作  // 例如，删除 bind() 添加的事件监听器 }})

<!-- 判断，如果ok为true,则显示yes, 如果为false, 显示no --><h1 v-if="ok">Yes</h1><h1 v-else>No</h1><!-- 类似于v-if, v-if是是否加节点， v-show是display是否为none --><h1 v-show="ok">Hello!</h1><!-- 循环， 对items属性进行循环。 track-by指item的是否重复，对重复的进行服用 --><!-- 循环中， $index表示数组第n个元素; $key表示对象的key --><ul id="example-1"> <li v-for="item in items" track-by="_uid">  {{ $index }} : {{ item.message }} </li></ul>var example1 = new Vue({ el: '#example-1', data: {  items: [   {_uid: '1', message: 'Foo' },   {_uid: '2', message: 'Bar' }  ] }})

<!-- isA 为true时， class多一个class-a --><div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div><!-- classA, classB 两个变量的值设置成class --><div v-bind:class="[classA, classB]"><!-- 绑定style, 自动添加前缀，styleObject里面是style键值对 --><div v-bind:style="styleObject"></div>

<div id="example-2"> <button v-on:click="say('hi', $event)">Say Hi</button> <button v-on:click="say('what', $event)">Say What</button></div>new Vue({ el: '#example-2', methods: {  say: function (msg, event) {   alert(msg);   event.preventDefault();  } }})

<!-- 禁止冒泡 --><a v-on:click.stop='do'></a><!-- 禁止冒泡和默认行为 --><a @click.stop.prevent="do"></a>

<!-- keyCode是13的时候出发。 --><input v-on:keyup.13="submit" /><input v-on:keyup.enter="submit" /><!-- 支持的键名有： enter,tab,delete,esc,space,up,down,left,right -->

<div id="box"> <tree></tree></div>// 定义var Tree = Vue.extend({ template: '<div>This is a tree!</div>'});// 注册Vue.component('tree', Tree);// 开始渲染new Vue({ el: '#box'});// 定义，注册可以合并成一步。下面的代码和上面一样Vue.component('tree', { template: '<div>This is a tree!</div>'});new Vue({ el: '#box'});

<div id="box"> <div>This is a tree!</div></div>

var Child = Vue.extend({ /* ... */ })var Parent = Vue.extend({ template: '...', components: {  'my-component': Child }})

Vue.component('child', { props: ['childMsg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '<span>{{ childMsg }}</span>'});<child child-msg="hello"></child>

<input v-model="parentMsg" /><child v-bind:child-msg="parentMsg"></child>

<!-- 子组件模板 --><template id="child-template"> <input v-model="msg"> <button v-on:click="notify">Dispatch Event</button></template><!-- 父组件模板 --><div id="events-example"> <p>Messages: {{ messages | json }}</p> <child></child></div>// 注册子组件// 将当前消息派发出去Vue.component('child', { template: '#child-template', data: function () {  return { msg: 'hello' } }, methods: {  notify: function () {   if (this.msg.trim()) {    this.$dispatch('child-msg', this.msg) // 触发child-msg事件    this.msg = ''   }  } }})// 启动父组件// 将收到消息时将事件推入一个数组var parent = new Vue({ el: '#events-example', data: {  messages: [] }, // 在创建实例时 `events` 选项简单地调用 `$on` events: {  'child-msg': function (msg) { // 监听到 child-msg事件   // 事件回调内的 `this` 自动绑定到注册它的实例上   this.messages.push(msg) // messages改变自动修改html内容  } }})

<!-- 当child-msg触发时， 执行父组件的handleIt方法。 --><child v-on:child-msg="handleIt"></child>