<!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 cloud微服务安全实战-3-4 API安全机制之认证（1）

    本节开始讲认证相关的东西.注意事项,出现问题的对应的解决方案. 先写用户注册的服务,注册一些用户信息进去.注册也是我们安全体系的一部分 注册 UserController里面的create方法 先修改 ...

  2. matlab学习笔记4--MAT文件的保存和读取

    一起来学matlab-matlab学习笔记4 数据导入和导出_1 MAT文件的保存和读取 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用&g ...

  3. html的输出&，空格，大小于号

    最近定做安装程序,因为这次定做名字里有&符号,用微软的txt文本打开配置文件,在配置文件里修改了名称,名称在文本里显示正常,但是定做出来后,发现&符号变成了_下划线,在本来的& ...

  4. Java基础教程：多线程杂谈——Volatile

    Java基础教程:多线程杂谈——Volatile 引入Volatile Java语言提供了一种稍弱的同步机制,即Volatile变量,用来确保将变量的更新操作通知到其他线程.当把变量声明为Volati ...

  5. Office 2010 经验总结

    1. 如何设置蓝底白字? 答:点击菜单项上的"页面布局"→"页面颜色",就可以选择喜欢的页面颜色,字体颜色也会跟着发生改变. 补充:如果不喜欢相应的页面颜色中系 ...

  6. AndFix Bug 热修复框架原理及源码解析

    作为阿里巴巴开源的 Android 应用热修复工具——AndFix,帮助 Anroid 开发者修复应用的线上问题.Andfix 是 “Android hot-fix” 的缩写. 1.什么是AndFix ...

  7. noVNC 安装、配置与使用

    最近项目中使用到了远程终端操控,从各方找到了noVNC这个神奇的家伙,废话不多说,开始介绍它的安装配置与使用. 1. 下载noNVC 好多渠道可以下载到noVNC,可以直接访问noVNC的官方网页ht ...

  8. Semi-supervised learning for Text Classification by Layer Partitioning

    本文是arxiv上一篇较短的文章,之所以看是因为其标题中半监督和文本分类吸引了我.不过看完之后觉得所做的工作比较少,但想法其实也挺不错. 大多数的半监督方法都选择将小扰动施加到输入向量或其表示中,这种 ...

  9. [Xamarin] - Xamarin.Forms Project with .Net Standard 2.0

    1. Install .NET Core 2.0 SDK .https://www.microsoft.com/net/download/core 2. Install Android 7.1 (AP ...

  10. Elasticsearch-C#操作

    初始化实例 nuget安装 1.单点连接 var node = new Uri("http://myserver:9200"); var settings = new Connec ...