<!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. MySQL——自定义[存储]函数、触发器

    一. 编程基础 1)        结束符 2)        代码块 Begin 相当于 { end;  相当于 } 1.    变量 系统变量 Show variables; 查看系统变量sql_ ...

  2. C++中数字转换成字符串

    头文件:<string> 转换函数:to_string(); 例如:int n=10;  string str=to_string(n) ;

  3. 视觉暂留-Info：这些神奇的“视觉暂留”动画，每一幅都让人拍案叫绝！

    ylbtech-视觉暂留-Info:这些神奇的“视觉暂留”动画,每一幅都让人拍案叫绝! 1.返回顶部 1. 这些神奇的“视觉暂留”动画,每一幅都让人拍案叫绝! 原创|发布:2018-05-28 19: ...

  4. database homework1

    mysql> select * from teacher_info; +----+------+-----+--------+---------+ | id | name | age | sal ...

  5. python 定义子类

  6. List容器案例

    案例讲解 迭代模式 不暴露集合的内部结构,又让外部访问集合中的数据 package com.day1; public interface Iterator <T>{ public bool ...

  7. springboot对shiro进行mock单元测试

    环境:junit-5.Spring5.0.x.Spring Boot 2.0.x 以下是用来权限测试的接口: @ApiOperation("[可接入]分页查询管理员") @ApiR ...

  8. UVA_458:The Decoder

    Language:C++ 4.8.3  PS:ASCII值减去七 #include<stdio.h> #include<string.h> int main(void) { c ...

  9. .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记

    1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...

  10. __defineGetter__和__defineSetter__在日期中的应用

    日期函数每次取年月日都要调用Date的函数,有点麻烦,通过__defineGetter__可以处理一下,就能通过Date的实例对象直接获取年月日,例如 date.year获取日期对象date的年份.月 ...