<!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. ThinkPHP 缓存技术详解 使用大S方法

    如果没有缓存的网站是百万级或者千万级的访问量,会给数据库或者服务器造成很大的压力,通过缓存,大幅减少服务器和数据库的负荷,假如我们把读取数据的过程分为三个层,第一个是访问层,第一个是缓存层,第三个是数 ...

  2. js运用6

    ---恢复内容开始--- 1.   逻辑运算   ||      &&       ! || 遇到第一个为true的数字就终止并返回,如果完全没有就返回最后一个值 && ...

  3. 软件毕业设计文档流程与UML图之间的关系

    每个模型都是用一种或者多种UML图来描述的,映射关系如下: 1.用例模型:使用用例图.顺序图.通信图.活动图和状态图来描述. 2.分析模型:使用类图和对象图(包括子系统和包).顺序图(时序图).通信图 ...

  4. Java8 新特性之流式数据处理

    一. 流式处理简介 在我接触到java8流式处理的时候,我的第一感觉是流式处理让集合操作变得简洁了许多,通常我们需要多行代码才能完成的操作,借助于流式处理可以在一行中实现.比如我们希望对一个包含整数的 ...

  5. AJAX----注：借鉴

    Ajax的工作原理. Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer5首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpR ...

  6. JavaScript基础知识（数组的方法）

    数组的方法(15个) 对象数据类型: 数组成员有一个与之对应的索引 length : 代表数组成员的个数: 操作改变数组一些方法:这些数组的方法都是内置的: // 1. 方法作用: // 2. 方法的 ...

  7. try 和 catch 和 finally

    try块中出现异常走进catch,异常后面的代码不会再被执行:finally块里try和catch执行完后要执行的代码,且一定会执行. 在释放资源的时候,不要多个放在一个try块里面. 流的关闭顺序: ...

  8. day21:包和异常处理

    1,复习 # 序列化模块 # json # dumps # loads # dump 和文件有关 # load load不能load多次 # pickle # 方法和json的一样 # dump和lo ...

  9. js格式化时间的方法

    方法一:用js格式化时间的方法. Date.prototype.format =function(format) { var o = { "M+" : this.getMonth( ...

  10. 常用Git命令清单。

    上期传送门:[清单]7个管理和优化网站资源的工具 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Workspace:工作区 Index / Stage:暂存区 Repository: ...