new Vue，执行初始化挂载$mount方法，通过自定义Render方法、template、el等生成Render函数通过Watcher监听数据的变化当数据发生变化时，Render函数执行生成VNode对象通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素至此，整个new Vue的渲染过程完毕。

File -》 Preference -》 Setting -》搜索setting.json -》 Edit in settings.json settings.json方法1：File -》 Preference -》 Setting -》搜索setting.json -》 Edit in settings.json settings.json Setting.json

方法2：File -》 Preference -》 搜索框输入：files.autoSave 之后能看到 files.autoSave 的可选项有 off : 关闭自动保存（默认） afterDelay: 延迟xx时间后保存，可在 “files.autoSaveDelay“ 中配置延迟时间； onFocusChange: 器失去焦点时自动保存； onWindowCha

或者：

其中：

4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号根目录下创建eslint规则文件 .eslintrc.js （下面browsers 多了s 正确的为 browser ）

对于 vue 来说，模板本质就是一个字符串

vue 中的模板是有逻辑的，是动态的，如 v-if、v-for 等

与 html 格式很像，但有很大区别；html 是静态的，而 vue 模板是动态的

最终还是要转化为 html 来显示，怎么才能转换为 html 来显示呢？

模板最终必须转换为 JS 代码？

因为模板有逻辑 (v-if,v-for)，必须用 JS 才能实现(前端中只有 JS 是图灵完备语言）

转换为html渲染页面，必须用 JS 才能实现渲染

因此模板最终要转换为一个 JS 函数(render 函数)，（render 函数是指的渲染函数，并不一定就必须是 render 这个名字）

render函数

render 函数的 with 的用法

模板中，所有信息都包含在了 render 函数中

this 即 vm

price 就是 this.price，也是 vm.parice，也是 data.price

《div id=“app“》 《child :para=“this.argus“ :temp=“this.html“》《/child》《/div》《script》 var vm = new Vue({ el: “#app“, data: { html: `《video》《/video》`, argus: {src:“movie.ogg“, controls:“controls“} }, components: { child: { functional: true, render:(h, context)=》 { const temp = context.props.temp; const para = context.props.para; return h({template: temp}, { attrs: para }) }, props: { temp: { type: String, required: true }, para: { type: Object, required: true } } } }})《/script》

这种情况很简单,动态添加进去的tr不能应用js和css,在tr添加进页面后,再调用一下$(“tr“).addClass(“样式名“); 重新给他添加一下样式即可.至于js的话,在绑定事件的时候用:$(“tr“).live(funtion(){ }) 这样就可以了.因为绑定事件的时候live就

1. 它表单是以一个 JSON 表示的

2. 点击的时候将表单格式化为一个 JSON 数据，然后 拼接一段 vue 或者 html 的代码再通过 vue-codemirror-lite 显示出来

详细过程和源码是这样:

先通过 packages/KFormDesign/index.vue 中的 handleOpenCodeModal 方法将 json 数据传入packages/KFormDesign/module/codeModal.vue, 然后在 Modal 中拼接 vue 模版和 html 模版。再在 packages/PreviewCode/index.vue 中通过 vue-codemirror-lite 将拼接后的代码高亮显示出来

将vue的dom转成普通html方法。1、Vue.js的DOM转换成普通HTML的过程中，会利用Vue.js的特性来把数据和模板编译成实际的HTML。2、从而可以以最快的速度实现从JavaScript对象到DOM的转换。

vue自动配置打包完后通常只有一个html页面，如果我们想要打包出两个页面怎么办呢？ 只需要修改webpack的配置，下边是我的项目截图，供参考

在vue.config.js中配置 其中entry为文件引用路径，template为打包后文件名字及位置。

vue从后台获取的数据有html标签通过v-html渲染到页面给html添加样式的方法如下：

准备材料：Vue.js、HBuilder、浏览器

1、创建静态页面vhtml.html，并引入vue.js文件。

2、在《body》《/body》元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令。

3、绑定v-html指令数据，这里设置为字符串。

4、Vue.js库的v-html指令是插入html元素，修改datas为包含《p》《/p》标签。

5、预览该静态页面，这时会看到页面显示如下

6、将调试打开，这时发现《div》《/div》中有个《p》《/p》标签，完成添加。

vue3.0新特性有：

1、性能比vue2.x快1.2 2倍- Performance ；

2、支持tree-shaking- Tree shaking support ；

3、引入了Composition API- Composition API ；

4、暴露了自定义渲染API- Custom Renderer API ；

5、新增三个组件（Fragment、Teleport、Suspense);

6、 更好的支持TS - Better TypeScript support；

一、Performance

二、 Three-shaking support

Vue3.x中的核心API都支持tree-shaking，这些API都是通过包引入的方式而不是直接在实例化时就注入，只会对使用到的功能或特性进行打包（按需打包），这意味着更多的功能和更小的体积。

三、Composition API Vue2.x中，我们通常采用mixin来复用逻辑代码，使用起来虽然方便，但也存在一些问题：代码来源不清晰、方法属性可能出现冲突。因此，Vue3.x引入了Composition API（组合API），使用纯函数分割复用代码。和React Hooks的概念相似。

四、 Fragment、Teleport、Suspense

Fragment 在书写Vue2.x时，由于组件必须是一个根结点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的（这和React 中的Fragment组件是一样的）。 Teleport Teleport其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

五、API- Custom Renderer API

vue官方实现的 createApp 会给我们的 template 映射生成 html 代码，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之类的不是html的代码的时候，那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。