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 ...
随机推荐
- Flex教程
详细教程: 1.基础知识:一劳永逸的搞定 flex 布局 2.阮一峰的flex教程:flex syntax flex example
- HDU1867 - A + B for you again
Generally speaking, there are a lot of problems about strings processing. Now you encounter another ...
- python第一周:python初识、流程控制
编译性语言:在将源代码编译完毕生成一个可执行文件后才能运行 解释性语言:在代码的运行期间进行编译 动态类型语言:在运行期间才去做数据检查的语言,也就是说在使用动态类型语言时不用指定数据类型 静态类型语 ...
- Hibernate-原生SQL查询
HQL尽管容易使用,但是在一些复杂的数据操作上功能有限.特别是在实现复杂的报表统计与计算,以及多表连接查询上往往无能为力,这时可以使用SQL(Native SQL)实现HQL无法完成的任务. 1.使用 ...
- leetcode_Isomorphic Strings _easy
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...
- Java向上转型和向下转型(附具体样例)
Java向上转型和向下转型(附具体样例) 熬夜整理的关于Java向上和向下转型的样例,很的通俗易懂哦~~~~ 一 ...
- ORM进阶之Hibernate中对象的三大状态解析
ORM进阶之 ORM简单介绍 ORM进阶之Hibernate简单介绍及框架搭 ORM进阶之Hibernate的三大对象 ORM进阶之Hibernate中对象的三大状态解析 在Hibernatea中每一 ...
- Android之应用开发基础
Android应用开发基础 英文地址:http://developer.android.com/guide/components/fundamentals.html 本人英语水平不高,如有翻译不当请指 ...
- awesome-free-software
Free software is distributed under terms that allow users to run the program for any purpose, study ...
- DNS配置外网
dnssec开启,部分dns请求为不信任链导致解析延迟或者解析失败(error显示为不信任)解决方法: vi /etc/named.conf dnssec-enable no; dnssec-vali ...