<!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>

</div>

<script>

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

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

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

var vm = new Vue({

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

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

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

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

}

})

</script>

</body>

</html>

02.Vue基本代码的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  3. 02 Vue之vue对象属性功能&axios数据请求实现

    1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...

  4. 02.VUE学习二之数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. 02 Vue介绍与安装，指令系统 v-*、音乐播放器

    VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...

  6. 02 Vue指令

    Vue指令 1.文本相关指令 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> < ...

  7. 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...

  8. vue教学视频（小程序教学视频）

    写在前面 最近通过了解众多面试者的面试情况 总结出以下几点: 对框架的要求越来越高特别是vue和小程序 不会vue和小程序连面试机会都没有 会vue的比不会vue的薪资高4-5k 小程序有发展的趋势 ...

  9. webpack4+express+mongodb+vue 实现增删改查

    在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...

随机推荐

  1. Logcat

    logcat -- "-s"选项 : 设置输出日志的标签, 只显示该标签的日志; -- "-f"选项 : 将日志输出到文件, 默认输出到标准输出流中, -f 参 ...

  2. nginx配置https访问

    一.准备 环境:centos6.8 nginx:1.13.6 二.开始       首先安装依赖包: yum install -y gcc gcc-c++ autoconf automake make ...

  3. android不知不觉偷拍他人功能实现（手机关闭依然拍照）【申明：来源于网络】

    android不知不觉偷拍他人功能实现(手机关闭依然拍照)[申明:来源于网络] 地址:http://blog.csdn.net/huangxiaoguo1/article/details/536660 ...

  4. Chrome 调试技巧

    Chrome 调试技巧 1.alert 这个不用多说了,不言自明. 可参考:https://www.cnblogs.com/Michelle20180227/p/9110028.html 2.cons ...

  5. linux下查看网卡速率

    转自:http://blog.csdn.net/liugongfeng/article/details/50263733 我们都知道ifconfig -a 可以列出所有网卡,但是怎么判读是千兆网卡还是 ...

  6. Fiddler设置断点修改Request和Response

    一.Fiddler中修改Request有两种方法:  点击Rules-> Automatic Breakpoint ->Before Requset (这种方法会中断所有的会话) 消除命令 ...

  7. Linux操作系统加固

    1. 账号和口令 1.1 禁用或删除无用账号 减少系统无用账号,降低安全风险. 操作步骤 使用命令 userdel <用户名> 删除不必要的账号. 使用命令 passwd -l <用 ...

  8. ionic3 在ios9.0 系统下 会出现ReferenceError:Can't find variable:Intl 错误提示

    ionic3 框架开发app  在ios 9.0版本中 ReferenceError:Can't find variable:Intl 错误提示: 在index.html 文件中添加 <scri ...

  9. rosetta geometric constraint file（用于match和design）

    cst(constraint file)文件示例: CST::BEGIN TEMPLATE:: ATOM_MAP: atom_name: C6 O4 O2 TEMPLATE:: ATOM_MAP: r ...

  10. Python基础(九) type元类

    python元类:type()    元类是python高阶语法. 合理的使用可以减少大量重复性的代码. 元类实际上做了以下三方面的工作: 干涉创建类的过程 修改类 返回修改之后的类 为什么使用元类? ...