<!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. centOs6.5配置启动ssh

    .非root用户则执行su或su - 或su root或su - root切换为root用户 2.查看SSH是否安装(检查是否装了SSH包) 输入命令:rpm -qa | grep ssh 注:若没安 ...

  2. mdf ldf添加到数据库

    1.拷贝mdf ldf文件到某个文件夹下 2.打开SQL执行语句: USE master; GO CREATE DATABASE NewFile ON (FILENAME = 'C:\Program ...

  3. C#中的一些基础

    值类型与引用类型 值类型包括:[基本数据类型,如int,double,char,bool等][枚举类型enum][结构类型struct] 引用类型包括:[类类型,如基类Object,字符串类Strin ...

  4. Error: Cannot find module 'babel-helpers'

    cnpm install babel-core babel-loader babel-plugin-transform-runtime -D cnpm install babel-preset-env ...

  5. GIT仓库如何恢复到前一次提交

    GIT仓库如何恢复到前一次提交   通过使用Git版本恢复命令reset,可以回退版本.reset命令有3种方式: git reset –mixed:此为默认方式,不带任何参数的git reset,即 ...

  6. 41A

    #include <stdio.h> #include <string.h> #define MAXSIZE 105 int main() { char Berlandish[ ...

  7. JMeter中的正则表达式的匹配

    ==

  8. 小学生都能看懂的FFT！！！

    小学生都能看懂的FFT!!! 前言 在创新实践重心偷偷看了一天FFT资料后,我终于看懂了一点.为了给大家提供一份简单易懂的学习资料,同时也方便自己以后复习,我决定动手写这份学习笔记. 食用指南: 本篇 ...

  9. node获取windows pc 机器的标示

    var exec = require('child_process').exec; if(process.platform != "win32"){ //window throw ...

  10. js对象属性名驼峰式转下划线

    一.题目示例: 思路: 1.匹配属性名字符串中的大写字母和数字 2.通过匹配后的lastIndex属性获取匹配到的大写字母和数字的位置 3.判断大写字母的位置是否为首位置以及lastIndex是否为0 ...