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：
合并请求
快速查询
局部刷新
--------------------------------------------------------------------------------
