vue 答案

Posted 2022-06-05 teahouse

1.

概述
VueJS作为一个前端框架，少不了模板引擎的功能，为了优化模板引擎，Vue会在编译阶段把template转化为render函数，在编译阶段之前（预编译阶段）我们可以定制一些模板引擎的行为，比如文本插入分隔符、指令、过滤器

模板引擎
通过Vue的官方文档，我们知道Vue提供的模板引擎的语法有：

插值 1.1. html标签的文本内容 1.2. HTML标签的纯HTML内容 1.3. HTML标签的属性内容
指令 2.1. 内置的指令有： 2.2. 指令可以带上修饰符
过滤器
Vue给了我们很大的灵活性，比如我们可以定义文本插入分隔符、指令、过滤器
2.

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化时，就会触发oninput，把最新的value传递给 sth。

我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：

在给<input />元素添加v-model属性时，默认会把value作为元素的属性，然后把‘input‘事件作为实时传递value的触发事件
3.

不能，会获取不到值

4.不可以。
Vue会把methods和data的东西，全部代理到Vue生成的对象中。

5.1. 单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。 
2. 在main.js中引入，并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用； 
3. 或者直接引入到需要的模块文件中使用；

6.

Vue 2.0 不再支持在 v-html 中使用过滤器

解决方法：

1：全局方法（推荐）

2：computed 属性

3：$options.filters（推荐

7.目标文件：项目目录 > config文件夹 > index.js

打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片，在build文

件内utils.js中配置路径。

目标文件：项目目录 > build文件夹 >utils.js

在图中所示位置添加代码

publicPath:‘../../‘,
8.因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require

9.

2.1.1 vue------SSR
         首先vue2.x直接提供了一份完整的构建Vue服务端渲染。Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

具体的使用指南--------------------------------请移步官方文档

    2.1.2 vue------Nuxt.js
    从头搭建一个服务端渲染的应用是相当复杂的。幸运的是 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。
Nuxt.js是创建Universal Vue.js应用程序的框架。

它的主要范围是UI渲染，同时抽象出客户端/服务器分布。

我们的目标是创建一个足够灵活的框架，以便您可以将其用作主项目库或基于Node.js的当前项目。

Nuxt.js预先设置了使Vue.js应用服务器的开发更加愉快的所有配置。

另外，我们还提供另一个名为nuxt generate的部署选项。它将构建一个静态生成的 Vue.js应用程序。我们相信这个选择可能是微软服务开发Web应用程序的下一个重要步骤。

作为一个框架，Nuxt.js提供了很多功能，可以帮助您在客户端和服务器端之间进行开发，如异步数据，中间件，布局等。

 

以上是Nuxt.js的官方介绍，总的来说Nuxt.js是一个基于Vue的框架，大部分都是vue的东西，看一遍例子再研究研究，也是很容易上手的。总体来说是个不错的框架，不需要去配置webpack那些繁琐的东西，很大程度上的让vue-ssr更加的亲民了。

个人感觉nuxt的性价比有点低，其实我建议你自己用vue-ssr接口去实现 需要实现的功能可以从nuxt里扒这样构建工程的思路更清晰些。
10.

1. 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
2. 缓存所有路径匹配到的路由组件，包括路由组件里面的组件，
3. 1. include 字符串或正则表达式，只有名称匹配的组件会被缓存
   2. exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存
   3. max 数字，最多可以缓存多少组件实例
   4. 1. 生命周期activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
      2. deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated