1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue实例创建</title>
  6. </head>
  7. <body>
  8. <h3 id="example">{{ message }}</h3>
  9. <script type="text/javascript" src="vue.min.js"></script>
  10. <script>
  11.     let data = {message: 'Hello Vue.'};
  12.     // 每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例
  13.     let vm = new Vue({
  14.         el: '#example',
  15.         data: data
  16.     });
  17.  
  18.     console.log(vm.message === data.message);
  19.  
  20.     // 数据是双向绑定
  21.     vm.message = 'Hello Vue World.';
  22.     console.log(data.message);
  23.     data.message = 'Hello Vue World, ha ha.';
  24.     console.log(vm.message);
  25.  
  26.     console.log(vm.$data === data);
  27.     console.log(vm.$el === document.getElementById('example'));
  28.  
  29.     vm.$watch('message', function (newVal, oldVal) {
  30.         // 这个回调将在 `vm.message`  改变后调用
  31.         console.log('改变前：message=' + oldVal);
  32.         console.log('改变后：message=' + newVal);
  33.     });
  34.     vm.message = 'Hello Vue.';
  35. </script>
  36. </body>
  37. </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. About me and this site(2018/8/28)

    Name: 李秋豪 / [lǐ qiū háo] I'm a junior majoring in InfoSec at Harbin Institute of Technology. I'm int ...

  2. 【洛谷P1538】迎春舞会之数字舞蹈

    迎春舞会之数字舞蹈 题目链接 一道奇怪的模拟题, 先将样例输出复制下来,观察观察 -- -- -- -- -- -- -- -- ① | | | | | | | | | | | | | | ② | | ...

  3. Android学习笔记_26_多媒体之拍照

    一.配置文件: 需要引入摄像头权限,sdcard读写权限. <?xml version="1.0" encoding="utf-8"?> <m ...

  4. HTML5标签应用

    <!doctype html> <html> <head> <style> /* *{border:1px solid red;height:20px} ...

  5. Python使用dict和set

    dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也成为map,使用键-值(key-value)存储,具有极快的查找速度. 假设要根据同学的名字查找对应的 ...

  6. 课时59.体验css（理解）

    我们想做这样一个样式,应该怎么做? 分析: 有一个标题(h1),还有一些段落(p) 标题是居中的,段落也是居中的,所以我们可以设置h标签和p标签居的align属性等于center来实现 标题和段落都有 ...

  7. vue2.0移除或更改的一些东西

    一.vue2.0移除了$index和$key 虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key, ...

  8. Openresty最佳案例 | 汇总

    转载请标明出处: http://blog.csdn.net/forezp/article/details/78616856 本文出自方志朋的博客 目录 Openresty最佳案例 | 第1篇:Ngin ...

  9. Spring boot中使用servlet filter

    Spring boot中使用servlet filter liuyuhang原创,未经允许请勿转载! 在web项目中经常需要一些场景,如参数过滤防止sql注入,防止页面攻击,空参数矫正等, 也可以做成 ...

  10. ETO的公开赛T1《矿脉开采》题解（另类版）

    这道题别看是签到题,写起来一点不简单 出题人的正解是双向搜索 我们把物品分成两半 每一半分别跑搜索 答案存下来,用个双指针合并即可 然后我构造了两组数据卡掉了他,不得不缩小数据范围 但我这里为什么要致 ...