扶我起来,我还可以学～

前端
字数统计: 2.4k字   |   阅读时长≈ 10分钟
Author：闫玉良
长路漫漫，唯夜作伴。虽然一天的工作头昏脑胀，但是仍然放不下我心心念念的前端啊，扶我起来，我还可以学～

学习喜欢的事情，也是一种放松，come on！

更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

上篇文章讲了 Vue 的一些基础概念，语法。今天上些难度。

1.实例生命周期

如同人的生老病死，实力对象也有其本身的生命周期。当我们深入了解每一个阶段之后，才会在合适的阶段添加合适的功能。那么如何在合适的阶段完成所需需求呢？那就用到了生命周期钩子。类比 Flask 中的请求钩子，Django 中的中间件，不知这样说你是否更好理解。下面我们就来看看有哪些钩子：

1.1 beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

1.2 created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始

1.3 beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

1.4 mounted

实例挂载到 dom 之后被调用，可以当成是 vue 对象的 ready 方法来使用，一般用它来做 dom 的初始化操作。

1.5 beforeUpdate

数据发生变化前调用

1.6 updated

数据发生变化后调用

1.7 beforeDestroy

挂载完毕，数据更新完成之后；解除绑定，销毁子组件以及事件监听器之前调用。

1.8 destroyed

销毁完毕之后调用。

2.表单输入绑定

可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

2.1单行文本框

1
2
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

2.2 多行文本框

1
2
3
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

2.3 复选框

单个复选框，绑定到布尔值：

1
2
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框，绑定到同一个数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

......

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

2.4 单选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

......

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

2.5 下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

......

new Vue({
  el: '...',
  data: {
    selected:''
  }
})

3.计算属性&监听属性

3.1 计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

1
2
3
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

这个表达式的功能是将message字符串进行反转，这种带有复杂逻辑的表达式，我们可以使用计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

......

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

3.2 侦听属性

侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function(){
    var vm = new Vue({
        el:'#app',
        data:{
            iNum:1
        },
        watch:{
            iNum:function(newval,oldval){
                console.log(newval + ' | ' + oldval) 
            }
        },
        methods:{
            fnAdd:function(){
                this.iNum += 1;
            }
        }
    });
}

4.过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

1
2
3
4
5
<!-- 在双花括号中 -->
{{ prize | RMB }}

<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器实际上是一个函数，可以在一个组件的选项中定义组件内部过滤器：

1
2
3
4
5
6
7
8
9
filters:{
  RMB:function(value){
    if(value=='')
    {
      return;
    }
    return '¥ '+value;
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

1
2
3
4
5
6
7
Vue.filter('Yuan',function(value){
  if(value=='')
  {
    return;
  }
  return value+'元';
});

此时过滤器’RMB’只能在定义它的对象接管标签内使用，而 ‘Yuan’ 可以全局使用

5. 数据交互

vue.js没有集成ajax功能，要使用ajax功能，可以使用vue官方推荐的axios.js库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios/releases

5.1 axios完整写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

axios请求的写法也写成get方式后post方式。

5.2 执行get请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应

axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});


// 可选地，上面的请求可以这样做
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

5.3 执行post请求

1
2
3
4
5
6
7
8
9
10
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

6.ES6 语法

6.1 变量声明let和const

let 和 const 是新增的声明变量的开头的关键字，在这之前，变量声明是用 var 关键字，这两个关键字和 var 的区别是，它们声明的变量没有预解析，let 和 const 的区别是，let 声明的是一般变量，const 申明的常量，不可修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
alert(iNum01) // 弹出undefined
// alert(iNum02); 报错，let关键字定义变量没有变量预解析
// alert(iNum03); 报错，const关键字定义变量没有变量预解析

var iNum01 = 6;
// 使用let关键字定义变量
let iNum02 = 12;
// 使用const关键字定义变量
const iNum03 = 24;

alert(iNum01); // 弹出6
alert(iNum02); // 弹出12
alert(iNum03); // 弹出24

iNum01 = 7;
iNum02 = 13;
//iNum03 = 25; // 报错,const定义的变量不可修改,const定义的变量是常量

alert(iNum01)
alert(iNum02); 
alert(iNum03);

6.2 箭头函数

可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定 this，解决了 JavaScript 中 this 指定混乱的问题。

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
// 定义函数的一般方式
/*
function fnRs(a,b){
    var rs = a + b;
    alert(rs);
}
fnRs(1,2);        
*/

// 通过匿名函数赋值来定义函数
/*
var fnRs = function(a,b){
    var rs = a + b;
    alert(rs);
}
fnRs(1,2);
*/

// 通过箭头函数的写法定义
var fnRs = (a,b)=>{
    var rs = a + b;
    alert(rs);
}        
// fnRs(1,2);

// 一个参数可以省略小括号
var fnRs2 = a =>{
    alert(a);
}
fnRs2('haha!');


// 箭头函数的作用，可以绑定对象中的this
var person = {
    name:'tom',
    age:18,
    showName:function(){
        setTimeout(()=>{
            alert(this.name);
        },1000)            
    }
}
person.showName();

6.3 模块导入import和导出export

javascript 之前是没有模块的功能的，之前做 js 模块化开发，是用的一些 js 库来模拟实现的，在 ES6 中加入了模块的功能，和 python 语言一样，python 中一个文件就是一个模块，ES6 中，一个 js 文件就是一个模块，不同的是，js 文件中需要先导出 (export) 后，才能被其他 js 文件导入(import)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// model.js文件中导出
var person = {name:'tom',age:18}
export default {person}

// index.js文件夹中导入
import person from 'js/model.js'

// index.js中使用模块
person.name
person.age

/*
上面导出时使用了default关键字，如果不使用这个关键字，导入时需要加大括号：
import {person} from 'js/model.js'
*/

目前ES6的模块功能需要在服务器环境下才可以运行。

6.4 对象的简写

javascript 对象在 ES6 中可以做一些简写形式，了解这些简写形式，才能方便我们读懂一些在 javascript 代码中简写的对象。

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
let name = '李思';
let age = 18;

/*
var person = {
    name:name,
    age:age,
    showname:function(){
        alert(this.name);
    },
    showage:function(){
        alert(this.age);
    }
}
*/

// 简写成下面的形式
var person = {
    name,
    age,
    showname(){
      alert(this.name);
    },
    showage(){
      alert(this.age);
    }
}

person.showname();
person.showage();
打赏
  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • 页面访问量: 独立访客访问数:
  • 更多精彩文章请关注微信公众号『全栈技术精选』，id 为『Pythonnote』

请我喝杯咖啡吧~

支付宝
微信