[vue] - Vue.js教程-基础

之前做过项目,一直没有总结过,现在重新看文档加深一遍~~

一、介绍

1、声明与渲染

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

2、指令

  • v-if
    true是加载,false则不加载
  • v-for
  • v-on
    v-on:click @click
  • v-model 双向数据绑定

3、vue组件

一个组件实质上也是一个vue实例
props: ['todo']

<div id="app-7">
  <ol>
    //使用 v-bind 指令将 todo 传到每一个重复的组件中
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>
--
Vue.component('todo-item', {
  //将数据从父作用域传到子组件,模板可渲染动态数据
  props: ['todo'],
  template: '<li>This is a todo</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

二、Vue实例

1、构造函数创建实例

var vm = new Vue({})

2、属性,方法

data:{} 属性
method:{}定义方法

3、实例生命周期

  • 数据检测,编译模板,挂载实例到DOM,数据变化时更新DOM
  • 生命周期钩子
    created 在实例被创建之后被调用
    mounted
    updated
    destroyed 销毁实例时调用
  • Vue.js没有构造器的概念
    4、生命周期图示
Paste_Image.png

三、模板语法

1、插值

1)、文本

{{}} 插值
v-once 一次性插值

<span v-once>This will never change: {{ msg }}</span>
  • 双大括号会将数据解释为纯文本,而非 HTML
2)、纯html

v-html 可以输出真正的 HTML
<div v-html="rawHtml"></div>
:动态渲染的html容易导致XSS攻击,绝不要对用户提供的内容插值

3)、属性

{{}}不能在html属性中使用,得用v-bind
<div v-bind:id="dynamicId"></div>

<button v-bind:disabled="true">Button</button>
4)、使用javascript表达式
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

:表达式中可以访问Math、Date这样的全局变量,但不能访问用户自定义变量

2、指令

1)、参数

指令可以接受参数
<a v-bind:href="url"></a>

2)、修饰符

. 用于指出一个指定应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit"></form>

3、Filters 过滤器

由管道符 | 表示,添加在{{}}尾部
{{ message | capitalize }}
: Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind表达式(从 2.1.0 开始支持)中使用,因为过滤器设计目的就是用于文本转换。

过滤器函数总接受表达式的值作为第一个参数。
new Vue({
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
过滤器可以串联:
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数,因此可接受参数:
{{ message | filterA('arg1', arg2) }}
这里,字符串 'arg1' 将传给过滤器作为第二个参数, 
arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

4、缩写

v-on:click @click

四、计算属性

<div id="example">
  <p>初始值: "{{ message }}"</p>
  <p>计算之后的值: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    //声明计算属性
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

vm.reversedMessage 的值始终取决于 vm.message 的值

  • 计算属性 和 Methods 比较
    计算属性是基于它的依赖缓存,只要message不发生改变,那计算属性必然也不会改变,计算属性不会总执行。
    相比而言,每当重新渲染的时候,method 调用总会执行函数
  • 计算属性 和 Watched Property 比较
    $watch: 用于监听vue实例的数据变动
    <div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代码是命令式的和重复的。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
  • 计算setter
    计算属性默认只有getter,可以自己定义setter
computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {  // setter
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
  • 观察watchers
    用途:在数据变化响应时,执行异步操作或开销较大的操作时
    watch示例
    使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。

五、具体指令详解

1、class

1)、对象语法
  • 对象,可以多个属性
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
  • 直接绑定data中的一个对象
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
  • 常用且强大的模式如下
    绑定返回对象的[计算属性]
<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}
2)、数组语法

v-bind:class="[activeClass, errorClass]"
v-bind:class="[isAc ? acClass : '', eClass]"

当有多个条件 class 时可以在数组语法中使用对象语法
 v-bind:class="[{ active: isActive }, errorClass]"
3)、用在组件上
Vue.component('my-co', {
  template: '<p class="foo bar">Hi</p>'
})
//这些类将被添加到根元素上面 
<my-co v-bind:class="{ active: isActive }"></my-co>
Paste_Image.png

2、style

1)、对象语法,数组语法
//绑定到一个样式对象通常更好
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
<div v-bind:style="[baseStyles, overridingStyles]">

3、条件渲染(v-if /v-show)

  • <template> 元素当做包装元素,最终的渲染结果不会包含它


    Paste_Image.png
  • v-if
  • v-else
  • v-else-if (2.1.0 新增)
  • 使用key控制元素的可重用
    为高效的渲染元素,vue通常会复用已有的元素而不是从头渲染

key必须是唯一值

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

<label>元素会被复用,input不会被复用(有key属性)

  • v-show
    v-show 的元素会始终渲染并保持在 DOM 中。(切换元素的 display)
    v-show 不支持 <template> 语法
  • v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
    因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。

4、列表渲染(v-for)

v-for="(item, index) in items"
v-for="item of items"
  • Template v-for
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

推荐阅读更多精彩内容