vue

nuxt.js概述 1) . SPA单页面web应用，vue.js可以实现SPA –不利于SEO 2) . SEO：搜索引擎优化（增加收录、提高权重） 3) . SSR：服务器端渲染 –将前端拆分2部分：客户端和服务端 –服务器端渲染，就是让前端服务端的代码先执行，就可以提前获得后端提供的数据 4) . nuxt.js就是基于vue.js的SSR技术。 2. nuxt.js入门 安装: 步骤一：创建nuxt.js项目 npx create-nuxt-app <项目名> 步骤二：确定项目名、描述、作者，直接回车 步骤三：确定包管理工具 步骤四：选择UI框架 步骤五：选择前端服务器框架 步骤六：选择模块 步骤七：选择格式化工具 步骤八：选择测试框架 步骤九：选择渲染模式 步骤十：选择发布工具 步骤十一：安装成功-完整信息 步骤十二 : 安装成功截图---运行指令 运行完成截图 感谢各位兄弟姐妹阅读!!! 来源： oschina 链接： https://my.oschina.net/u/4234912/blog/3214389

1、如果data里面只定义了对象，对象里面的键值没有，getter/setter函数无法监听到数据变化，会导致此现象发生; 解决办法为调用vue的set函数，设置需要绑定的键值: Vue.set(obj,key,value) Or this.$set(obj.key,value) 　 2、如果数据层次太多，例如数组包对象，对象包数组，多层嵌套，会出现v-if调用失效，页面不重新渲染问题; 解决办法为在数据处理完成之后调用$forceUpdate()发放: this.$forceUpdate() 　　 来源： https://www.cnblogs.com/zaijin-yang/p/12640799.html

一、引入字体到 Vue 项目 1. 创建字体文件夹 在 static 文件夹下创建 font 文件夹。并将下载好的字体拷贝到文件夹下。 2. 创建字体样式文件(CSS) @font-face { font-family: 'numberFont'; // 自定义字体名称 src: url("./number.ttf"); // 字体的路径，后缀 ttf 一定能要小写，否则可能找不到字体文件 } 二、使用字体样式 1. 在所需页面应用相应字体样式 <style> @import "../../static/font/font.css"; </style> 2. 使用字体 <span style="font-family: numberFont">6690802</span> 来源： oschina 链接： https://my.oschina.net/chinaSoftware/blog/3219289

slot 插槽 单个slot 插槽 具名slot插槽（具有名字的插槽） 插槽特点 混合父组件的内容与子组件自己的模板-->内容分发（即插槽里的内用可以访问父组件作用域） 父组件模板的内容在父组件作用域，子组件模板的内容在子组件的作用域内编译。 来源： oschina 链接： https://my.oschina.net/u/4157150/blog/3218566

在面试过程中，被问到Vue知识点的一些碎事。 来源:掘金推荐 面试官：vue是什么？ vue是一门渐进式的javascript框架。所谓的渐进式就是：从中心的的视图层渲染开始向外扩散的构建工具层。这过程会经历：视图层渲染->组件机制->路由机制->状态管理->构建工具；五个层级。 特点：易用，灵活，高效，入门门槛低。 图来自百度👆 面试官：v-if和v-show的区别？ 前者是将DOM创建和删除后者则是改变display的值来控制DOM的显示和隐藏。 面试官：vue有什么生命周期？在new Vue 到 vm.$destory的过程经历了什么？ 初始化阶段 beforeCreate和create 挂载阶段 beforeMount和mounted 更新阶段 beforeUpdate和update 卸载阶段 beforeDestory和destory 当 new Vue() 后，首先会 初始化事件 和 生命周期 ，接着会执行 beforeCreate生命周期钩子 ，在这个钩子里面还拿不到 this.$el 和 this.$data ;接着往下走会 初始化inject 和 将data的数据进行侦测也就是进行双向绑定 ；接着会执行 create钩子函数 ，在这个钩子里面能够拿到 this.$data 还拿不到 this.$el ;到这里初始化阶段就走完了。然后会进入一个模版编译阶段

表单 v-model.lazy 懒加载 lazy懒加载模式，仅在文本框失去焦点时进行数据同步 <input type="text" v-model.lazy="myText"/> v-model.trim 去掉收尾空格 <input type="text" v-model.trim="myText"/> 来源： oschina 链接： https://my.oschina.net/u/4157150/blog/3218552

Vue学习笔记（一）数据绑定 一、初识Vue 1.MVVM模式 Model-View-View-Model模式是由经典的软件架构MVC衍生来的。当View（视图层）变化时，会自动更新ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定建立联系。 2.如何使用Vue.js 1）可直接通过script加载CDN文件 <!--自动识别最新稳定版本的Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2）使用Vue单文件的形式配合webpack使用 二、数据绑定 1.实例与数据 Vue.js应用的创建很简单，通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用： <div id="app"> {{info}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { info: 'hello world' } }) </script> 变量app代表Vue实例。 选项el用于指定一个页面中已存在的DOM元素来挂载Vue实例

这个是解析我们es6的代码的，为什么要用它呢，因为对于一些ie浏览器，甚至FF浏览器，低版本的还不能识别我们的es6代码，那么vue里面好多还让我们去写es6的代码，这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码 左边是我们写的es6代码，右边是通过babel这个工具编译之后的代码。这个代码能在我们各个浏览器中去识别。 所以我们成为babel，是用于编写下一代JavaScript的编译器。 模块化 在前端中一个js文件就是一个模块，在js中没有模块化的概念。 目前有四种模块化的方法 1.Commonjs 2.AMD 3.CMD 4.ES6Module es6Module 支持import和export。跟python的import很像。但它必须在服务器环境下才支持，或者我们可能通过webpack的babel-loader将es6支持转化成es6的语言。 在这里就不给大家演示，大家了解一下即可。后面咱们使用vue开启项目之后，一使用，自然而然就明白了。 这个是解析我们es6的代码的，为什么要用它呢，因为对于一些ie浏览器，甚至FF浏览器，低版本的还不能识别我们的es6代码，那么vue里面好多还让我们去写es6的代码，这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码 左边是我们写的es6代码

由于该项目是基于原本的安卓app，做的微信h5，所以原来的使用webview的页面现在需要在vue中实现，那就是使用iframe 查看了很多很多文档，其中这一篇是很有价值的 https://gist.github.com/pboji... 点击预览 下面将3天的爬坑最终以问答的方式总结如下： 1、Vue组件中如何引入iframe？ 2、vue如何获取iframe对象以及iframe内的window对象？ 3、vue如何向iframe内传送信息？ 4、iframe内如何向外部vue发送信息？ 1、Vue组件中如何引入iframe？ < template > < div class = "act-form" > < iframe :src = "src" > </ iframe > </ div > </ template > < script > export default { data () { return { src : '你的src' } } } </ script > 如上，直接通过添加iframe标签，src属性绑定 data 中的src，第一步引入就完成了 2、vue如何获取iframe对象以及iframe内的window对象？ 在vue中，dom操作比不上jquery的$( '#id' )来的方便，但是也有办法，就是通过 ref < template > < div

当图片还没加载完成时，可以通过loading组件填充空白区 效果图 components/loading/index.vue <template> <div class="mine-loading" :class="{'me-loading-inline':inline}"> <span class="mine-loading-indicator"> <img src="./loading.gif"> </span> <span class="mine-loading-text" v-if="loadingText">{{loadingText}}</span> </div> </template> <script> export default { name:"MeLoading", props:{//过滤器 inline:{ type:Boolean, default:false } }, data(){ return{ loadingText:"加载中..." } } } </script> <style lang="scss" scoped> .mine-loading{ width:100%; height:100%; display: flex; justify-content: center; align-items: center; flex-direction: