<!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. 梯度下降(HGL)

    线性回归:是利用数理统计中回归分析,来确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法. 对于一般训练集:                参数系统为:      线性模型为:      损 ...

  2. 【题解】洛谷P2426删数

    链接 https://www.luogu.org/problemnew/show/P2426 念念碎 第一次接触到区间DP(瑟瑟发抖) 所以象征性地看了一下题解 这好像是一道比较基础的区间DP吧 但是 ...

  3. ProjectServer如何创建时间表

    默认配置的ProjectServer是没有时间表的,任务汇报的时候不能汇报工时,只能汇报任务的百分比. 但如果有企业一定要用工时来汇报的话,我们就需要开启时间表. 点击服务器设置-->时间报告阶 ...

  4. Question 20171114 String的一些问题?

    欢迎各位大神提问题及补充不足和警醒错误! Question 20171113  Java中char为什么占用两个字节? Java是使用Unicode编码的所以Java会将源代码以Unicode的方式编 ...

  5. Android 初步-Android文件目录介绍

    src:存放的是应用程序使用到的java文件. gen:系统自动生成的目录,不需要程序员进行修改,包含了R.java文件.该文件包含了 程序使用到的资源文件对应的唯一资源ID,注意:如果R文件生成错误 ...

  6. java8新特性学习1

    java8增加了不少新特性,下面就一些常见的新特性进行学习... 1.接口中的方法 2.函数式接口 3.Lambda表达式 4.java8内置的四大核心函数式接口 5.方法引用和构造器引用 6.Str ...

  7. 编写可维护的JavaScript之编程风格

    在团队中只有每个人的编程风格一致,大家才能方便的互相看懂和维护对方的代码. 1. 层级缩进 对于层级缩进目前有两种主张:1)使用制表符这种方法有两种好处,第一,制表符和缩进层级之间是一一对应关系,符合 ...

  8. 【HDOJ 1272】小希的迷宫（并查集+无环图）

    描述 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道 ...

  9. 前端pc版的简单适配

    我们都知道对于前端pc版本的适配是一个难题,大部分都是做的媒体查询.但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示.我就在考虑为啥不用rem给pc端做个适配. 我是基于设计图是1920 ...

  10. php 移动或重命名文件(图片)到另一目录下的方法有多种，这里只列出三种：

    php 移动或重命名文件(图片)到另一目录下的方法有多种,这里只列出三种:       方法一:使用copy函数   格式:copy(source,destination)   将文件从 source ...