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

new Vue  相当于我们mvvm中的vm  调度者

data 就是mvvm中的M，专门来保存每个页面的数据的（存放的是el属性中的数据的）

插值表达式{{ }} ;

　　

    <p >{{ msg }}</p>      //用来在元素上渲染数据的
v-cloak 能够解决 插值表达式闪烁的问题：
　　

<p v-cloak>++++++++ {{ msg }} ----------</p>  //如果网速们的情况下  也不会显示{{msg}}  会显示空白

基本代码、插值表达式、v-cloak的更多相关文章

  1. [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  2. angular,vue,react的基本语法—插值表达式，渲染数据，响应式数据

    基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...

  3. Vue学习之路第三篇：插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

  4. Vue学习之路第二篇：插值表达式

    要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...

  5. VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用

    <body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button ...

  6. vue简介，插值表达式，过滤器

    目录 VUE框架介绍 what?什么是vue? why?为什么要学习vue? special特点? how如何使用? 下载安装? 导入方式? 挂在点el 插值表达式 delimiters自定义插值表达 ...

  7. VUE基础插值表达式

    vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...

  8. vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss

    vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...

  9. Vue基础之插值表达式的另一种用法！附加变量的监听！

    Vue基础之插值表达式的另一种用法!附加变量的监听! 讲这个之前我们先回顾一下原来的用法! <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个 ...

随机推荐

  1. python for 无限循环

    class Infinit: def __iter__(self): return self def __next__(self): return None for i in Infinit(): p ...

  2. Spring Boot应用的打包和部署

    传统的Web应用在发布之前通常会打成WAR包,然后将WAR包部署到Tomcat等容器中使用,而通过前面的学习我们已经知道,Spring Boot应用既能以JAR包的形式部署,又能以WAR包的形式部署. ...

  3. CompletableFuture Quasar 等并发编程

    CompletableFuture基本用法 https://www.cnblogs.com/cjsblog/p/9267163.html Quasar https://blog.csdn.net/ma ...

  4. Red Team远程控制软件

    开源远程管理控制 https://github.com/malwaredllc/byob 僵尸网络生成框架 https://github.com/panda-re/lava 大规模向程序中植入恶意程序 ...

  5. 软件素材---linux C语言：拼接字符串函数 strcat的用例(与char数组联合使用挺好)

    [头文件]#include <string.h> [原型] 1 char *strcat(char *dest, const char *src); [参数]: dest 为目标字符串指针 ...

  6. TCP/IP学习笔记8--数据链路之基本概念

    "在你生命的最初30年中,你养成习惯:在你生命的最后30年中,你的习惯决定了你."---- Steve Jobs TCP/IP对于OSI参考模型的数据链路成及以下部分(物理层)没有 ...

  7. Linux chomd命令

    file 语法为: chmod abc file 其中a,b,c各为一个数字,分别表示User.Group.及Other的权限. r=4,w=2,x=1 若要rwx属性则4+2+1=7: 若要rw-属 ...

  8. cuda-convnet在Ubuntu12.04+CUDA5.5下的配置

    deep learning近年来非常之火,尤其是在IMAGENET上的识别效果更是惊呆了小伙伴,其所用的Hinton的学生编写的cuda-convet代码早已公开,但是一直没有时间去仔细研究,最近趁着 ...

  9. [转帖]时间序列数据库 (TSDB)

    时间序列数据库 (TSDB) https://www.jianshu.com/p/31afb8492eff 0.3392019.01.28 10:51:33字数 5598阅读 4030 背景 2017 ...

  10. 获取spring上下文 - applicationContext

    前言 spring上下文是spring容器抽象的一种实现.将你需spring帮你管理的对象放入容器的一种对象,ApplicationContext是一维护Bean定义以及对象之间协作关第的高级接口. ...