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