<!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 is_null、empty、isset的区别

    isset 判断变量是否已存在 empty 判断变量是否为空或为0 is_null 判断变量是否为NULL 变量 empty is_null isset $a=”” true false true $ ...

  2. Xdebug步骤

    谷歌浏览器安装xdebug cd  /etc/php/7.2/fpm/conf.d 重启sudo service php7.1-fpm restart   (注意 php版本) 重启编辑器

  3. 如何在liferay 7 mvc-portlet中调用service-builder项目生成的service

    不想写了,贴大神帖子 https://web.liferay.com/web/zhao.jin/blog/-/blogs/creating-service-builder-mvc-portlet-in ...

  4. mac上SVN的图形工具 SmartSVN注册

    mac上SVN的图形工具 SmartSVN注册 打开smartsvn,选中license注册 选中文件smartsvn.license,下一步下一步就ok了 smartsvn.license Name ...

  5. PHP文件载入和载入路径

    一.文件载入 所谓的文件的载入,就是指将需要的目标文件的代码载入到当前的位置上,从某种意义上来说,文件载入也是一种流程控制! 文件载入的主要目的是体现网站的分层设计,因为不同的页面有很多相同的区域(相 ...

  6. Oracle存储过程小解

    Oracle存储过程小解 1.创建语法 create or replace procedure pro_name( paramIn in type, paramOUt out type, paramI ...

  7. nodeJs学习-18 mysql数据库了解

    智能社视频24/25 四大操作语句: 1.删 DELETE DELETE FROM 表 WHERE 条件 2.增 INSERT INSERT INTO 表(字段列表) VALUES(值列表) 3.改 ...

  8. Objectarx之分批存储相连实体

    void CCommonFuntion::BatchStorageEnt(AcDbObjectIdArray& inputId, std::vector<std::vector<A ...

  9. 微信小程序云数据库——where查询和doc查询区别

    用法 条件查询where 我们也可以一次性获取多条记录.通过调用集合上的 where 方法可以指定查询条件,再调用 get 方法即可只返回满足指定查询条件的记录,比如获取用户的所有未完成的待办事项,用 ...

  10. 【JZOJ4854】【NOIP2016提高A组集训第6场11.3】小澳的坐标系

    题目描述 小澳者表也,数学者景也,表动则景随矣. 小澳不喜欢数学,可数学却待小澳如初恋,小澳睡觉的时候也不放过. 小澳的梦境中出现了一个平面直角坐标系,自原点,向四方无限延伸. 小澳在坐标系的原点,他 ...