渐进式js框架
指令
- v-bind:绑定,不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM 结构
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
- v-for:绑定数组的数据,渲染一个项目列表
- v-if:条件判断,,销毁或重建元素 v-show:根据表达式之真假值,切换元素的 display CSS 属性
- v-on:指令添加一个事件监听器 @
<button v-on:click="reverseMessage">逆转消息</button>
- v-text:更新DOM对象的 textContent
<h1 v-text="msg"></h1>
- v-html:更新DOM对象的 innerHTML
- v-for:基于源数据多次渲染元素或模板块
使用v-for提供key属性,VUE会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素
{{item}} -- {{key}}
{{item}}
```- v-model:表单输入和应用状态之间的双向绑定
<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
- v-pre:跳过子元素和本元素的的编译过程,用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
- v-once:vue只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
事件修饰符
- .stop 阻止冒泡,调用 event.stopPropagation()
- .prevent 阻止默认行为,调用 event.preventDefault()
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身(比如不是子元素)触发时,才会触发事件
- .once 事件只触发一次
样式处理 class&style
使用方式:v-bind:class=“expression” or :class=“expression”
表达式的类型:字符串、数组、对象(重点)
<div v-bind:class="{ active: true }"></div>
//解析后
//<div class="active"></div>
<div :class="['active', 'text-danger']"></div>
//解析后
//<div class="active text-danger"></div>
<div v-bind:class="[{ active: true }, errorClass]"></div>
//解析后
//<div class="active text-danger"></div>
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定义的对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
过滤器filter
- 作用:文本数据格式化
- 过滤器可以用在两个地方:{{}}和 v-bind 表达式
- 两种过滤器:1 全局过滤器 2 局部过滤器
全局过滤器
- 说明:通过全局方式创建的过滤器,在任何一个vue实例中都可以使用
- 注意:使用全局过滤器的时候,需要先创建全局过滤器,再创建Vue实例
- 显示的内容由过滤器的返回值决定
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
})
局部过滤器
某一个vue实例的内容创建的,只在当前实例中起作用
{
data: {},
// 通过 filters 属性创建局部过滤器
// 注意:此处为 filters
filters: {
filterName: function(value, format) {}
}
}
按键值修饰符
在监听键盘事件时,Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
修饰键(.ctrl等)、鼠标按键修饰符(.left等).enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
监视数据变化 - watch
概述:watch是一个对象,键是需要观察的表达式,值是对应回调函数
作用:当表达式的值发生变化后,会调用对应的回调函数完成响应的监视操作
VUE $watch
计算属性
说明:计算属性是基于它们的依赖进行缓存的,只有在它的依赖发生改变时才会重新求值
注意:Mustache语法({{}})中不要放入太多的逻辑,否则会让模板过重、难以理解和维护
注意:computed中的属性不能与data中的属性同名,否则会报错
Vue computed属性原理
组件系统
- 注册组件
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop",类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
- 构建组件模板
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue 组件实现了 Slot API 与 is 特性
Object.freeze():阻止修改现有的属性
生命周期钩子
不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
kebab-case (短横线分隔命名):例如
使用 PascalCase (驼峰式命名) :使用 PascalCase (驼峰式命名)
全局注册
Vue.component('my-component-name', {
// ... 选项 ...
})
局部注册
局部注册的组件在其子组件中不可用
//ComponentA 在 ComponentB 中可用
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
require.context 只全局注册通用的基础组件
全局导入基础组件的示例代码
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 剥去文件名开头的 `./` 和结尾的扩展名
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
prop
- 使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
- 如果使用字符串模板,那么这个限制就不存在了