Vue学习之路第二篇:插值表达式
要开始写Vue的功能了,是不是很激动呢!开始吧!
1、首先建立一个html页面,导入Vue js包
<script type="text/javascript" src="js/vue.min.js"></script>
2、架包导入之后,我们需要创建一个Vue对象,用来绑定元素节点,从而达到操作元素的目的。即一个Vue对象必须要绑定一个元素节点,且为根节点。
- <div id="app">
- <p> {{ msg }} </p>
- </div>
- var vm = new Vue({
- el : "#app",
- data : {
- msg : "Hello Vue"
- }
- });
大家可以看到,通过new的方式创建了一个Vue对象,对象包含了 el 和 data两个属性(这一篇只涉及这两个属性),"el" 是用来绑定元素节点的,对应的是id为app的元素节点,由于是id,所以不要忘记 "#" 号哦。"data" 是Vue对象里绑定的数据,采用的 key-value形式定义。展示数据的时候采用的是插值表达式 “{{ }}”。
怎么样,是不是很简单?
插值表达式问题点:
大家功能实现之后,如果频繁刷新页面或者通过浏览器调试工具把网速模拟调的很慢的话,会发现一个现象:页面会先显示" {{ msg }} "内容,然后才会显示“Hello Vue”,对于这个问题下篇会讲解解决办法并介绍更多的Vue内容。
每天进步一点点!
Vue学习之路第二篇:插值表达式的更多相关文章
- vue学习指南:第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- Vue学习之路第一篇(学习准备)
1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...
- Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第九篇:双向数据绑定 v-model指令
1.学习准备: ①:双向数据绑定可以简单理解为:后端定义的数据改变,前端页面展示的时候会自动改变,数据通过前端页面修改的时候,后端定义的数据内容也会随之改变. ②:指令中只有v-model可以实现双向 ...
- vue学习之路 - 4.基本操作(下)
vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...
- STM32学习之路入门篇之指令集及cortex——m3的存储系统
STM32学习之路入门篇之指令集及cortex——m3的存储系统 一.汇编语言基础 一).汇编语言:基本语法 1.汇编指令最典型的书写模式: 标号 操作码 操作数1, 操作数2,... ...
- Vue学习之路之登录注册实例代码
Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...
- Vue学习之路第三篇:插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- Vue学习之路第十七篇:全局过滤器的使用
1.过滤器 ①:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 Ja ...
随机推荐
- mysql数据库增量恢复
mysqldump -uroot -p -B discuzx -F -x --master-data=2 --events|gzip >/root/discuzx.sql.gz 写入数据 删除数 ...
- java深入的单例模式
在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下. 所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在 ...
- ORA-12560: TNS: 协议适配器错误(oracle service 已启动)
如果是安装完 oracle 客户端之后才出现的这个问题,请往下看 安装 oracle client 时,会配置一个客户端的监听,如果电脑上之前安装过 oracle service 就会和服务的监听冲突 ...
- 一个简单的 PC端与移动端的适配(通过UA)
只需在header引用个js文件, 原理就是判断UA里面的标识. 加下面代码添加到js文件,在头文件引用即可 var Pc_url = 'http://www.baidu.com'; //PC端网址 ...
- yiii 数据库备份导出
应用场景 数据对于网站来说 是非常重要的 一般 cms 后台 都有 数据备份功能.使用Yii 的第三方拓展 可以快速开发. spanjeta/yii2-backup spanjeta/yii2-bac ...
- 洛谷 1821: [JSOI2010]Group 部落划分 Group
1821: [JSOI2010]Group 部落划分 Group Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 2596 Solved: 1221[S ...
- 打造一个全命令行的Android构建系统
IDE都是给小白程序员的,大牛级别的程序员一定是命令行控,终端控,你看大牛都是使用vim,emacs 就一切搞定” 这话说的虽然有些绝对,但是也不无道理,做开发这行要想效率高,自动化还真是缺少不了命令 ...
- HDU 4046 Panda(树状数组)
Panda Time Limit: 10000/4000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- HDU 4893 线段树裸题
Wow! Such Sequence! Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- C语言实现使用动态数组实现循环队列
我在上一篇博客<C语言实现使用静态数组实现循环队列>中实现了使用静态数组来模拟队列的操作. 因为数组的大小已经被指定.无法动态的扩展. 所以在这篇博客中,我换成动态数组来实现. 动态数组能 ...