Vue.js大总结
最近回顾了一下Vue.js的基础知识,把认为重要的几个点简单的罗列了出来
vue渐进式的理解
vue可以开发很多插件,可以把很多插件组合到一起,渐进的增加vue的功能
update beforeUpdated
在这两个钩子中不要修改data数据,否则会死循环,
因为数据修改后update会执行,执行后又会修改数据,如此便会死循环
data
data为什么要是一个函数而不是一个属性?
因为要保证每一个实例都有一个属于自己的作用域
v-model
注意的问题
1、v-model是个语法糖(它是由v-bind和v-on结合体,原理是利用这两个实现)
2、v-model在自定义组件上的使用(文档)
props验证
1、告诉使用你组件的开发人员该传什么类型的参数
2、三种验证方式
修饰符
.sync
在子组件中可修改父组件传递的值(虽然一般不允许)
ref 和 refs
refs相当于一个钩子,能勾到定义了ref的组件,可以用实现父组件拿到子组件的数据并进行修改,
但一般不这么做,因为这么做破坏了单向数据流,
我们应该进行父子组件传参,拿到参数后进行保存在data中在进行修改
混入mixin
- 尽量避免全局混入,
开发插件
流程及规则
1、vue.use()使用插件
2、开发插件
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
生产环境的部署
前后端不分离发布(nginx中间服务器)
TypeScript
vue 2.0写ts很艰难,vue3.0将会改善,并直接引入类的概念
Vue Router
$route 和 $router
$route保存的路由的信息
$router上挂在是路由的方法
虚拟DOM
逐层比较要改变后的DOM
比较后在内存中更改
更改后再次逐层比较
服务端渲染 ssr框架
vue在服务器端的渲染(Node.js举例)
1、装载服务端渲染依赖包 yarn add vue-server-renderer
2、装载vue的包 yarn add vue
3、引入vue并实例化vue(不用挂在el,因为实在后端)
4、引入vue-server-renderer并创建实例
5、....
服务端渲染框架 (nuxt)
Vue.js大总结的更多相关文章
- Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
- Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- vue.js的app.js太大怎么优化?
vue.js的app.js太大怎么优化? # http://nginx.org/en/docs/http/ngx_http_gzip_module.htmlgzip on;gzip_min_lengt ...
- 聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...
- 《前端福音,vue.js 之豆瓣电影组件大揭秘-video》
{{ message }} 小胡子语法 在 Vue 中被称之为双花括号插值表达式 ---------------- http://todomvc.com/ TodoMVC是一款开源的JavaScr ...
- vue.js 中slot 用处大(转载)
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- 第十篇:vue.js for循环语句(大作业进行时)
Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- 设计模式->观察者模式
观察者模式能很大的降低模块之前的耦合.详细的观察者模式,客官们能够去看<设计模式>或者<Head first设计模式>等之类的书. 在java中,java.util库中封装了观 ...
- [Node.js] Setup Local Configuration with Node.js Applications
Github To stop having to change configuration settings in production code and to stop secure informa ...
- 【Hibernate学习】 ——ORM(四)再次认识实体继承
在信用办时.做失信.守信.黑名单这一块的时候.先把原来的需求看了看.紧接着就開始设计实体,这一块大部分都是同样的信息,所以就设计了一个实体,而且用一个状态标识出来是失信.守信还是黑名单. 在之后的改动 ...
- 欢聚时代校园招聘java开发一面经历
收到yy短信通知笔试通过后隔天就一面了,面试时间是下午1点半,跟另外一个同学在1点半的时候已经到了目的酒店,发现面试都集中在一个大厅,摆了非常多桌椅,由不同的面试关在面试.等到2点多的时候才到我.先说 ...
- 微信小程序初探(二、分页数据请求)
大家好 波哥小猿又来啦[斜眼笑],昨天咱们讲了微信小程序简单数据请求,有没有照着教程实现请求的同学们啦 实现的同学举个爪[笑脸].哈哈,好了不扯犊子啦,我相信有的同学已经实现了简单的数据请求,没有实现 ...
- Codeforces--626B--Cards(模拟)
Cards Time Limit: 2000MS Memory Limit: 262144KB 64bit IO Format: %I64d & %I64u Submit Sta ...
- Java-java-com-util-common-service:TreeService.java
ylbtech-Java-java-com-util-common-service:TreeService.java 1.返回顶部 1. package com.shineyoo.manager.ut ...
- 原生JS---3
原生js学习笔记3——数组 定义数组 两种方式定义一个数组: 1. var array1 = new array(1, 2, 3, 4); 2. var array2 = [1, 2, 3, 4]; ...
- [Apple开发者帐户帮助]三、创建证书(4)创建Safari签名证书
您的Safari扩展程序必须由Apple颁发的证书签名,您可以在开发者帐户中创建和下载该证书. 在“ 证书”,“标识符和配置文件”中,从左侧的弹出菜单中选择“Safari扩展”. 在“证书”下,选择“ ...
- Appium + python - long_press定位操作实例
from appium.webdriver.common.touch_action import TouchActionfrom appium import webdriverimport timei ...