<!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. java 三大框架 hibernate部分知识实现增删该查操作

    1.三层架构    表现层 web层(MVC是一个表现层的设计模型)    业务层 service层    持久层 dao层2.三大框架和三层架构的关系(建议学习三大框架的顺序:先学习hibernat ...

  2. mybatis主键的生成

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-// ...

  3. word2vec生成词向量和字向量

    生成字符向量的过程中需要注意: 1)在收集数据生成corpus时候,通过Word2Vec生成字向量的时候,产生了“ ”空格字符向量,但是加载模型是不会成功的.那么你不是生成的binary文件,就可以修 ...

  4. （三）juc高级特性——虚假唤醒 / Condition / 按序交替 / ReadWriteLock / 线程八锁

    8. 生产者消费者案例-虚假唤醒 参考下面生产者消费者案例: /* * 生产者和消费者案例 */ public class TestProductorAndConsumer { public stat ...

  5. SQL 查询嵌套使用

    .查询: 各年级中 分数最高的学习信息   示例表如下:   create table it_student( id int primary key auto_increment,  -- 主键id ...

  6. MAVEN_day03 整合SSH框架

    一.整合SSH工程环境准备 1.创建MAVEN工程>>添加>>"web.xml"文件解决工程红色叹号. new Maven Project>>在 ...

  7. AngularJs实现全选功能

    html代码 <!-- 数据表格 --> <div class="table-box"> <!--工具栏--> <div class=&q ...

  8. 接口测试工具-Jmeter使用笔记（九：跨线程组传递变量）

    使用场景: 请求API需要授权令牌,但是授权令牌只需要获取一次,即可调用服务器上其他业务接口. 所以我想要把授权操作放在单独的一个线程,业务流放在其他线程. 这就需要我把从授权线程获取的令牌传入业务流 ...

  9. 【查阅】教你使用SQL SERVER复制

    关键词:复制,复制总结,复制汇总,复制查阅 1.概念与搭建 Step1:SQL SERVER复制介绍 Step2:SQL Server 复制事务发布 Step3:SQL Server 通过备份文件初始 ...

  10. Centos使用natapp教程

    官网:https://natapp.cn/ 首先在Natapp站注册账号 点击注册 登录后,点击左边 购买隧道,免费/付费均可 根据需要选择隧道协议,这里以web演示,购买隧道 在 https://n ...