通过实例来看下 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. Postwoman-接口测试工具

    地址是:https://postwoman.io/ ,不过只能使用它们自己提供的测试接口,如果你调试自己的API接口的话,你需要自己部署一套代码. 自己搭建一套Postwomen环境的话,只需要安装了 ...

  2. hash模式与history模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  3. Leetcode 题目整理-3 Palindrome Number & Roman to Integer

    9. Palindrome Number Determine whether an integer is a palindrome. Do this without extra space. clic ...

  4. Linux防火墙之iptables常用扩展匹配条件（二）

    上一篇博文我们讲到了iptables的一些常用的扩展匹配模块以及扩展模块的一些选项的说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12273755.htm ...

  5. input输入框联想功能

    一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的 ...

  6. 逆向番茄社区app的rsa加密方式

    Parse RSA public and private key pair from string in Java 逆向某APP,发现其大部分配置文件都是加密的 .所以逆向算法并解密 RSA和AES密 ...

  7. 阿里云Redis性能测试结果（1个集合存300万数据，查询能几秒返回结果）

    现状: 1.买了一台主从的阿里云Redis,内存就1GB. 2.查询了阿里云的帮助,没有找到性能相关的说明, 有的也是4GB版本的并发性能 3.提工单问客服 一个集合里有300万数据,单次查询性能大概 ...

  8. Notepad++ Plugin Manager更新插件出错

    作为墙内人士,更新个插件都TMD浪费很长时间! 解决方案: 定位文件notepaid++\updater\GUP.exe What is WinGup? --------------- WinGup ...

  9. qt客户端程序使用svg图片资源的几种方法

    直接使用svg格式文件资源的情况 1. 直接在UI控件属性面板中选择部分支持icon图标的控件的icon来源,这样图标可以显示 2.给toolbutton添加样式 qproperty-icon: ur ...

  10. java9String类简单了解

    public class jh_01_String类简单了解 { public static void main(String[] args) { /* * 函数:完成特定功能的代码块. * next ...