通过实例来看下 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. 【模板】2-SAT问题

    问题简述 有 \(n\) 个变量,每个变量可赋为 \(1\) 或 \(0\) 必须满足一些限制条件,如" \(a\) 为1 或 \(b\) 为0 " " \(a\) 为0 ...

  2. [bzoj2152] [洛谷P2634] 聪聪可可

    Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)--遇到这种问题,一般情况下石头剪刀布就好 ...

  3. python3操作PyMySQL笔记

    python3操作mysql需要先安装PyMySQL pip install PyMySQL 在linux登录mysql ,并且在安装数据库时设置了数据库的用户名“root”和密码“root”,mys ...

  4. jvm内存模型、常见参数及调优

    JVM内存结构: 主要分为:方法区.堆.虚拟机栈.本地方法栈.程序计数器,其中方法区和堆是线程共享的,其他的都是线程隔离的. 方法区: 主要存放类的信息.静态变量.常量.编译后的方法代码,永久代Per ...

  5. 软件发布！DOTA2统计学

    更新日志: 1.2 增加DOTABUFF作为数据源,可以与DOTAMAX切换 1.1 增加关于对话框 增加版本信息 修复列表框头的错误   受到 http://tieba.baidu.com/p/38 ...

  6. nuxt.js学习初探

    项目目标 把我个人博客的前端界面部分使用nuxt框架进行服务端渲染 nuxt介绍 nuxt可以把spa根据路由将单页面分割成多页面,比起vue的ssr渲染要更容易使用 nuxt的使用 项目创建 npx ...

  7. JDK源码之Double类&Float类分析

    一 概述 Double 类是基本类型double的包装类,fainl修饰,在对象中包装了一个基本类型double的值.Double继承了Number抽象类,具有了转化为基本double类型的功能. 此 ...

  8. Leetcode 题目整理 Sqrt && Search Insert Position

    Sqrt(x) Implement int sqrt(int x). Compute and return the square root of x. 注:这里的输入输出都是整数说明不会出现 sqrt ...

  9. 通过 SCF Component 轻松构建 REST API，再也不用熬夜加班了

    本教程将分享如何通过 Serverless SCF Component .云函数 SCF 及 API 网关组件,快速构建一个 REST API 并实现 GET/PUT 操作. 当一个应用需要对第三方提 ...

  10. Java并发编程(一)：线程基础知识以及synchronized关键字

    1.线程与多线程的概念:在一个程序中,能够独立运行的程序片段叫作“线程”(Thread).多线程(multithreading)是指从软件或者硬件上实现多个线程并发执行的技术. 2.多线程的意义:多线 ...