<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue实例创建</title>

</head>

<body>

<h3 id="example">{{ message }}</h3>

<script type="text/javascript" src="vue.min.js"></script>

<script>

    let data = {message: 'Hello Vue.'};

    // 每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例

    let vm = new Vue({

        el: '#example',

        data: data

    });

    console.log(vm.message === data.message);

    // 数据是双向绑定

    vm.message = 'Hello Vue World.';

    console.log(data.message);

    data.message = 'Hello Vue World, ha ha.';

    console.log(vm.message);

    console.log(vm.$data === data);

    console.log(vm.$el === document.getElementById('example'));

    vm.$watch('message', function (newVal, oldVal) {

        // 这个回调将在 `vm.message`  改变后调用

        console.log('改变前：message=' + oldVal);

        console.log('改变后：message=' + newVal);

    });

    vm.message = 'Hello Vue.';

</script>

</body>

</html>

Vue学习（一）：Vue实例的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  4. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  5. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  6. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  7. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  8. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  9. vue学习之一vue初识

    一.vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 ...

  10. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

随机推荐

  1. 2018中国大学生程序设计竞赛 - 网络选拔赛 1009 - Tree and Permutation 【dfs+树上两点距离和】

    Tree and Permutation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  2. 【洛谷P1363】幻象迷宫

    P1363 幻想迷宫 显然,若从原图中起点走到相邻的图中对应的"起点"位置 ,就可以无限走下去, 若一个点从原图中可以到达,到了非原图中也可以到达,就可以无限走下去 我们不妨记录下 ...

  3. window与MAC，多台机器ssh免密码登录同一台机器执行某个脚本，

    参考:https://zhidao.baidu.com/question/586579720.html A B C三台机器上以当前用户运行如下命令生成本主机的公钥和私钥文件: 1 ssh-keygen ...

  4. idea常用技巧

    1.如何设置,使IntelliJ IDEA智能提示忽略大小写 打开设置(CTRL+ALT+S)搜索editor,找到“Code Completion”->点击Case sensitive com ...

  5. C++ push方法与push_back方法

    [转载他人的文章,下午在搞c++,谢谢共享] [摘要] push与push_back是STL中常见的方法,都是向数据结构中添加元素.初识STL,对于添加元素的方法以产生混淆,这里暂对两种方法作出比较分 ...

  6. 【2018 ICPC焦作网络赛 K】Transport Ship（多重背包二进制优化）

    There are N different kinds of transport ships on the port. The ith kind of ship can carry the weigh ...

  7. 大专生自学c++到找到工作的前前后后

    先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...

  8. Spring Boot多环境配置

    在项目开发阶段,开发环境和实际生产环境是不一样,比如使用的数据库/服务连接配置等.因此,配置多个开发环境profile还是必要的 多环境的配置(yml)方式 配置其实很简单,在resource目录下, ...

  9. Linux centos7 安装python3 及 GCC

    1.用wget下载python源码 PYTHON下载 找适合自己的版本,我下载的是3.7.2 2.用tar命令解压下载的文件 tar -zxvf Python-3.7.2.tgz 3.进入目录解压后的 ...

  10. 编译安装开源免费中文分词scws

    一.SCWS了解一下: SCWS 是 Simple Chinese Word Segmentation 的首字母缩写(即:简易中文分词系统). 这是一套基于词频词典的机械式中文分词引擎,它能将一整段的 ...