基本代码、插值表达式、v-cloak
<!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> //用来在元素上渲染数据的
<p v-cloak>++++++++ {{ msg }} ----------</p> //如果网速们的情况下 也不会显示{{msg}} 会显示空白
基本代码、插值表达式、v-cloak的更多相关文章
- [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- angular,vue,react的基本语法—插值表达式，渲染数据，响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- Vue学习之路第二篇：插值表达式
要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...
- VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用
<body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button ...
- vue简介，插值表达式，过滤器
目录 VUE框架介绍 what?什么是vue? why?为什么要学习vue? special特点? how如何使用? 下载安装? 导入方式? 挂在点el 插值表达式 delimiters自定义插值表达 ...
- VUE基础插值表达式
vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...
- vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss
vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...
- Vue基础之插值表达式的另一种用法！附加变量的监听！
Vue基础之插值表达式的另一种用法!附加变量的监听! 讲这个之前我们先回顾一下原来的用法! <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个 ...
随机推荐
- Linux记录-批量更改当前目录的文件后缀名
#!/bin/bash path=. for file in $(ls $path) do if [ -f $file ] then filename=${file%.*} bak=${file#*. ...
- Egret中图片颜色的改变，颜色矩阵
参考: 图片处理:颜色矩阵和坐标变换矩阵 Egret-滤镜 之前面试有问到如何改变图片的颜色.貌似之前做Flash的时候做过,做Egret后没有此类需求,所以一直没有研究过. 现在来弄一弄如何改变图片 ...
- IDEA 多模块工程相互依赖
最近为了结构项目,抽离通用模块,同时使用一个工程管理所有模块,使用了多模块工程.不过在依赖其他模块的编译上出现了问题,总是报找不到被依赖的jar包. 最后的解决办法也很简单,对于被依赖的模块,要在ma ...
- 使用Docker在本地启动3个MySQL镜像
首先执行 sudo docker pull mysql 命令下载mysql官方镜像: zifeiy@zifeiy-PC:~$ sudo docker pull mysql Using default ...
- 利用VisualSVN修改配置库名称
相信大家都听说过SVN的大名,至于它的用途以及如何安装不在本文范围内,这里主要讲解如何利用VisualSVN来更改配置库的名称,前提是你的SVN服务必须用VisualSVN搭建,网上几乎没有这方面的文 ...
- 【Leetcode_easy】852. Peak Index in a Mountain Array
problem 852. Peak Index in a Mountain Array solution1: class Solution { public: int peakIndexInMount ...
- 03.linux入门命令
1.linux命令的格式 命令 [选项] [参数] eg: ls ls -l ls -l /home 注: a.选项与参数不一定存在 b.选项用 "-" 来指明 c.命令,选项,参 ...
- GATK4注意事项
近期在测试多样品的WES的过程中发现用HC得到gvcf之后,合并多个样品的gvcf文件的过程中,使用CombineGVCFs的过程中很慢,发现官网推荐使用GenomicsDBImport 用法如下: ...
- redhat与zlib兼容性问题？
今天在redhat 6.3 x64版本上安装了zlib,安装完后可以正常使用,就是发现gedit使用有点异常——无法启动,当时也没在意,但是后来重启电脑后出现桌面背景图片后就不弹出登陆窗口了,但是进命 ...
- Mongodb索引实战
最近碰到这样的一个需求,一张酒店政策优惠表,我们要根据用户入住和离开的时间,计算一家酒店的最低价政策前10位,数据库表字段如下: 'hid':88, 酒店id 'date':20150530, 入住日 ...