1. 新建一个 .html 文件 => 引入一个在线的 vue 库 => 写一个带 id 的 html 标签 => 写一个 script 标签, 这里的 vApp 是 Vue() 这个构造函数的一个实例, 他通过 el 与 dom 建立的联系, 通过 data 和 模板语法 声明式 地将数据渲染进 dom 中.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <h1>{{ name }} 今年 {{ age }} 岁了!</h1>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            data: {

                name: "李雷",

                age: "23"

            }

        })

    </script>

</body>

</html>

2. 在浏览器打开后, 我们发现 name 和 age 的数据正常显示出来了. 然后我们在控制台直接通过 vApp.name 和 vApp.age 改变他的值, 结果在页面上立刻就显示出来了. 这表明 vApp 这个 Vue 的 实例是一个全局的属性, 我们可以通过他改变其内部的各种数据, 这种改变会实时地在网页中显示效果.

怎样使用构造函数: Vue()?的更多相关文章

  1. 【译】Vue源码学习（一）：Vue对象构造函数

    本系列文章详细深入Vue.js的源代码,以此来说明JavaScript的基本概念,尝试将这些概念分解到JavaScript初学者可以理解的水平.有关本系列的一些后续的计划和轨迹的更多信息,请参阅此文章 ...

  2. vue.js 第三课

    1.构造器 constructor 2.属性和方法 properties methods 3.实例生命周期 instance_lifecycle   1.vue.js都是通过 var vm=new V ...

  3. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  4. Vue.2.0.5-Vue 实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设 ...

  5. Vue.js实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })

  6. vue.js 常用语法总结（一）

    作者:曾萍,目前就职于京东商城. 概述 2016年已经结束了.你是否会思考一下,自己在过去的一年里是否错过一些重要的东西?不用担心,我们正在回顾那些流行的趋势.通过比较过去12个月里Github所增加 ...

  7. Vue.js 学习笔记 一

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  8. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  9. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

随机推荐

  1. centos7下面装fastdfs

    首先我完全是按照这个链接上面来的,其中也算有点小错https://blog.csdn.net/ty5546/article/details/79245648 环境准备编译环境 yum install ...

  2. 在业务控制方法中写入Request，Response等传统web参数

    可以在业务控制方法中书写传统web参数,这种方式我们不提倡,耦合了 @Controller @RequestMapping(value="/user") public class ...

  3. MySQL主从双向同步

    最近部署测试环境,涉及到MySQL数据库主从双向同步的部署,记录一下部署过程,正常读写都发生在主库,从库作为备选数据库(热备份),当主库发生异常,数据库自动切换到从库,这里面是怎么监控数据库异常并触发 ...

  4. 用R语言求置信区间

    用R语言求置信区间 用R语言求置信区间是很方便的,而且很灵活,至少我觉得比spss好多了. 如果你要求的只是95%的置信度的话,那么用一个很简单的命令就可以实现了 首先,输入da=c(你的数据,用英文 ...

  5. 数组中存放model去重

    在这个项目中出现"添加model数据"数组重复的情况,这就涉及到数组去重的问题了...... 1. 一开始使用的最笨的方法: 依次循环两个数组(原有的数组,选择的数组),双重for ...

  6. 10 Best Practices for Better RESTful API

    转自 http://www.cnblogs.com/mondol/p/6109024.html

  7. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  8. elasticsearch的keyword与text的区别

    es2.*用户可忽略该文章.es 2.*版本里面是没有这两个字段!!! 当初接触es,最惊讶就是他的版本速度发布太快,这次主要讨论keyword与text的区别 在es 2.*版本里面是没有这两个字段 ...

  9. python3速查参考- python基础 4 -> 元组 + 字典 + 字符串 的学习

    元组 元组:特点就是内容不可变,算只读的列表,可以被查询,不能被修改 a = 2, print(a) print(type(a)) b = ('a','b','c') print(b[1]) 运行结果 ...

  10. Nginx进程信号管理

    CHLD信号:work进程异常退出会给Master进程发送CHLD信号,这时Master进程就知道Worker进程退出了,然后重新起一个Worker进程: TERM信号:退出进程,不优雅: QUIT信 ...