Vue-学习笔记1-Vue常用方法

前言

本文内容主要是记录Vue中常用的方法，主要包括数据处理方法、DOM、以及生命周期钩子。详细内容请大家参考官方文档，Vue的官方文档描述还是相当详细的。

选项/数据

包含vue的数据处理，主要包括：

  • data
  • props
  • propsData
  • computed
  • methods
  • watch

data

示例：Login.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
  <div class="container login" id="app">
    <div class="col-xs-12 col-md-5 col-md-offset-4 login-form-div">
      <div class="col-xs-12 text-center">
        <h1>{{systemName}}</h1>
      </div>
      <div class="col-xs-12 login-title">
        <div class="col-xs-10 col-xs-offset-1 title-tab">
          <ul id="myTab" class="nav nav-tabs no-padding text-center">
            <li class="active col-xs-6 no-padding">
              <a href="#form_login" data-toggle="tab">
                登&nbsp;录
              </a>
            </li>
            <li class="col-xs-6 no-padding"><a href="#form_register" data-toggle="tab">注&nbsp;册</a></li>
          </ul>
        </div>
      </div>
      <div class="col-xs-12 login-content tab-content">
        <form action="sys/login" method="post"
              class="form-horizontal login-form tab-pane fade in active"
              id="form_login" role="form">
          <!--<div class="form-horizontal login-form tab-pane fade in active">-->
          <!--sign in-->
          <div class="col-xs-10 col-xs-offset-1">
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input type="text" class="form-control text-info" maxlength="30" name="userName"
                       id="userName">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input type="password" class="form-control text-info" maxlength="30"
                       name="password" id="password">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group checkbox col-xs-12">
                <span class="pull-right"><a>忘记密码?</a></span>
              </div>
            </div>
            <div class="form-group">
              <button id="submit_login" type="button" class="btn btn-block">登&nbsp;&nbsp;录</button>
            </div>
          </div>
          <!--</div>-->
        </form>
        <!--/sign in-->
        <!--sign up-->
        <div class="form-horizontal login-form tab-pane fade"
             id="form_register"
             role="form">
          <div class="col-xs-10 col-xs-offset-1 input-form-group">
            <input type="text" class="form-control text-info list-row-space" maxlength="30" name="userName">
            <input type="password" class="form-control text-info list-row-space" maxlength="30" name="pass">
            <input type="password" class="form-control text-info list-row-space" maxlength="30"
                   name="passRep">
            <button id="submit_register" type="button" class="btn btn-block list-row-space">注&nbsp;&nbsp;册
            </button>
          </div>
        </div>
        <!--/sign up-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data: function () {
    return {systemName: 'lx-platform后台管理系统'}
  }
}
</script>

<style scoped>

</style>

官网给的文档是：该组件是vue实例的数据对象，只接受function，vue会递归将data的属性转换为getter/setter，返回的数据对象必须是纯粹的对象（含有零个或多个的key/value对），data只能是数据，不推荐观察拥有状态行为的对象。

本人理解，简单的使用如上，html中使用双花括号获取属性值。

props

props 可以是数组或对象，用于接收来自父组件的数据，通过属性给模板赋值。
可以使用以下对象：

  • type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。
  • default: any 为该 prop 指定一个默认值。
  • required: Boolean 定义该 prop 是否是必填项。
  • validator: Function 自定义验证函数会将该 prop 的值作为唯一的参数代入。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<div id="app2">
  <mycomponent message="这个就是信息" :mydata="{username: '用户名', age: 26}" name-style="color:red"></mycomponent>
</div>
</template>

<script>
import Vue from 'vue'
var mycomponent = Vue.extend({
  props: {
    message: '',
    mydata: {},
    // 这里的驼峰key，对应上面的短中杠key
    nameStyle: {}
  },
  template: '<div><div style="color: white">{{ message }}</div><span v-bind:style="nameStyle">{{ mydata.username}}</span></div>'
})
Vue.component('mycomponent', mycomponent)

var vue2 = new Vue({
  el: '#app2'
})
</script>

<style scoped>
body {
  background-color: white;
}
</style>

template标签中的内容，以及message、nameStyle、mydata.username值就是通过props传递过来的值。
在组件中使用props传值的时候默认传的是字符串，如果要传递对象的话，需要使用v-bind来传值；props中就是定义一些默认的值，不能直接修改props，只能间接的通过data来修改。

propsData

作用：创建实例时传递props，只用于new创建的实例中。示例如下，可以看到显示效果已经变了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
<div id="app2">
  <mycomponent message="这个就是信息" :mydata="{username: '用户名', age: 26}" name-style="color:red"></mycomponent>
</div>
</template>

<script>
import Vue from 'vue'
var mycomponent = Vue.extend({
  props: {
    message: '',
    mydata: {},
    // 这里的驼峰key，对应上面的短中杠key
    nameStyle: {}
  },
  template: '<div><div style="color: white">{{ message }}</div><span v-bind:style="nameStyle">{{ mydata.username}}</span></div>'
})
new mycomponent({propsData: {message: '修改后的信息', mydata: {username: '用户名123'}, nameStyle: 'color: yellow'}}).$mount("#app2")
Vue.component('mycomponent', mycomponent)
</script>

<style scoped>
body {
  background-color: white;
}
</style>

computed

作用：computed的作用就是数据的计算，如定义add、minus、或者字符串拼接之类的计算等，可以直接使用双花括号将值渲染到模板中，示例方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
<div id="app2">
    <div style="color: white">
      <span>{{ message }}</span>
      <span>{{ reverse }}</span>
  </div>
</div>
</template>
<script>
export default {
  data: function () {
    return {
      message: 'weyoung'
    }
  },
  computed: {
    reverse: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

<style scoped>
body {
  background-color: white;
}
</style>

页面上显示的内容如下：weyoung gnuoyew

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<div id="app2">
  <div style="color: white">
    <button class="btn btn-default" @click="sayHello" v-text="myName"></button>
  </div>
</div>
</template>
<script>
export default {
  data: function () {
    return {
      myName: '点我点我点我'
    }
  },
  methods: {
    sayHello: function () {
      console.log('hello')
      console.log(this)
    }
  }
}
</script>

console打印结果如下：

methods方法打印-2019921232412

watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

watch字面上理解就是监测Vue实例上的数据变动。

示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<div id="app2">
  <div><label>用户名：</label><input type="text" v-model="mydata.name" />
    <label>新用户名：</label><input type="text" v-model="newName" /></div>
</div>
</template>
<script>
export default{
  data: function () {
    return {
      mydata: {
        name: 'weyoung',
        age: 26
      },
      newName: '寒江夜雨'
    }
  },
  watch: {
    mydata: {
      handler: function (val, oldVal) {
        console.log('---mydata watch---', val.name)
      },
      deep: true// 对象内部的属性监听，也叫深度监听;可以看到，注释掉deep:true这一行的时候，监测不到值变化。
    },
    newName: function (val, oldVal) {
      console.log('---newName watch---', this.newName)
    }
  }
}
</script>

运行结果如下：
vue-watch的运行结果-201992295138

选项/DOM

包含Vue的DOM操作，主要包括：

  • el
  • template
  • render
  • renderError

el

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。

运行时+编译器 vs 只包含运行时

1
2
3
4
5
6
7
8
9
10
11
// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

template

Vue中的template的三种写法：

第一种写法，直接写在构造器里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue中template的用法</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    template: '<h2>vue中template的第一种用法</h2>'
  })
</script>
</html>

第二种写法，直接写在html中的template标签里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue中template的用法</title>
</head>
<body>
<div id="app">
    <template id="mytemp">
        <h2>vue中template的第二种用法</h2>
    </template>
</div>
<!-- built files will be auto injected -->
</body>
<script src="vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    template: '#mytemp'
  })
</script>
</html>

第三种写法，写在script标签里面，官方推荐写法，script标签的type加上“template”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue中template的用法</title>
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
<script src="vue.js"></script>
<script type="x-template" id="mytemp">
    <h2>vue中template的第三种用法</h2>
</script>
<script>
  var app = new Vue({
    el: '#app',
    template: '#mytemp'
  })
</script>
</html>

render

该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

renderError