Vue学习之路第二篇:插值表达式
2024-08-27 22:37:51
要开始写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内容。
每天进步一点点!
最新文章
- js作用域问题
- [nginx学习之道]linux的nginx安装
- jQuery插件(多级菜单)
- C++语言-05-三大特性
- 关于解决读取导入excel某列数字过长的科学计数法格式
- cookie的保存时间
- linq字符串搜索条件,排序条件-linq动态查询语句 Dynamic LINQ
- Jquery方法的应用
- [cocos2d-js]chipmunk例子(一)
- 用于主题检测的临时日志(d94169f9-f1c0-45a2-82d4-6edc4bd35539 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
- 队列的实现(JAVA)
- [ES6] When should use Map instead of Object
- 连接pgsql
- Python dict 按键和值排序
- JAVA调用matlab代码
- dgraph实现基本操作
- Oracle 正则表达式 分割字符串
- Java设计模式--缺省适配器模式
- Echarts 的Formatter的回调函数
- SP10707 COT2 - Count on a tree II (树上莫队)
热门文章
- Javascript中的原型链,__proto__和prototype等问题总结
- MySQL数据库中字段类型为tinyint,读取出来为true/false的问题
- c#远程链接服务器中MySQL
- Java泛型(一):入门、原理、使用
- python处理时间戳
- Unity3D:实现人物转向与移动
- Hdu 4280 Island Transport(最大流)
- ubuntu14.04无法安装Curl
- java应用集锦9:httpclient4.2.2的几个常用方法,登录之后访问页面问题,下载文件
- hdoj--1162--Eddy&#39;s picture(最小生成树)