<!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. spring 多个切面如何有序执行

    Spring也能支持多个切面.当有多个切面时,它不会存在任何顺序,这些顺序代码会随机生成,但是有时候我们希望它按照指定的顺序运行. 在此之前要先定义一个切点方法,为此新建一个接口——MultiBean ...

  2. Flink assignAscendingTimestamps 生成水印的三个重载方法

    先简单介绍一下Timestamp 和Watermark 的概念: 1. Timestamp和Watermark都是基于事件的时间字段生成的 2. Timestamp和Watermark是两个不同的东西 ...

  3. SAS如何看待大数据

    SAS如何看待大数据 "大数据"现在是一个炙手可热的词语,数据分析师这个词虽然比较新,但收集与存储大量信息的历史却不短了. 早在本世纪初,行业分析师Doug Laney就提出了&q ...

  4. No section matches selector - no section to be FIRST/LAST

    1. 使用KEIL MDK ,STM32F405RG,编译的时候报错 .\Objects\ks3620_stm32f405_proj.sct(): error: L6236E: No section ...

  5. 【计算机视觉】基于Shading Model（对光照变化一定不变性）的运动目标检测算法

    光照模型(Shading Model)在很多论文中得到了广泛的应用,如robust and illumination invariant change detection based on linea ...

  6. JS Maximum call stack size exceeded

    一.问题描述 Maximum call stack size exceeded  翻译为:超过最大调用堆栈大小 二.效果截图 三.问题解决方案 出现该问题,说明程序出现了死循环了.所以要去检查出错的程 ...

  7. 使用speedtest-cli测量服务器带宽

    使用speedtest-cli测量服务器带宽,这个是python写的工具,很方便,只需要在服务器端安装即可. 1.安装python-pip # yum install python-pip –y 2. ...

  8. Kibana配置安装

    学习网站 https://discuss.elastic.co https://github.com/elastic 配置 server.port: 5601 server.host: "l ...

  9. JWT知识整理

    JSON Web Token:(https://jwt.io/) JSON Web Token(JWT)是一个开放式标准(RFC 7519),它定义了一种紧凑(Compact)且自包含(Self-co ...

  10. springboot使用neo4j

    springboot2.2使用neo4j第一次更新先放一些代码进来,下次加注释1.引入相应的包<dependency> <groupId>org.springframework ...