18课 Vue第一节
Q1: url-loader必须搭载file-loader?
Q2: 图片的打包问题,如果直接写在img标签里用src引用图片,该如何打包?
Q3: 如何根据不同的页面html模板打包与之对应的css/js文件?
--------------------------------------------------------------------------------
工具——webpack
--------------------------------------------------------------------------------
三大框架:
vue 前端
react 程序
angular
--------------------------------------------------------------------------------
现代开发模式? 20%表现层
vue/react
传统开发模式? 80%表现层
jQuery
--------------------------------------------------------------------------------
MVC——数据、表现、行为分离
--------------------------------------------------------------------------------
视图层 <--> 数据层
--------------------------------------------------------------------------------
MVC、MVP、MVVM
--------------------------------------------------------------------------------
前端渲染 vs 后台渲染
降低服务器负担、带宽压力小 SEO、兼容、安全性
用户体验好
--------------------------------------------------------------------------------
vue的核心是数据
--------------------------------------------------------------------------------
指令(directive)——补充了html的属性
v-bind
可以用于任何属性,有两个属性有另外的写法
class、style
class="aaa bbb ccc active"
style="width: 200px; height: 200px; background: red;"
v-bind:xxx=""
:xxx=""
--------------------------------------------------------------------------------
v-model:数据双向绑定
数据(data)和input之间双向绑定
输入组件
v-model进来的数据,都是字符串
--------------------------------------------------------------------------------
v-text 直接输出html代码
v-html innerHTML
--------------------------------------------------------------------------------
v-bind
v-model
v-text/html
--------------------------------------------------------------------------------
vue事件
v-on:click="fn(x,x,x...)"
@click="fn(x,x,x...)"
--------------------------------------------------------------------------------
v-show display
v-if 删除元素
--------------------------------------------------------------------------------
v-for
1.数组 v-for="item,index in array"
2.json v-for="val,key in json"
3.字符串 v-for="char,index in str"
4.数字 v-for="i in num"
--------------------------------------------------------------------------------
虚拟DOM——json
{
tag: 'ul',
child: [
{tag: 'li', child: [
...
]}
]
}
<ul>
<li>
<h2></h2>
<p></p>
</li>
</ul>
:key属性
1.不能重复
2.不能变
--------------------------------------------------------------------------------
[
...,
...,
...
]
[
...,
...,
...,
...
]
--------------------------------------------------------------------------------
v-for
v-on
v-show/if
--------------------------------------------------------------------------------
v-on
v-once ?
--------------------------------------------------------------------------------
v-pre:预编译
提高性能
防止意外
--------------------------------------------------------------------------------
v-cloak
--------------------------------------------------------------------------------
1.vm结构
new Vue({
el, data, methods
computed, props, watch, template, router, ...
})
2.概念
数据同步
双向绑定
虚拟DOM
3.指令
--------------------------------------------------------------------------------
虚拟DOM:
合并请求
快速查询
局部刷新
--------------------------------------------------------------------------------
18课 Vue第一节的更多相关文章
- 19课 Vue第二节
事件修饰符 stop 禁止冒泡once 单次事件prevent 阻止默认事件native 原生事件(组件)keycode|name 筛选按键 组合键 : @keydown.ctrl.enter s ...
- 学习Vue第一节,Vue的模式与写法格式
引用Vue <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf- ...
- 8、第八次课jquery第一节20151006
1.JS JQUERY 的区别 jquery 底层基于js 它是对于JS进行封装,代码量比较少.[write less do more] 网上可以下载jquery 类库文件,写的时候需要智能提示在js ...
- 工程课Linux第一节笔记
上课笔记 文件系统结构 /根目录 /bin/ 存放系统命令,普通用户与root都可以执行 /etc/ 配置文件保存位置 /lib/ 系统调用的函数库保存位置 /var/ 目录用于存储动态数据,例如缓存 ...
- 我的第一节Android课
我的第一节安卓课程,今天非比寻常的一天,我开始了我程序猿之路的第一节安卓课程,安卓课程只是我的一个兴趣班,我的本专业是java开发,因为喜欢做一个属于自己的一个手机APP,就选多个一样技能,毕竟十八般 ...
- [iOS]Objective-C 第一节课
Objective-C 第一节课 本节课的主要内容 创建Objective-C的第一个工程 HelloWorld Objective-C中的字符串 创建Objective-C的第一个工程 打开Xcod ...
- centos mysql 实战 第一节课 安全加固 mysql安装
centos mysql 实战 第一节课 安全加固 mysql安装 percona名字的由来=consultation 顾问+performance 性能=per con a mysql ...
- Centos安装自定义布局才能自己划分各个区的大小ctrl+z ,fg ,route -n ,cat !$ ,!cat ,XShell 设置, ifconfig CentOS远程连接 Linux中的输入流 第一节课
Centos安装自定义布局才能自己划分各个区的大小ctrl+z ,fg ,route -n ,cat !$ ,!cat ,XShell 设置, ifconfig CentOS远程连接 Linux中 ...
- Java第一节课动手动脑
在第一节课的动手动脑中,主要解决四则运算问题. 首先第一个是出30道四则运算题目,在100以内.这个问题需要控制随机数生成的范围和结果的范围在100以内就可以. 第一次改进是3点:一为避免重复,二为定 ...
随机推荐
- bzoj2502: 清理雪道(有源汇有上下界最小流)
传送门 别说话,自己看,我不会->这里 我这里用的建图方法是先跑一次最大流,连上$(t,s,inf)$之后再跑一遍,然后答案就是之前连的那条边的反向边的流量 据说还有种方法是连上$(t,s,in ...
- oracle例程
原创转载请注明出处 启动例程: 数据库启动例程的3个步骤 启动例程(NOMOUNT状态):读取参数文件,分配SGA和启动后台进程. 装载数据库(MOUNT状态):根据初始化参数control_file ...
- 毕马威&阿里:通向智能制造的转型之路
文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 2019 年 4 月 17 日,毕马威与阿里研究院携手举办了智能经济主题报告发布会,从技术.制造.组织 ...
- Oracle 11g 数据类型
1. 字符类型 数据类型 长度 说明 CHAR(n BYTE/CHAR) 默认1字节,n值最大为2000 末尾填充空格以达到指定长度,超过最大长度报错.默认指定长度为字节数,字符长度可以从1字 ...
- CF987C Three displays 暴力
题意翻译 题目大意: nnn个位置,每个位置有两个属性s,cs,cs,c,要求选择3个位置i,j,ki,j,ki,j,k,使得si<sj<sks_i<s_j<s_ksi< ...
- luoguP4931 情侣?给我烧了!(加强版)
luogu 普通版题解:https://www.cnblogs.com/lcxer/p/10876856.html 在普通版里,我们考虑对于\(n\)对情侣,恰好\(k\)对是和谐的方案数是 \[ a ...
- Django-- CRM1客户建表与装饰器
一.CRM项目(1) 引入三个表:用户表,客户表,校区表,班级表,梳理逻辑关系并迁移数据库,生成表. 使用admin插入数据,admin是Django提供的web形式的后台数据管理页面,它是和用户认证 ...
- Docker基础 :网络配置详解
本篇文章将讲述 Docker 的网络功能,包括使用端口映射机制来将容器内应用服务提供给外部网络,以及通过容器互联系统让多个容器之间进行快捷的网络通信,有兴趣的可以了解下. 大量的互联网应用服务包含多个 ...
- C/C++规范学习:
一 关于浮点数: 1.1浮点数是否等于0判断:因为浮点数都有精度,不能拿浮点数直接和0.0f进行比较,而应该采用以下方法: if (f32Data == 0.0f) // 隐含错误的比较 #defin ...
- ElasticSearch 全文检索— ElasticSearch 基本操作
REST 简介-定义 REST (REpresentation State Transfer)描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fielding ...