前端组件

组件化 注册组件的基本步骤 创建组件构造器 （调用Vue.extend()方法） 注册组件 （调用Vue.component()方法） 注册组件语法糖 省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替 使用组件 （在Vue实例的作用范围内使用组件） 组件模板的分离写法 语法糖简化了Vue组件的注册过程，但是template模块中js和html代码混杂的写法仍让我们苦恼 于是Vue提供了两种方式，来分离模板中的js和html代码 - 使用 标签 ，再通过id来关联 js <script type="text/x-template" id="cpn"> 模板内容 </script> Vue.component('cpn', { template: '#cpn' }) //全局组件 - 使用 <template> 标签，再通过id来关联 js <template id="cpn"> 模板内容 </template> 注册组件方式于上相同 组件可以访问Vue实例数据吗？ 组件是一个单独功能模块的封装 这个模板有属于自己的HTML模板，也应该有自己的数据data 组件中的数据是保存再哪里呢？顶层的Vue实例中的data吗 通过实践，我们发现是不能访问的，即使可以，如果将所有的数据都放在Vue实例中，Vue也会变的非常臃肿 结论：Vue组件应该有自己保存数据的地方

复习 """ 1、指令： v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show：绑定的变量为布尔类型 <p v-show="isShow">{{ msg }}</p>，隐藏时，任然在页面中通过display:none渲染 v-if|v-else-if|v-else: 前分支成立会屏蔽后分支，else分支不需要条件 v-if="showBox == 'rBox'" v-for：遍历 字符串: v-for="(ch, index) in str" 数组：v-for="(ele, index) in arr" 对象：v-for="(value, key, index) in obj" 2、实例成员： computed: 设置 方法属性，该方法属性在页面渲染后，绑定的方法中任意变量发送改变(都被监听)，都会回调绑定的方法 - 一个变量依赖多个变量 computed:{ fullName() { return this.firstName + this.lastName; } } watch: 设置已有属性的监听事件，监听的变量值改变就会回调绑定的方法 - 多个变量依赖一个变量 watch:{ fullName() { this.firstName = this.fullName.split('')[0]; this

Vue项目环境搭建 """ node ~~ python：node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内源cnpm vue ~~ django：vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤 npm cache clean --force """ Vue项目创建 1) 进入存放项目的目录 >: cd *** 2) 创建项目 >: vue create 项目名 3) 项目初始化 空格选择，回车确认 pycharm配置并启动vue项目 1) 用pycharm打开vue项目 2) 添加配置npm启动 vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └──

前端面试题总结 Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解？ vue路由面试题 1.mvvm 框架是什么？ 2.vue-router 是什么?它有哪些组件 3.active-class 是哪个组件的属性？ 4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值 5.vue-router 有哪几种导航钩子? 6.$route 和 $router 的区别 7.vue-router响应路由参数的变化 8.vue-router传参 9.vue-router的两种模式 10.vue-router实现路由懒加载（ 动态加载路由 ） vue常见面试题 1.vue优点 2.vue父组件向子组件传递数据？ 3.子组件像父组件传递事件 4.v-show和v-if指令的共同点和不同点 5.如何让CSS只在当前组件中起作用 6.<keep-alive></keep-alive>的作用是什么? 7.如何获取dom 8.说出几种vue当中的指令和它的用法？ 9. vue-loader是什么？使用它的用途有哪些？ 10.为什么使用key 11.axios及安装

今日总结 v-once input框时时监控让其中的一个不时时更新指令v-once v-cloak 在渲染页面是，我么可以使用v-cloak属性 在style样式中设置display：none，在拥有这个属性的div中就不会出现抖动 v-if和v-show 两者都是隐藏标签，但v-if是只在缓存中，不在页面上渲染，但是v-show是在页面上渲染的标签的 他们的变量都是布尔类型 v-if 和v-else-if和v-else 条件指令家族 在满足这里的满足条件过后，不执行其它的和pathon后端是一样的 案列，原理就是通过v-if的显示标签，来达到隐藏标签 我么在button绑定一个统一的事件，然后每一个事件的传入的参数又都不一样 然后我们就可以在app的data中去赋值，然后在div中我们用v-if来判断data中取得值是否是我么button中传入的值，如果是就是ture。，如果不是就是false就不显示 v-pre原义指令 在标签中如果是有了这个指令就会原样输出 ​ {{}msg} ​ v-for循环指令 循环字符串和列表，有两个参数，第一个是值，第二个是索引 循环字典有三个参数，第一个是value，第二个是key 第三个是key的索引 案例 就是通过input框的v-model指令来时时更新data中的user_msg数据 然后通过button绑定事件

vue对比jquery vue ： mvvm 数据驱动影响视图 适用于复杂数据 jquery ： mvc 视图塞入数据 适用于复杂视图动效 （其实都是js 的封装，以及对html 的扩展） 相关指令 v-text 等同大胡子效果 但是会转换为字符串 v-html 绑定html属性 <div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script> v-if 三兄弟 只会渲染判断为真的 dom v-show 绑定值的布尔值来判断是否显示 会渲染整个 dom 只是会根据布尔只能判断是否增加 display none 这个内联样式 v-if 和 v-show 的区别： v-if 有更高的切换消耗； v-show 有更高的初始渲染消耗； v-if 适合运营条件不大可能改变； v-show 适合频繁切换 v-for : 循环 v-once 只会渲染一次 即使数据改变 v-bind 用来响应地更新html属性 使用场景：绑定接口请求得到的数据 简写： : ，可以绑定class和内联样式 <style> .class1 { background: #444; color: #eee; } </style>

YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“，发现都是旧版本Yslow的使用介绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助，希望给初次使用Yslow的朋友一些帮助。 注：英文不是很好，对着翻译软件翻译的，有不对的地方，大家指正。 安装 YSlow 先安装 Firebug https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug 帮助文档 http://www.getfirebug.com/docs.html . 再下载安装 http://developer.yahoo.com/yslow 使用Yslow Yslow是运行在Firebug窗口下，所有要运行Yslow，必须安装Firebug。 有两种方法启动Yslow 1、打开Firebug窗口，选择Yslow选项。 2、直接点击浏览器右下角的Yslow启动按钮。 你第一次打开Yslow时，以下图像作为Firebug的一部分被显示在的浏览器窗口。 点击 Run Test 运行Yslow，也可以点击 Grade, Components, 或Statistics选项开始对页面的分析。 你可以选择 Autorun YSlow each time a web page is loaded

转载自：https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一、什么是 MVVM ？ MVVM是 Model-View-ViewModel的缩写。 MVVM是一种设计思想。 Model 层代表数据模型，也可以在 Model中定义数据修改和操作的业务逻辑； View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来， ViewModel 是一个同步 View 和 Model的对象（桥梁）。 在 MVVM架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和 mvvm其实区别并不大

NetModular是什么？ NetModular 不仅仅是一个框架，它也是一整套的模块化与前后端分离的快速开发的解决方案，目标是致力于开箱即用，让开发人员完全专注于业务开发，不需要关心底层封装和实现。(距离目标仍任重而道远~) 项目结构 功能介绍 后端框架 00_Host：不仅可以开发Web应用，同时依赖于 Electron 可以开发跨平台客户端应用 01_Utils：提供了丰富的基础帮助类和扩展方法 02_Data：提供基于 Dapper 的轻量级ORM框架，支持 MSSQL 、 MySql 、 SQLite ，在提供各种便利功能(CRUD、多表连接、分页查询、Lamdba等)的同时，也保留了dapper的所有功能，性能与便利同在 03_Logging：集成了简单好用的结构化日志组件 Serilog ，您不需要关心是如何集成的，只需要按照 官方文档 ，注入 ILogger 对象使用即可 04_Mapper：集成了强大的对象映射组件 AutoMapper ，自动扫描映射关系配置信息并注册 05_Swagger：集成了接口文档生成组件 Swagger ，并进行了扩展，可以按照模块切换文档 06_Cache：抽象了缓存组件，可在 MemoryCache 和 Redis 之间任意切换 07_Validation：集成了强大的对象验证组件 FluentValidation 08_Auth

组件化与模块化的区别 　　什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块 ，将来我们需要什么功能，就可以去调用对应的组件即可 　　组件化与模块化的不同： 　　　　模块化：是从代码逻辑的角度进行分析，方便代码分层开发，保证每个功能模块的只能单一　　 　　　　组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div class="app"> <!-- 引用组件的名称 --> <login></login> <login2></login2> <login3></login3> <hr> <login6></login6> </div> <!-- 注意 这里的id是必须的