通过实例来看下 Vue 构造器中需要哪些内容

测试时这段代码我直接写在index.html中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <h1>site : {{site}}</h1>
  <h1>url : {{url}}</h1>
  <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_det',
    data: {
      site: "cyy",
      url: "www.baidu.com",
      course: "学习vue"
    },
    methods: {
      details: function() {
        return  this.site + "开始学习vue~";
      }
    }
  })
</script>
</body>
</html>

效果图

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化

上面那一长句其实我没咋看懂，大概意思就是数据会双向改变吧！

修改index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <h1>site : {{site}}</h1>
  <h1>url : {{url}}</h1>
  <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
  var data = { site: "cyy", url: "www.baidu.com", course: "学习vue"}
  var vm = new Vue({
    el: '#vue_det',
    data:data,
    methods: {
      details: function() {
        return  this.site + "开始学习vue~";
      }
    }
  })

  // 它们引用相同的对象！
  document.write(vm.site === data.site) // true
  document.write("<br>")

  // 设置属性也会影响到原始数据
  vm.site = "cyy2"
  document.write(data.site + "<br>") // cyy2

  // ……反之亦然
  data.course = "学习vue.js"
  document.write(vm.course) // 学习vue.js
</script>
</body>
</html>

效果图

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <h1>site : {{site}}</h1>
  <h1>url : {{url}}</h1>
  <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
  var data = { site: "cyy", url: "www.baidu.com", course: "学习vue"}
  var vm = new Vue({
    el: '#vue_det',
    data:data,
    methods: {
      details: function() {
        return  this.site + "开始学习vue~";
      }
    }
  })

  document.write(vm.$data === data) // true
  document.write("<br>")
  document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
</body>
</html>

效果图

Vue.js 起步的更多相关文章

  1. Vue.js起步

    Vue.js是一套构建用户界面的 渐进式框架,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层.Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. V ...

  2. 第五篇:vue.js起步

    <div id="vue_det"> //使改动全部在指定的 div 内,div 外部不受影响 <h1>site : {{site}}</h1> ...

  3. Vue.js：起步

    ylbtech-Vue.js:起步 1.返回顶部 1. Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) ...

  4. Vue.js官方文档学习笔记(一)起步篇

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

  5. Vue.js 2.0 学习重点记录

      Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...

  6. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

  7. Vue.js 教程 -- 实例讲解

    一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...

  8. （私人收藏）Vue.js手册及教程

    (私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...

  9. Vue.js 2.x笔记：安装与起步（1）

    1. 环境准备 Vue是一套用于构建用户界面的渐进式框架,设计为可以自底向上逐层应用.Vue 的核心库只关注视图层. 安装Node.js,下载:https://nodejs.org/ 查看安装: $ ...

随机推荐

  1. .net core 连接数据库(通过数据库生成Modell)

    创建数据库 (扫盲贴还劳烦大神们勿喷,谢谢) 打开数据库 输入如下代码 创建数据库 CREATE DATABASE [Blogging]; GO USE [Blogging]; GO CREATE T ...

  2. [bzoj2038] [洛谷P1494] [2009国家集训队] 小Z的袜子(hose)

    Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把这N只 ...

  3. 机器学习环境配置系列四之theano

    决定撰写机器学习环境配置的主要原因就是因为theano的配置问题,为了能够用上gpu和cudnn加速,我是费劲了力气,因为theano1.0.0在配置方面出现了重大改变,而网上绝大多数都很老,无法解决 ...

  4. Cobalt_Strike扩展插件

    Cobalt_Strike3.14下载: https://download.csdn.net/download/weixin_41082546/11604021 https://github.com/ ...

  5. PyCharm2019.3.2专业版激活

    PyCharm2019.3.2专业版激活 Ryan 蚂蚁小黑  PyCharm 专业版激活 今天是除夕,在这阖家团圆的日子里,祝大家新春快乐,鼠年大吉,愿大家在新的一年里身体健康,万事如意! 新的一年 ...

  6. 《HelloGitHub》第 46 期

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...

  7. python基础面试集锦(51-100)

    目录 51.把aaabbbcccdd这种形式的字符串压缩成a3b3c3d2的形式? 52.给你一个字符串'abc',打印出该字符串的所有排列组合? 53.执行以下代码后,x的值为? 54.对于一个非空 ...

  8. angular之模块开发一

    模块化开发 概述 什么是模块化开发 将软件产品看作为一系列功能模块的组合 通过特定的方式实现软件所需模块的划分.管理.加载 为什么使用模块化开发 https://github.com/seajs/se ...

  9. 「C++ 篇」答应我，别再if/else走天下了可以吗

    每日一句英语学习,每天进步一点点: "Without purpose, the days would have ended, as such days always end, in disi ...

  10. latex使用总结

    1 输入双引号以及单引号: 双引号:按两下 Tab键上方的键, 再按两下单引号键. 单引号:按一下Tab键上方的键,再按一下单引号键. 原文地址 2 时间复杂度的O写法: $\mathcal{O}$ ...