vue到底是个什么东东?

以下内容全部为自己对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:"

“生成render函数,最终返回HTML里的内容
})
const app = new vue;
new vue创建了一个实例也相当于:
const app = {(template”
"})
app.$mount(#root)
当然还可以动态的绑定数据:
const app = {(template"
{{data}}
"
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没变化时可以 nextTickDOMdomcallbackDONnext Tick调试)

以上时vue实例及它的属性,其中vue中的this指向的时vue的实例,组件中常用到的this就是以上例子中const出来的app这个对象,我们称之为全局this,因为都指向这个app对象上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值