Vue 2.x教程之基础API

前端之家收集整理的这篇文章主要介绍了Vue 2.x教程之基础API前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文主要介绍的是关于Vue 2.x之基础API的相关内容,主要内容如下

  • 模板语法(文本插值、属性绑定、JS表达式、过滤器、指令)
  • Vue实例(viewModal(属性+函数)、生命周期)
  • 计算属性和监听器 (computed(get,set) 与 watch)
  • 样式绑定(对象绑定、数组绑定、内联绑定)
  • 条件绑定(v-if v-show)
  • 列表渲染 (v-for、:key、数组监测、过滤/排序)
  • 事件处理 (监听、修饰符、key修饰符)
  • 表单输入绑定(text、checkBox、radio、select)

一、模板语法

文本插值

` 绑定数据 - `{{ }}` 纯文本绑定,单向,随vm变化而变化 - `{{ msg }}` 纯文本,单次,不跟随vm变化 - `` 不转义html标签,绑定html

属性绑定

模板中的JS

方法调用 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
//错误用法 {{ var a = 1 }} {{ if (ok) { return message } }}

过滤器

指令

` - `v-on` 缩写 ``

注册过滤器

{ 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) }}

注意

  • 注册过滤器时,如果需要传递参数,必须从第二个参数开始,第一个参数为当前绑定的数据
  • 过滤器一般用于简单的文本格式化,如果是对多个状态数据,或是复杂的数据处理应该使用计算属性

注册指令

注册 // 注册一个全局自定义指令 v-focus Vue.directive('focus',{ // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) //局部注册 directives: { focus: { // 指令的定义--- } } //使用

二、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 }}"

Computed reversed message: "{{ reversedMessage }}"

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('') } } })

使用 methods 和 filter 也能达到计算属性同样的效果,但计算属性使模板更加简单清晰(模板中放入太多的逻辑会让模板过重且难以维护)。

计算属性有 计算缓存 的特性,计算属性是基于它的依赖缓存,只有在它的相关依赖发生改变时才会重新取值,而 methods 每次执行都会重新取值。

什么需要缓存?

假设我们有一个重要的计算属性 A ,这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter !如果你不希望有缓存,请用 method 替代。

getter与setter

计算属性默认为 getter

也可以添加 setter

watch

使用 watch 来监听data,实时响应数据的变化

例:监听用户输入,显示 正在输入...,输入完成时,显示 请稍等...,并发送异步请求,请求成功里,显示答案

函数就会运行 question: function (newQuestion) { this.answer = '正在输入...' this.getAnswer() } },methods: { // _.debounce 是一个通过 lodash 限制操作频率的函数。 // 在这个例子中,我们希望限制访问yesno.wtf/api的频率 // ajax请求直到用户输入完毕才会发出 getAnswer: _.debounce( function () { if (this.question.indexOf('?') === -1) { this.answer = '需要一个问题标识\'?\'' return } this.answer = '请稍候...' var vm = this axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) },// 这是我们为用户停止输入等待的毫秒数 500 ) } })

使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。

四、样式绑定

使用 v-bind:class v-bind:style 来绑定样式

{ 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