大家好,又见面了,我是你们的朋友全栈君。
是什么
声明式渲染
<div id="app">{{ message }}</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
var vm = new Vue({
// 选项
})
数据与方法
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
// 改变 vm.a 或者 data.a 都会使视图发生响应
vm.a == data.a // => true
实例生命周期钩子
文本
<span v-once>这个将不会改变: {{ msg }}</span>
原始 HTML(不要使用,仅供了解)
特性
<button v-bind:disabled="isButtonDisabled">Button</button>
使用 JavaScript 表达式
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
参数
修饰符
<form v-on:submit.prevent="onSubmit">...</form>
缩写
计算属性
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
计算属性缓存 VS 方法(缓存)
计算属性 VS 侦听属性
计算属性的 setter
侦听器
对象语法
// 对象模式
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
// 放到 data 属性中
<div v-bind:class="classObject"></div>
// 绑定一个返回对象的计算属性
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
// 在数组语法中也可使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger',
isActive: true
}
用在组件上
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
// 直接绑定一个样式对象更好
<div v-bind:style="styleObject"></div>
// 对象语法常常结合返回对象的计算属性使用
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
自动添加前缀
多重值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
v-if
v-show
v-if VS v-show
v-if 与 v-for 一起使用
用 v-for 把一个数组对应为一组元素
一个对象的 v-for
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
// 第二个参数为键名,第三个参数为索引
<div v-for="(value, key, index) in object">
{{ index }}: {{ key }}: {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
key
数组更新检测
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
注意事项
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
// 同 Vue.set
vm.$set(vm.items, indexOfItem, newValue)
// 第二类问题
vm.items.splice(newLength)
对象更改检测注意事项
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile, 'age', 27)
// 全局 Vue.set 的别名
vm.$set(vm.userProfile, 'age', 27)
// 不应这样
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
// 应该这样
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
显示过滤/排序结果
<li v-for="n in evenNumbers">{{ n }}</li>
<li v-for="n in even(numbers)">{{ n }}</li>
一段取值范围的 v-for
<li v-for="n in even(numbers)">{{ n }}</li>
v-for on a <template>
一个组件的 v-for
内联处理器中的方法
事件修饰符
<!-- 阻止单击事件继续传播 -->
<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>
按键修饰符
<input v-on:keyup.13="submit">
// 常用键的别名
<input v-on:keyup.enter="submit">
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
系统修饰键
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
为什么在 HTML 中监听事件
基础用法
值绑定
<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
修饰符
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
<input v-model.number="age" type="number">
<input v-model.trim="msg">
在组件上使用 v-model (之后自定义输入组件-组建基础中)
基本示例
组件的复用
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
组件的组织
Vue.component('my-component-name', {
// ... options ...
})
通过 Prop 向子组件传递数据
单个根元素
通过事件向父级组件发送消息
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
<input v-model="searchText">
// 等价于
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
// 用在组件上
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
// 将其 value 特性绑定到一个名叫 value 的 prop 上
// 在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
通过插槽分发内容 <slot>
<alert-box>
Something bad happened.
</alert-box>
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
动态组件
解析 DOM 模板时的注意事项
// 这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部,并导致最终渲染结果出错。
<table>
<blog-post-row></blog-post-row>
</table>
// 利用 is 特性
<table>
<tr is="blog-post-row"></tr>
</table>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/168337.html原文链接:https://javaforall.cn