心路历程：vue2.0+webpack+koa2 前后端同构实践（三）

2024年1月8日 137次阅读 来源: siwuxie

vue2.0升级

纠错

第一篇中有个错误观点

必须用新的方法render来代替template

vue2.0中都JXS和template两种写法都支持。JXS有一定的应用场景，特别是在前后端同构时，稍后总结。

升级

我当前使用的版本：v1.0.16，升级到v2.0.0-beta.1

官方资料

Vue2.0 Features

分隔符

Global API
Vue.config.delimitersreworked as a component-level option
Vue.config.unsafeDelimiters deprecated, use v-html

Options > Misc
delimiters new, replacing the original global config option. Only available in standalone build.

插入文本时，不能使用自定义分隔符，可以是以下形式

<div>{{text}}</div>
<div v-text='text'></div>

构建项目时发现有个坑。绑定元素属性时，有以下几种写法：

<div title={{title}}>不推荐的写法</div>
<div title="{{title}}">可以接受的写法</div>
<div :title="title">最佳实践</div>

  1. 第一个没有用引号把属性值包裹起来，虽然vue解析时不会报错，但是在使用html-minifier压缩代码时，会解析出错。也许你暂时没有压缩html代码的需求，还是尽量规范代码比较好。

  2. 第二个不会出现第一的问题。

  3. 第三个相对起来更直观清晰。

插入Html时，只能使用 v-html 指令。

但是有个疑问，为什么在同构时，使用v-html会导致前后端渲染不一致。

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. Bailing hydration and performing full client-side render.

还原事故现场骚扰尤大大去。issues

事件监听

When used on a custom component, v-on now only listens to custom events $emitted by that component. (no longer listens to DOM events)

之前为了省事会那么干

<icon @click='clickParent'></icon>

以上代码通过JS原生事件click执行，如果是非JS原生事件那么就要通过子元素触发。
现在绑定的事件名必须是子元素定义过的。

待续

    原文作者：siwuxie
    原文地址: https://segmentfault.com/a/1190000006021655
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞