<!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. Leetcode896.Monotonic Array单调数列

    如果数组是单调递增或单调递减的,那么它是单调的. 如果对于所有 i <= j,A[i] <= A[j],那么数组 A 是单调递增的. 如果对于所有 i <= j,A[i]> = ...

  2. OSI七层模型，作用及其对应的协议

    物理层(Physical Layer):利用传输介质为数据链路层提供物理连接,实现比特流的透明传输 数据链路层(Data Link Layer):负责建立和管理节点间的链路 网络层(Network L ...

  3. PHP7捕获错误异常方法

    这种 Error 异常可以像 Exception 异常一样被第一个匹配的 try / catch 块所捕获.如果没有匹配的 catch 块,则调用异常处理函数(事先通过 set_exception_h ...

  4. 【风马一族_php】

    原文来自:http://www.cnblogs.com/sows/p/6054383.html  (博客园的)风马一族 侵犯版本,后果自负 2016-11-11   15:13:51 回顾 数组:分配 ...

  5. DELL（linux 系统里系统掉盘）（阵列Foreign）命令行里重做阵列

    故障现象 (阵列Foreign 系统下重做阵列) 例:四合一机器(DELL_XENCOMPA09) 有四个硬盘 如图 少认到一个 df  -h fdisk -l 2>/dev/null | gr ...

  6. JS 里的数据类型转换

    JS的数据类型转换 一.js中的数据类型Js中的数据类型一共有六种,即number,string,boolean,underfine,null,object. 1.Number Number数据类型指 ...

  7. oracle如何看审计的结果

    1)数据库初始化参数文件中AUDIT_TRAIL＝OS时,审计记录存在操作系统的文件中. UNIX系统的话,默认存在“$oracle_home/rdbms/audit/” 目录下. If you ha ...

  8. Map容器案例

    案例讲解  --统计字符串出现的次数 package com.date; import java.util.HashMap; import java.util.Map; import java.uti ...

  9. Android实战：手把手实现“捧腹网”APP（一）-----捧腹网网页分析、数据获取

    Android实战:手把手实现"捧腹网"APP(一)-–捧腹网网页分析.数据获取 Android实战:手把手实现"捧腹网"APP(二)-–捧腹APP原型设计.实 ...

  10. 直击 KubeCon 2019 现场，阿里云 Hands-on Workshop 亮点回顾

    2019 年 6 月 24 日,KubeCon + CloudNativeCon 第二次在中国举办.此次大会阿里共有 26 个技术演讲入选,并有两场沙龙活动,阿里云专家也与技术极客们也再次相聚.Kub ...