Vue简单归纳
文本
<span>Message: {{ msg }}</span>
原始HTML or 富文本
<span v-html="rawHtml"></span>
v-bind指令，给标签属性添加动态的值
<div v-bind:id="dynamicId"></div> 缩写：<div :id="dynamicId"></div> <button v-bind:disabled="isButtonDisabled">Button</button> 缩写：<button :disabled="isButtonDisabled">Button</button>
class三元运算展示不同样式
:class="[item.state?'select':'']"
绑定点击事件
<a v-on:click="doSomething">...</a> 缩写：<a @click="doSomething">...</a>
计算属性
将data中的message翻转
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
侦听属性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 } } }) 侦听的data发生变化时，会执行watch中相应的函数
Class 与 Style 绑定
对象语法切换class
<div v-bind:class="{ active: isActive }"></div>
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
//data如下
data: {
isActive: true,
hasError: false
}
数组语法
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
//data如下
data: {
activeClass: 'active',
errorClass: 'text-danger'
}对象语法和数组语法混合使用
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
内联样式
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div> //将多个样式对象放到同一个元素上
条件渲染
<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> //通过key值的不同表明两个元素独立，input不复用 <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> <h1 v-show="ok">Hello!</h1> v-show不同于v-if,v-show 只是简单地切换元素的 CSS property display。 </template>
列表渲染
<ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
v-for遍历对象
<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })
<div v-for="(value, name) in object"> {{ name }}: {{ value }} </div>
事件修饰符
<!-- 阻止单击事件继续传播 -->
<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>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
按键码
<input v-on:keyup.13="submit"> .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
组件注册
//全局注册 Vue.component('component-a', { /* ... */ }) Vue.component('component-b', { /* ... */ }) Vue.component('component-c', { /* ... */ }) //局部注册 mport ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... }
