长路漫漫,唯夜作伴。虽然一天的工作头昏脑胀,但是仍然放不下我心心念念的前端啊,扶我起来,我还可以学~
学习喜欢的事情,也是一种放松,come on!
上篇文章讲了 Vue
的一些基础概念,语法。今天上些难度。
如同人的生老病死,实力对象也有其本身的生命周期。当我们深入了解每一个阶段之后,才会在合适的阶段添加合适的功能。那么如何在合适的阶段完成所需需求呢?那就用到了生命周期钩子。类比 Flask
中的请求钩子,Django
中的中间件,不知这样说你是否更好理解。下面我们就来看看有哪些钩子:
在实例初始化之后,数据观测 (data observer
) 和 event/watcher
事件配置之前被调用。
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer
),属性和方法的运算,watch/event
事件回调。然而,挂载阶段还没开始
在挂载开始之前被调用:相关的 render
函数首次被调用。
实例挂载到 dom
之后被调用,可以当成是 vue
对象的 ready
方法来使用,一般用它来做 dom
的初始化操作。
数据发生变化前调用
数据发生变化后调用
挂载完毕,数据更新完成之后;解除绑定,销毁子组件以及事件监听器之前调用。
销毁完毕之后调用。
可以用 v-model
指令在表单 <input>
及 <textarea>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
单个复选框,绑定到布尔值:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框,绑定到同一个数组:
<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: []
}
})
<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: ''
}
})
<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:''
}
})
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
这个表达式的功能是将 message
字符串进行反转,这种带有复杂逻辑的表达式,我们可以使用计算属性
<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('')
}
}
})
侦听属性的作用是侦听某属性值的变化,从而做相应的操作,侦听属性是一个对象,它的键是要监听的对象或者变量,值一般是函数,当你侦听的元素发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
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;
}
}
});
}
Vue.js
允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind
表达式
<!-- 在双花括号中 -->
{{ prize | RMB }}
<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器实际上是一个函数,可以在一个组件的选项中定义组件内部过滤器:
filters:{
RMB:function(value){
if(value=='')
{
return;
}
return '¥ '+value;
}
}
或者在创建 Vue
实例之前全局定义过滤器:
Vue.filter('Yuan',function(value){
if(value=='')
{
return;
}
return value+'元';
});
此时过滤器 RMB
只能在定义它的对象接管标签内使用,而 Yuan
可以全局使用
vue.js
没有集成 ajax
功能,要使用 ajax
功能,可以使用 vue
官方推荐的 axios.js
库来做 ajax
的交互。 axios
库的下载地址:https://github.com/axios/axios/releases
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
方式。
// 为给定 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);
});
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
let
和 const
是新增的声明变量的开头的关键字,在这之前,变量声明是用 var
关键字,这两个关键字和 var
的区别是,它们声明的变量没有预解析,let
和 const
的区别是,let
声明的是一般变量,const
申明的常量,不可修改。
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);
可以把箭头函数理解成匿名函数的第二种写法,箭头函数的作用是可以在对象中绑定 this
,解决了 JavaScript
中 this
指定混乱的问题。
// 定义函数的一般方式
/*
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();
javascript
之前是没有模块的功能的,之前做 js
模块化开发,是用的一些 js
库来模拟实现的,在 ES6
中加入了模块的功能,和 python
语言一样,python
中一个文件就是一个模块,ES6
中,一个 js
文件就是一个模块,不同的是,js
文件中需要先导出 (export
) 后,才能被其他 js
文件导入(import
)
// 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
的模块功能需要在服务器环境下才可以运行。
javascript
对象在 ES6
中可以做一些简写形式,了解这些简写形式,才能方便我们读懂一些在 javascript
代码中简写的对象。
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();