<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <!-- 1. 导入Vue的包 -->

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->

  <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->

  <div id="app">

    <!-- {{}} 两个大括号里面写对于的数据名称 -->

    <p>{{ msg }}</p>

    <p>{{ msg1 }}骚年 </p>

  </div>

  <script>

    // 2. 创建一个Vue的实例

    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数

    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者

    var vm = new Vue({

      el: '#app',   // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域

                    // 这里可以写js选择器

      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的

      data: { // data 属性中，存放的是 el 中要用到的数据

        msg: '欢迎学习Vue 开始vue的学习',

        msg1:'开始努力吧！'

        // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】

      }

    })

  </script>

</body>

</html>

Vue的第一个实例的更多相关文章

  1. Vue.js学习和第一个实例

    第一个实例效果图: 1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.下载Vue.js.链接:http://pan. ...

  2. 小白的springboot之路（一）、环境搭建、第一个实例

    小白的springboot之路(一).环境搭建.第一个实例 0- 前言 Spring boot + spring cloud + vue 的微服务架构技术栈,那简直是爽得不要不要的,怎么爽法,自行度娘 ...

  3. 【C# -- OpenCV】Emgu CV 第一个实例

    原文 [C# -- OpenCV]Emgu CV 第一个实例 Emgu CV下载地址 http://sourceforge.net/projects/emgucv/files/ 找最新的下就行了,傻瓜 ...

  4. Thrift教程初级篇——thrift安装环境变量配置第一个实例

    前言: 因为项目需要跨语言,c++客户端,web服务端,远程调用等需求,所以用到了RPC框架Thrift,刚开始有点虚,第一次接触RPC框架,后来没想到Thrift开发方便上手快,而且性能和稳定性也不 ...

  5. Konckout第一个实例：简单数据模型绑定

    Konck是什么: http://www.aizhengli.com/knockoutjs/50/knockout.html 使用:直接引入knockout.js文件 第一个实例:实现输入框输入值改变 ...

  6. Highmaps网页图表教程之Highmaps第一个实例与图表构成

    Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地 ...

  7. JAVA-MyEclipse第一个实例

    相关资料: <21天学通Java Web开发> 实例代码: MyEclipse第一个实例1.打开MyEclipse程序.2.在PacKage视图->右击->New|Web Pr ...

  8. C# 实现程序只启动一次（多次运行激活第一个实例,使其获得焦点,并在最前端显示）

    防止程序运行多个实例的方法有多种,如:通过使用互斥量和进程名等.而我想要实现的是:在程序运行多个实例时激活的是第一个实例,使其获得焦点,并在前端显示. 主要用到两个API 函数: ShowWindow ...

  9. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

随机推荐

  1. PHP正则表达式判断身份

    //身份证验证 $id_card = ''; $preg_card="/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d ...

  2. 打印begin~end

    要求: 输入:begin和end 输出:依次打印出begin到end import java.util.Scanner; //递归打印begin —— end public class demo1 { ...

  3. Spring 配置标签——util标签

    Spring 配置标签——util标签     一.配置applicationContext.xml <beans xmlns="http://www.springframework. ...

  4. golang进制

  5. thinkphp5.0 验证提示信息的类型

    以上是5.0.12版本 下面是5.0.5版本,没有elseif 上图中红方格的值只能是string类型,但是这种情况是在5.0.5版本是可以设置为array类型的

  6. NS2学习笔记

    这两天在调一个仿真程序,比较奇怪的错误,就是一个节点广播消息,在它通信半径内的节点收不到消息,一直在通信上找问题,找了半天也没找到. 最后,用gdb调试,发现在一个操作指针处发生了段错误,引起的原因时 ...

  7. docker安装 2016-11-06 19:14 299人阅读 评论(31) 收藏

    Docker支持运行在以下CentOS版本: CentOS 7.X 安装在二进制兼容的EL7版本如 Scientific Linux也是可能成功的,但是Docker 没有测试过并且不官方支持. 此文带 ...

  8. H5+ 重写在线升级版本比较代码

    重写h5+在线升级版本比较代码 hello h5+版本在线升级提供了如下的版本比较方法,逻辑比较繁琐,相关判断多余,非常不宜读. 先判断新旧版本有无, 接着分割为数组比较数组项大小,而且还只取了前四项 ...

  9. Android 系统字体和颜色样式

    Android 字体和颜色 对于能够显示文字的控件(如TextView EditText RadioButton Button CheckBox Chronometer等等),你有时需要控制字体的大小 ...

  10. 阿里云MaxCompute 2019-4月刊

    摘要: 4月新功能发布,精彩技术好文推荐,5月线上线下活动抢先知道,尽在4月刊. 您好,MaxCompute 2019.4月刊为您带来产品最新动态和丰富的产品技术内容,欢迎阅读. 导读 [功能发布]4 ...