cdn： <script src="https://cdn.jsdelivr.net/npm/vue"></script>
创建一个vue示例
var vm = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
表单绑定
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
// 数值类型过滤
<input v-model.number="age" type="number" />
<input v-model.trim="msg" />
事件绑定：
<button v-on:click="greet">Greet</button>
// 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<script>
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
</script>
// 在触发事件的时候事件修饰符：
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit" />
<!-- Alt + C -->
<input @keyup.alt.67="clear" />
关于出现闪现的问题，花括号问题，未加载完显示错误： css中添加
[v-cloak] {
display: none;
}
// 标签中调用
<div v-cloak v-show='block_show_0'></div>
针对加载花括号的问题，可以使用v-text属性，这个属性只有在加载完成的时候才会显示数据，不会显示花括号。
计算属性缓存和方法
<!--属于计算属性-->
<p>Reversed message: "{{ reversedMessage }}"</p>
<!--属于方法-->
<p>Reversed message: "{{ reversedMessage() }}"</p>
reversedMessage属于mounted中的方法。他们的区别是，计算属性会有缓存，方法不会缓存。
// 检测vue中属性变动的方法：watch
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
}
}
})
计算属性 computed方法中的属性 绑定属性,其中，bind的值可以为计算属性，方法。可以用这种方法给节点添加各种属性：
<button v-bind:disabled="isButtonDisabled">Button</button>
<div v-bind:class="{ active: isActive }"></div>
给div添加多个属性：
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
<div v-bind:style="styleObject"></div>
列表渲染 渲染单个元素:
<ul id="example-1">
// items 可以使用过滤函数进行过滤
<li v-for="(item, index) in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
渲染代码块:
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
注意，当v-for 和 v-if同时使用的收，v-for要比v-if的优先级要高，也就是说，可以通过在v-if中针对v-for进行条件判断：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
// 注意，2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
关于数组更新检测 当使用数组渲染的话，如果数组有变化，将会触发视图更新。但是，仅限于通过相关方法触发：
push(),pop(),shift(),unshift(),splice(),sort(),reverse()
当使用索引直接修该数组属性的时候，不会触发视图更新。如果想在修改单个属性的时候同时触发更新，可以使用set方法：
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue) // 这两行代码等效