以下内容全部为自己对vue 的理解,如有不对感谢告知
一、vue是客户端渲染
再说vue前我想先搞清楚渲染方式:
1、客户端渲染CSR
先把页面请求到客户端,这时页面只是一个模板,浏览器解析时发起template资源请求,同时发送数据请求,再客户端调用template渲染HTML,把渲染的内容显示到页面。(SEO不友好,前后端分离)
加载HTML,在等JS,在跑JS的过程是发生用户在点击之后,在这个过程中用户需要一定需要等着,出现空白页面。
2、服务端渲染SSR
客户端请求页面,服务器会先在后端调用template,把指定的页面预先在后端渲染,然后res.end把页面渲染后后返回客户端显示(前后端不分离,SEO友好)
已经有页面显示,那些加载渲染在服务端就完成了。
二 、修改配置
1、webpack版本升级的配置
2、vue-loader配置
3、css-modules配置
4、eslint
5、webpack
三、vue实例
new vue就是创建了一个实例。
new vue({
el:"#root",
template:"
})
const app = new vue;
new vue创建了一个实例也相当于:
const app = {(template” "})
app.$mount(#root)
当然还可以动态的绑定数据:
const app = {(template"
data:{text:0}
})
setInterval(() => {app.text+=1},1000)
四、属性
***.
d
a
t
a
∗
∗
∗
.
data ***.
data∗∗∗.props
***.
e
l
∗
∗
∗
.
el ***.
el∗∗∗.options(整个实例)
***.
r
o
o
t
(
根
节
点
)
∗
∗
∗
.
root(根节点) ***.
root(根节点)∗∗∗.watch(当注销watch是调用unwatch方法)
new vue({watch:text(old,new)})
和以下监听效果一样 ***.
w
a
t
c
h
(
′
t
e
x
t
′
,
(
o
l
d
,
n
e
w
)
=
>
)
∗
∗
∗
.
watch('text',(old, new) => {}) ***.
watch(′text′,(old,new)=>)∗∗∗.server(判断服务器渲染)
***.
r
e
f
s
∗
∗
∗
.
refs ***.
refs∗∗∗.slots
***.
c
h
i
l
d
r
e
n
∗
∗
∗
.
children ***.
children∗∗∗.on
***.
e
m
i
t
∗
∗
∗
.
emit ***.
emit∗∗∗.once
***.
f
o
r
c
e
U
p
d
a
t
a
∗
∗
∗
.
forceUpdata ***.
forceUpdata∗∗∗.set
***.delete
set 和delete虽然都是删除某个属性,但是set只是修改,属性还在,导致内存溢出(系统无法回收内存,使用的内存过多)
***.
n
e
x
t
T
i
c
k
(
D
O
M
节
点
渲
染
完
成
后
,
下
一
次
d
o
m
更
新
时
才
调
用
用
传
入
的
c
a
l
l
b
a
c
k
,
应
用
:
有
时
组
件
更
新
了
值
但
D
O
N
没
变
化
时
可
以
nextTick(DOM节点渲染完成后,下一次dom更新时才调用用传入的callback,应用:有时组件更新了值但DON没变化时可以
nextTick(DOM节点渲染完成后,下一次dom更新时才调用用传入的callback,应用:有时组件更新了值但DON没变化时可以next Tick调试)
以上时vue实例及它的属性,其中vue中的this指向的时vue的实例,组件中常用到的this就是以上例子中const出来的app这个对象,我们称之为全局this,因为都指向这个app对象上。