Vue 2.x教程之基础API
|
本文主要介绍的是关于Vue 2.x之基础API的相关内容，主要内容如下
一、模板语法文本插值` 绑定数据
- `{{ }}` 纯文本绑定，单向，随vm变化而变化
- `{{ msg }}` 纯文本，单次，不跟随vm变化
- `` 不转义html标签，绑定html
属性绑定模板中的JS
//错误用法
{{ var a = 1 }}
{{ if (ok) { return message } }}
过滤器指令注册过滤器{
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
//局部注册
filters: {
capitalize: function (value,arg1) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
//使用
{{msg | capitalize(arg1) }}
注意
注册指令二、Vue实例Vue 实例，实则也就是 ViewModel（数据 + 函数），都是通过构造函数 Vue 创建
编译挂载 => 组件更新 => 销毁
beforeCreate(){
console.log('beforeCreate ==> 实例创建')
},created(){
// 可以操作data,但未生成DOM（未挂载）发起异步请求，初始化组件状态数据 data
console.log('created ==> 实例创建完成，属性已绑定')
},beforeMount(){
console.log('beforeMount ==> 模板编译/挂载之前')
},mounted(){
// 已生成DOM到document中，可访问this.$el属性
console.log('mounted ==> 模板编译/挂载之后')
},beforeUpdate(){
console.log('beforeUpdate ==> 组件更新之前')
},updated(){
// 操作DOM $('#box1')
console.log('updated ==> 组件更新之后')
},activated(){
// 操作DOM $('#box1')
console.log('activated ==> 组件被激活时（for keep-alive组件）')
},deactivated(){
console.log('deactivated ==> 组件被移除时（for keep-alive组件）')
},beforeDestroy(){
// 解除事件绑定，销毁非Vue组件实例等 如：this.$off('event1') select2.destory()
console.log('beforeDestroy ==> 组件销毁之前')
},destroyed(){
console.log('destroyed ==> 组件销毁之后')
}
})
三、计算属性与监听器computed任何复杂逻辑，都应当使用计算属性 可以像绑定普通属性一样在模板中绑定计算属性 声明式地创建依赖关系，计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。 Original message: "{{ message }}"
var vm = new Vue({
el: '#example',data: {
message: 'Hello'
},computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
Computed reversed message: "{{ reversedMessage }}" 使用 methods 和 filter 也能达到计算属性同样的效果，但计算属性使模板更加简单清晰（模板中放入太多的逻辑会让模板过重且难以维护）。 计算属性有 计算缓存 的特性，计算属性是基于它的依赖缓存，只有在它的相关依赖发生改变时才会重新取值，而 methods 每次执行都会重新取值。 什么需要缓存？ 假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。 getter与setter计算属性默认为 getter 也可以添加 setter watch使用 watch 来监听data，实时响应数据的变化 例：监听用户输入，显示 正在输入...，输入完成时，显示 请稍等...，并发送异步请求，请求成功里，显示答案 使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。 四、样式绑定使用 {
return {
isActive: true,hasError: false,classObj:{
'active':true,'align-left':true,},activeClass: 'active',errorClass: 'text-danger',styleObj:{
color: 'red',fontSize: '13px'
},activeColor: 'red',fontSize: 30,baseStyles:{color: 'red'},overridingStyles: { fontSize: '20px'}
}
}
对象语法绑定class 绑定的是对象的 key，如果对象的值为 true，则绑定 key style 绑定的整个 对象 绑定 class
//
// 绑定style
// 数组语法绑定class 绑定的是数组的 值 style 绑定的是数组中的 对象 五、条件渲染v-if切换元素的隐藏和显示 v-if、v-else、v-if-else 切换单个元素 No切换多个元素 Title
Paragraph 1 Paragraph 2 多条件判断
Not A/B/C
条件渲染默认会复用相同的组件，如果不复用元素，可添加 key 值 Username
v-show用于切换元素样式属性 display 的 block 和 none 与 v-if 不同的是，元素隐藏时，并没有从DOM中删除，而 v-if 是删除了元素保存在缓存中。 注意 v-show 不支持 语法 v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。 区分 v-if 与 v-show 的使用场景：
六、列表渲染
基本用法添加第二个参数可以获取当前迭代的 key 值 数组迭代对象迭代循环组件，向组件中传递数据组件有自己的作用域，向组件中传递数据需要使用属性传递 v-for 具有比 v-if 更高的优先级 判断每一个todo项是否可显示判断是否需要迭代todos添加 key 属性提升重复渲染效率 数组监测Vue重写了数组的变异方法，用于监测数组的更新
这些操作会改变原有数组，为变异方法 非变异方法返回新的数组，可以用于替换旧的数组 直接修改数组长度、利用索引修改数组的值，不会被监听到 过滤/排序使用计算属性对原有数组进行过滤和排序 七、事件监听v-onv-on 用于监听绑定的事件 原生事件对象使用 $event 传递原生事件对象
methods: {
warn: function (message,event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
事件修饰符methods 应该只处理纯粹的数据逻辑，而不是去处理 DOM 事件细节 .stop 阻止事件冒泡 .prevent 阻止默认事件 .capture 使用捕获模式 .self 只有当事件作用于本身时才触发 .once 只绑定一次 按键修饰符监听键盘按下的键值 监听keyCode 常用按键别名
按键组合
八、表单输入绑定使用 v-modal 给表单控件绑定相关数据（双向绑定） v-modal 是一个语法糖 基本输入
// 复选框
// 单选（返回 true/false ）
// 多选 （返回一个数组 ['jack','john']）
Checked names: {{ checkedNames }} //单选框 （返回选中的值） // 下拉框 // 单选 （返回选中的值） // 多选（返回一个数组 ['A','B']） 当有选项有 value 属性时，选中时，返回 value,当属性没有 value 时，选中时返回字符串或 true/false 绑定动态的valuev-model 绑定的 value 通常是静态字符串，对于 radio、checkbox、select，可以动态的使用v-bind设置value
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b
修饰符v-modal 的修饰符 .lazy、 .number、.trim
// 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
自定义输入组件 使用 v-modal 自定义输入组件 前提条件，组件必须有 value 属性， 在有新的value时，可通过 input 事件获取更新的值。 自定义的货币输入组件
Vue.component('currency-input',{
template: '
$
',props: ['value'],methods: {
// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
updateValue: function (value) {
var formattedValue = value
// 删除两侧的空格符
.trim()
// 保留 2 小数位
.slice(0,value.indexOf('.') + 3)
// 如果值不统一，手动覆盖以保持一致
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通过 input 事件发出数值
this.$emit('input',Number(formattedValue))
}
}
})
总结以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
