Vue2.5开发去哪儿网App 第三章笔记 上
1. vue 生命周期函数
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会
生命周期图示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期函数</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
el:'#app',
data:{
test:'template option'
},
template:'<div>{{test}}</div>',
beforeCreate:function () {
// 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 console.log('beforCreate')
},
created:function () {
// 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 console.log('created')
},
beforeMount:function () {
// 在挂载开始之前被调用：相关的 render 函数首次被调用 console.log('beforeMount')
console.log(this.$el);
},
mounted:function () {
// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 console.log('mounted')
console.log(this.$el); this.$data.test = '我改变了test'
// beforeUpdate updated方法 },
beforeDestroy:function () {
// 实例销毁之前调用。在这一步，实例仍然完全可用。 console.log('beforeDestrory')
},
destroyed:function () {
// ue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 console.log('destroyed')
},
beforeUpdate:function () {
// 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 console.log('boforeUpdate')
},
updated:function () {
// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
// 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 console.log('updated')
this.$destroy();
// 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
// 触发 beforeDestroy 和 destroyed 的钩子。
}
})
</script>
</body>
</html>
2. 模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
{{name}}
<!--#插值表达式-->
<div v-text="name"></div>
<!--文本-->
<div v-html="name" :title="title"></div>
<!--被插入的内容都会被当做 HTML —— 数据绑定会被忽略--> <div v-text="age + '岁'"></div> <!--#过滤器-->
{{ msg | capitalize }} <a v-bind:href="url">百度一下</a> v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a> v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a> </div>
<script>
var app = new Vue({
el:'#app',
data:{
name:'<h1>Dell</h1>',
title:'this is a title',
age:20,
msg:'this is a message',
url:'https://www.baidu.com/'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
console.log(app.$data)
</script>
</body>
</html>
3. 计算属性，方法，侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性，方法，侦听器</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<!--获取fullName-->
<!--第一种方式-->
<!--{{ fullName }}--> <!--第二种方式-->
<!--{{getFullName()}}--> <!--第三种方式-->
{{fullName}} {{ age }} </div>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
age:20,
fullName:'Dell Lee'
},
// #计算属性 缓存机制，如果依赖的值没有发生改变，不会重新执行
// computed:{
// fullName:function () {
// console.log('fullName 计算了一次')
// return this.firstName+" "+this.lastName
// }
// },
// methods:{
// // 即使依赖的值没有发生改变，也会重新执行
// getFullName:function () {
// console.log('getFullName 计算了一次')
// return this.firstName+" "+this.lastName
// }
// },
watch:{
// #类似computed
firstName:function () {
console.log('我执行了firstName')
return this.fullName = this.firstName+this.lastName
},
lastName:function () {
return this.fullName = this.firstName+this.lastName
console.log('我执行了lastName')
},
}
})
</script>
</body>
</html>
4. 计算属性的 setter,getter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性setter和getter</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:'Dell',
lastName:'Lee',
},
computed: {
fullName: {
// #依赖的值发生改变时，执行
get:function () {
return this.firstName + " " + this.lastName
},
set:function (value) {
var name = value.split(" ");
console.log(name);
this.firstName = name[0];
this.lastName = name[1];
}
}
}
})
</script>
</body>
</html>
Vue2.5开发去哪儿网App 第三章笔记 上的更多相关文章
- Vue2.5开发去哪儿网App 第五章笔记 上
1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...
- Vue2.5开发去哪儿网App 第四章笔记 上
一 . 组件细节知识点 1. 解决组件在h5中编码规范 例如 : table , ul , ol 等等 <table> <tbody> <row></r ...
- Vue2.5开发去哪儿网App 第三章笔记 下
1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class 例如: :class="{activated:isactivated}" 上面的语法 ...
- Vue2.5开发去哪儿网App 第五章笔记 下
1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...
- Vue2.5开发去哪儿网App 第四章笔记 下
1.解决非父子组件之间的传值问题 非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 给 Vue类上挂在一个属性,然后创建vue实例时,实例就拥有了这个属性 Vue.prototype.bus ...
- Vue2.5 开发去哪儿网App
Vue2.5开发去哪儿网App 技术栈和主要框架
- Vue2.5开发去哪儿网App 首页开发
主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- Vue2.5开发去哪儿网App 从零基础入门到实战项目
第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...
随机推荐
- java常用设计模式七：装饰模式
一.概念 装饰模式可以在不改变一个对象本身功能的基础上给对象增加额外的新行为. 基本角色: 抽象构件:它是具体构件和抽象装饰类的共同父类,声明了在具体构件中实现的业务方法,它的引入可以使客户端以一致的 ...
- es6函数的新语法
函数的默认值 function(x,y=10){ //赋予了y就有了默认值为10,如果y赋值了,就回被覆盖,否则就是默认值10 变量已经有默认值了,所以不用再次用let或者const声明啦 }
- 根据方法名获取方法Body Content
利用 MethodBody类的GetILAsByteArray方法可以获取到返回字节数组的MSIL的body.然后再去解析此字节数组, 可以得到MSIL,然后你再去解析MSIL,你就可以得到你想到so ...
- [转]深入理解mysqldump原理
本文转至:http://blog.csdn.net/cug_jiang126com/article/details/49824471 在mysqldump过程中,之前其实一直不是很理解为什么加了--s ...
- 好文推荐系列--------(1)bower---管理你的客户端依赖
好文原文地址:http://segmentfault.com/a/1190000000349555 编者注:我们发现了比较有趣的系列文章<30天学习30种新技术>,准备翻译,一天一篇更新, ...
- Kafka常用命令收录
目录 目录 1 1. 前言 2 2. Broker默认端口号 2 3. 安装Kafka 2 4. 启动Kafka 2 5. 创建Topic 2 6. 列出所有Topic 3 7. 删除Topic 3 ...
- C#-ado.net学习笔记-会有更新
ado.net 通用类对象.在本地内存暂存数据 托管类对象.让本地通用类对象连接数据库,让本地通用类对象和数据库同步 连接数据库 new connection(connectstring) comma ...
- （ 递归 ）Fractal -- POJ -- 2083
http://poj.org/problem?id=2083 Fractal Time Limit: 1000MS Memory Limit: 30000K Total Submissions: ...
- 将电脑信息上传到中国移动ONENET平台
用两个小时做的 可以用在服务器远程运维等环境非常方便 需要源码的可以联系NBDX123
- Java中方法重写和方法重载
首先方法重写和方法重载是建立在Java的面向对象的继承和多态的特性基础上而出现的.至于面向对象的继承和多态的特性我就不在这里多说了.继承是指在一个父类的基础再创建一个子类,这样子类就拥有了父类的非私 ...