<!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. 【洛谷P2447】[SDOI2010]外星千足虫

    外星千足虫 题目链接 首先,它一看题解就是个高斯消元 只是改成了奇偶性的判断 性质: 奇数+奇数=偶数 奇数+偶数=奇数 偶数+奇数=奇数 偶数+偶数=偶数 于是我们用1表示奇数,0表示偶数 1+1= ...

  2. FreeImage.lib库的配置和简单使用 转

    转载地址 http://www.codeweblog.com/win8-1%E4%B8%8Bfreeimage-lib%E5%BA%93%E7%9A%84%E9%85%8D%E7%BD%AE%E5%9 ...

  3. jquery 跨域获取网页数据

    <script language="javascript" src="http://cbsahhs.blog.163.com/jquery.min.js" ...

  4. 在VS2010 中使用subversion 进行代码的分支与合并

    在实际开发总,遇到了这种情况: 开发版本1,开发版本2 ,更新产品时要求1在前,2在后. 但是因为时间要求,必须2个版本同时开发.这时就想到了在svn的版本分支合并. 创建分支之前,首先把当前版本代码 ...

  5. Entity Framework 六

    实体框架中的存储过程: 我们在创建edmx的时候把存储过程勾选了,所以在我们的上下文上中生成了方法. 存储过程为:就是需要显示多个表的字段.以往需要显示多个表的字段都是新建一个类把需要的字段当做属性写 ...

  6. 课时90.div和span（掌握）

    为什么在这里讲解div和span呢,而不在html中讲解呢? 因为在我们的开发中div和span一般是配合css来使用的,来完成一定的效果,来设置一些属性,在前面我们没有学习css,所以体会不到它的效 ...

  7. TensorFlow安装环境的误区

    安装py一定要注意安装的版本,我一开始安装的3.7版本的,现在还没有支持,另外,看清楚自己电脑是32位还是64位的

  8. Shiro 登录认证源码详解

    Shiro 登录认证源码详解 Apache Shiro 是一个强大且灵活的 Java 开源安全框架,拥有登录认证.授权管理.企业级会话管理和加密等功能,相比 Spring Security 来说要更加 ...

  9. Reverse a String-freecodecamp算法题目

    Reverse a String(翻转字符串) 题目要求: 把字符串转化成数组 借助数组的reverse方法翻转数组顺序 把数组转化成字符串 思路: 用.split('')将字符串转换成单个字母组成的 ...

  10. 前行记录 - NOIP2018游记

    NOIP2018游记 - 前行记录 NOIP2018 完跪……滚回学校考半期 QwQ 这篇不是题解 awa ,题解之后会发布的,毕竟我还没有AC呢 又及……G2020 陌路笙歌 - 再见(╯▽╰) 感 ...