标签：XML 定位 ext disable 轻松 webkit span als 模式
是什么
声明式渲染
<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
// 现在再运行 vm.fullName = ‘John Doe‘ 时，setter 会被调用，vm.firstName // 和 vm.lastName 也会相应地被更新。 computed: { fullName: { // getter get: function () { return this.firstName + ‘ ‘ + this.lastName }, // setter set: function (newValue) { var names = newValue.split(‘ ‘) this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ...
侦听器
对象语法
// 对象模式 <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-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
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 向子组件传递数据
单个根元素
通过事件向父级组件发送消息
调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件
使用事件抛出一个值
<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>
标签：XML 定位 ext disable 轻松 webkit span als 模式
原文地址：https://www.cnblogs.com/cxuer/p/9259938.html
