通过实例来看下 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. 9、python判断语句与循环语句

    前言:本文主要介绍python判断语句与循环语句,包括if语句.while循环.for循环.range函数. 一.if语句  关键字:if.elif.else,写法如下: # if if 条件: # ...

  2. js原型链和原型链的继承

    每一个对象都有一个“_proto_”指针,指向实例化该对象的构造函数的原型对象,当该对象没有你想拿到的属性时,解释器会顺着指针不断向上找. 每一个构造你函数都有一个“prototype”属性,指向该构 ...

  3. 《阿里巴巴Java开发手册》码出高效详解（一）- 为什么要学习阿里编码手册

    <Java 开发手册>(以下简称<手册>)是每个 Java 工程师人手必备的一本参考指南.该手册包括 编程规约.异常日志.单元测试.安全规约.MySQL 数据库.工程结构.设计 ...

  4. PlayCanvas PBR材质shader代码分析(vertex shader)

    顶点shader主要对顶点坐标变换,将顶点坐标从local->world->view->clip 空间变换 local空间:模型物体坐标系 world空间:世界空间坐标系 view空 ...

  5. CSS-08-边框属性设置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Jenkins环境配置(集成自动化程序)

    一.下载 直接到官网https://jenkins.io/download/  进行下载 二.安装 1.在浏览器地址栏输入:http://loclhost:8081 运行Jenkins,首次进入会提示 ...

  7. Shell之作业控制

    命令 含义 jobs 列出所有正在运行的作业 ^Z(Ctrl+z) 暂停作业 bg 启动被暂停的作业 fg 将后台作业调到前台 kill 向指定作业发送kill信号 nohup 忽略所有发送给子命令的 ...

  8. sublime sftp插件安装及时更新网站

    Sublime Text 2 本身并不强大,但是它方便使用插件扩展功能,所以变得很强大.今天介绍一个很实用的插件 SFTP ,可以大大提高前端工作效率. 常见的工作流程 有时候修改一些网站上的文件,通 ...

  9. vue2.x中子组件修改父组件通过pops传递过来的值

    首先,父组件向子组件传值 这里面主要是在传值的时候,加上.sync 然后子组件通过 $emit 修改 如此即可完成对父组件的数据操作

  10. C++和MATLAB混合编程求解多项式系数（矩阵相除）

    摘要:MATLAB对于矩阵处理是非常高效的,而C++对于矩阵操作是非常麻烦的,因而可以采用C++与MATLAB混合编程求解矩阵问题. 主要思路就是,在MATLAB中编写函数脚本并使用C++编译为dll ...