我们学习一门新语言或者框架时,第一件事是什么呢,那必然是向世界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标签内容也做相应改变,虽然代码很简单,还是能体会到双向绑定的精髓。

双向绑定(面试考点)

  1. 通过构造函数创建一个Vue实例 new Vue(),此时app就相当于 new Vue;
  2. 传入el,el是Vue对象中必不可少的,需要把el挂载到页面已存在的DOM(可以是DOM元素,或者是CSS选择器)上;
     var app = new Vue({
    el: '#app', // 或者document.getElementById('app')
    })
  3. 在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基础之数据绑定的更多相关文章

  1. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  2. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  3. Vue基础系列(三)——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  6. 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 ...

  7. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  8. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  9. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

随机推荐

  1. c语言五子棋

    #include <stdio.h>#include <stdlib.h>#include <windows.h>#include <conio.h> ...

  2. python第三方库------jieba库(中文分词)

    jieba“结巴”中文分词:做最好的 Python 中文分词组件 github:https://github.com/fxsjy/jieba 特点支持三种分词模式: 精确模式,试图将句子最精确地切开, ...

  3. Java面向对象编程思想

    面向对象三个特征:封装.继承.多态封装:    语法:属性私有化(private).提供相对应的get/set 的方法进行访问(public). 在set/get的方法中对属性的数据 做相对应的业务逻 ...

  4. lua 基础 之 坑一样的地方

    -- local 局部-- local表=全局表,是同一个表,这主要是由于lua的表机制是匿名的,相当于函数的指针,local foo = foo,-- 即使本地foo没有在全局_G注册,还是引用的是 ...

  5. Vue-router的传参方式和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$rout ...

  6. npm由来和作用

    npm由来 本文转载自: https://blog.csdn.net/qq_37696120/article/details/80507178 npm作用 本文转载自: https://www.cnb ...

  7. 如何使用ESP8266、ESP8285做一个WiFi中继(WiFi信号放大器)

    准备工作 准备一个深圳四博智联科技有限公司的ESP-F 模组.或者四博智联科技的NODEMCU 当我们拿到ESP-F模块后,可以按照以下接线进行测试: 即 VCC.EN 接 3.3v.GPIO15 G ...

  8. admin 显示多对多字段

    class BookAdmin(admin.ModelAdmin): def 作者(self, object): return [a.name for a in object.author.all() ...

  9. ef 增加或者更新的习惯思维

    首先申明是我的习惯思维,经常这样写: var item=db.tableName.FirstOrDefault(ii=>....); if(item==null) { item=new ...; ...

  10. python的标识符

    1.在pyhon中,标识符由字母.数字.下划线组成 2.在python中,所有标识符可以有字幕,下划线开头,但不能以数字开头 3.python的标识符是区分大小写的 4.以下划线开头的标识符是有特殊意 ...