Vue基础之数据绑定
我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。
创建一个Vue应用
话不多说，先上代码，让我们感受一下Vue的核心功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<h1>{{message}}</h1> // {{message}}模板的输出方式
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue实例的挂在对象
data: {
message: "Hello world" // 字面量
}
})
</script>
</body>
</html>
当修改输入框内容时，h1标签内容也做相应改变，虽然代码很简单，还是能体会到双向绑定的精髓。
双向绑定（面试考点）
- 通过构造函数创建一个Vue实例 new Vue()，此时app就相当于 new Vue；
- 传入el，el是Vue对象中必不可少的，需要把el挂载到页面已存在的DOM（可以是DOM元素，或者是CSS选择器）上；
var app = new Vue({
el: '#app', // 或者document.getElementById('app')
})
- 在input标签上有一个v-model指令，它的值和Vue实例中data里的message对应，input可以修改message的值，同时当message改变时也可以体现在视图上；
生命周期（开发时必了解）
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就Vue的生命周期。下面是Vue的几个钩子函数：
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
下图是Vue生命周期过程中el、data以及data里面的message字段的变化
以上是本期全部内容，欲知后事如何，请听下回分解<(￣︶￣)↗[GO!]
Vue基础之数据绑定的更多相关文章
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
随机推荐
- java类的理解和相关问题
---java抽象类 当我们定义的对象无法抽象或者不适合抽象为一个具体的类的时候 我们通常定义其为一个抽象类 like 衣服 (多种衣服) 手机 (多种手机) ---接口和抽象类的异同 对于概念上来说 ...
- JAVA EE 的学习目标
本学期是大三下学期,是一个很关键的学习期.在这里定下一个短期的目标. 职业发展目标:我的职业目标其实不是计算机方向,我是准备考公.但是,作为第二手专业打算,如果考公务员失败,我根据我的性格来分析我会选 ...
- ubuntu16.04安装pycharm
Ubuntu16.04下,默认安装了python2.7和python3.5,在终端下,输入“Python” 或“python3”可查看具体版本. 1.安装PyCharm前,先配置PyCharm的JD ...
- 第二章01：Hello world 案例
java程序开发 = 三部曲 源文件+编译器+字节码文件+解释器=结果 源文件:编写Java源文件(我们也称之为源代码文件),它的扩展名为.java: 编译:然后通过编译器把源文件编译成字节码文件,字 ...
- 一个简单的Quartz定时任务
package com.shuadan.quartz; import org.springframework.scheduling.annotation.Scheduled; import org.s ...
- 使用turtle画故宫（伍奇，侯俊豪小组）
这个代码主要有两个部分,第一部分是画出故宫,第二部分是用random函数随机画心,故宫部分设置多个函数和循环再进行颜色填充即可完成. 此处为视频链接 from turtle import* impor ...
- jq解决a连接锚点平滑过渡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- ajax csrf
data 里加 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), 还要再 form表单里加{% csrf_t ...
- Problem 1: Multiples of 3 and 5
小白一枚,python解法,共同学习,一起进步. Problem 1: Multiples of 3 and 5 If we list all the natural numbers below 10 ...
- 根据图片URL获取图片的尺寸【Swift语言实现】
import UIKit extension UIImage { /// 获取网络图片尺寸 /// /// - Parameter url: 网络图片链接 /// - Returns: 图片尺寸siz ...