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第一节的更多相关文章

  1. 19课 Vue第二节

    事件修饰符 stop 禁止冒泡once 单次事件prevent 阻止默认事件native 原生事件(组件)keycode|name 筛选按键   组合键 : @keydown.ctrl.enter s ...

  2. 学习Vue第一节,Vue的模式与写法格式

    引用Vue <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf- ...

  3. 8、第八次课jquery第一节20151006

    1.JS JQUERY 的区别 jquery 底层基于js 它是对于JS进行封装,代码量比较少.[write less do more] 网上可以下载jquery 类库文件,写的时候需要智能提示在js ...

  4. 工程课Linux第一节笔记

    上课笔记 文件系统结构 /根目录 /bin/ 存放系统命令,普通用户与root都可以执行 /etc/ 配置文件保存位置 /lib/ 系统调用的函数库保存位置 /var/ 目录用于存储动态数据,例如缓存 ...

  5. 我的第一节Android课

    我的第一节安卓课程,今天非比寻常的一天,我开始了我程序猿之路的第一节安卓课程,安卓课程只是我的一个兴趣班,我的本专业是java开发,因为喜欢做一个属于自己的一个手机APP,就选多个一样技能,毕竟十八般 ...

  6. [iOS]Objective-C 第一节课

    Objective-C 第一节课 本节课的主要内容 创建Objective-C的第一个工程 HelloWorld Objective-C中的字符串 创建Objective-C的第一个工程 打开Xcod ...

  7. centos mysql 实战 第一节课 安全加固 mysql安装

    centos mysql  实战  第一节课   安全加固  mysql安装 percona名字的由来=consultation 顾问+performance 性能=per  con  a mysql ...

  8. Centos安装自定义布局才能自己划分各个区的大小ctrl+z ,fg ,route -n ,cat !$ ,!cat ,XShell 设置, ifconfig CentOS远程连接 Linux中的输入流 第一节课

    Centos安装自定义布局才能自己划分各个区的大小ctrl+z ,fg ,route -n ,cat !$ ,!cat ,XShell 设置, ifconfig  CentOS远程连接  Linux中 ...

  9. Java第一节课动手动脑

    在第一节课的动手动脑中,主要解决四则运算问题. 首先第一个是出30道四则运算题目,在100以内.这个问题需要控制随机数生成的范围和结果的范围在100以内就可以. 第一次改进是3点:一为避免重复,二为定 ...

随机推荐

  1. bzoj2502: 清理雪道(有源汇有上下界最小流)

    传送门 别说话,自己看,我不会->这里 我这里用的建图方法是先跑一次最大流,连上$(t,s,inf)$之后再跑一遍,然后答案就是之前连的那条边的反向边的流量 据说还有种方法是连上$(t,s,in ...

  2. oracle例程

    原创转载请注明出处 启动例程: 数据库启动例程的3个步骤 启动例程(NOMOUNT状态):读取参数文件,分配SGA和启动后台进程. 装载数据库(MOUNT状态):根据初始化参数control_file ...

  3. 毕马威&阿里:通向智能制造的转型之路

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 2019 年 4 月 17 日,毕马威与阿里研究院携手举办了智能经济主题报告发布会,从技术.制造.组织 ...

  4. Oracle 11g 数据类型

    1.     字符类型 数据类型 长度 说明 CHAR(n BYTE/CHAR) 默认1字节,n值最大为2000 末尾填充空格以达到指定长度,超过最大长度报错.默认指定长度为字节数,字符长度可以从1字 ...

  5. CF987C Three displays 暴力

    题意翻译 题目大意: nnn个位置,每个位置有两个属性s,cs,cs,c,要求选择3个位置i,j,ki,j,ki,j,k,使得si<sj<sks_i<s_j<s_ksi​< ...

  6. luoguP4931 情侣?给我烧了!(加强版)

    luogu 普通版题解:https://www.cnblogs.com/lcxer/p/10876856.html 在普通版里,我们考虑对于\(n\)对情侣,恰好\(k\)对是和谐的方案数是 \[ a ...

  7. Django-- CRM1客户建表与装饰器

    一.CRM项目(1) 引入三个表:用户表,客户表,校区表,班级表,梳理逻辑关系并迁移数据库,生成表. 使用admin插入数据,admin是Django提供的web形式的后台数据管理页面,它是和用户认证 ...

  8. Docker基础 :网络配置详解

    本篇文章将讲述 Docker 的网络功能,包括使用端口映射机制来将容器内应用服务提供给外部网络,以及通过容器互联系统让多个容器之间进行快捷的网络通信,有兴趣的可以了解下. 大量的互联网应用服务包含多个 ...

  9. C/C++规范学习:

    一 关于浮点数: 1.1浮点数是否等于0判断:因为浮点数都有精度,不能拿浮点数直接和0.0f进行比较,而应该采用以下方法: if (f32Data == 0.0f) // 隐含错误的比较 #defin ...

  10. ElasticSearch 全文检索— ElasticSearch 基本操作

    REST 简介-定义 REST (REpresentation State Transfer)描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fielding ...