前端及开发文章及欣赏

Vue中动画的实现 从基本动画,到炫酷动画。看这一篇就够了

前端达人

Vue中的基本动画实现

直接一点,基本动画的步骤

  1. 在需要加动画的地方,加入transition
<transition> <P v-if="isNum">我是一只小小鸟</P> </transition>  
  • 1
  • 2
  • 3

在style中写vue已定义好的类名

 进入前和结束后的状态
    .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段
    .v-enter-active,.v-leave-active{ transition: all 0.5S ease }  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这样就已经完成了基本动画了,上完整代码

<!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="../node_modules/vue/dist/vue.min.js"></script> <style> 进入前和结束后的状态 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } </style> </head> <body> <div id="box"> <button @click="tags">显示/隐藏</button> <transition> <P v-if="isNum">我是一只小小鸟</P> </transition> </div> <script> new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) </script> </body> </html>  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

动画类名的重定义

只需要在transition标签上添加一个name属性,然后把类名中v改成你定义的类名就可以了

<transition name='my'> <P v-if="isNum">我是一只小小鸟</P> </transition>  
  • 1
  • 2
  • 3
 进入前和结束后的状态
    .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段
    .my-enter-active,.my-leave-active{ transition: all 0.5S ease }  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

使用第三方的动画库

第三方的动画库有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity动画、AlloyStick骨骼动画引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就选择其中一个库做示范其他都一样

  1. 在使用第三方库之前,需要在,你要做动画的标签上加个基本类
    animated,这个基本类是根据每个库不一样而定的,
    我们要用Animated,所以需要加
<transition name='my'> <P v-if="isNum" class="animated">我是一只小小鸟</P> </transition>  
  • 1
  • 2
  • 3

接着就是引入第三方库,你们可以下载。
我比较懒,我就直接npm下载了。

npm install animate.css --save  
  • 1

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">  
  • 1

写上类名,就行了,,提示,千万别下错文件,不然动画也无法实现

 <!-- 进入用lightSpeedIn    离开用 lightSpeedOut --> <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut"> <P v-if="isNum" class="animated">我是一只小小鸟</P> </transition>  
  • 1
  • 2
  • 3

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

<p style="box-sizing:border-box;margin-top:0px;margin-bottom:1rem;font-size:16px;font-variant-ligatures:no-common-ligatures;white-space:normal;background-color:#FFFFFF;text-align:justify;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;">
    <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><i style="box-sizing:border-box;"><a href="http://www.lanlanwork.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">蓝蓝设计</a>(&nbsp;<a href="http://www.lanlanwork.com/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;background-position:0px -60px;padding:0px;margin:0px;text-indent:34px;">www.lanlanwork.com&nbsp;</a>)是一家专注而深入的<a href="http://www.lanlanwork.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">界面设计公司</a>,为期望卓越的国内外企业提供卓越的UI界面设计、<a href="http://www.lanlanwork.com/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">BS界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">cs界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">ipad界面设计</a><a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">包装设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">图标定制&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">用户体验 、交互设计、&nbsp;</a><a href="http://www.lanlanwork.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">网站建设</a><a href="http://www.lanlanwork.com/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、<a href="http://www.lanlanwork.com/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">平面设计服务</a></i></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</p>

<div>
    <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"> </b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</div>

Vue中select的使用

前端达人

效果:

HTML:

 
  1. <div class="sel01">
  2. <select v-model="selectClassEnd" @change="selectClass($event)">
  3. <option value="NONE">未选择</option>
  4. <option v-for="(options,id) in selectClassData" :key="id" :value="options.id">
  5. {{options.title}}
  6. </option>
  7. </select>
  8. </div>

CSS:

 
  1. .sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
  2. .sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
  3. border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
  4. .sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
  5. .sel01 select:focus{outline:none;}

JS:

 
  1. export default {
  2. name:"Name",
  3. data(){
  4. return{
  5. selectClassData:[ //类别选择数据或者从后台获取数据
  6. {id:1,title:"科普类"},
  7. {id:2,title:"亲子类"},
  8. {id:3,title:"制作类"},
  9. {id:4,title:"创意类"}
  10. ],
  11. selectClassEnd:"NONE",//类别默认选择
  12. select_class_id:"",//类别id提交报名需要
  13. }
  14. },
  15. methods:{
  16. //类别选中
  17. selectClass(event){
  18. this.select_class_id = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称
  19. },
  20. }


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


vue-cli@3添加sass(vue项目模板封装系列)

前端达人

前言

上一期分享了如何在vue-cli3的框架中,封装mixinsmodule 。本期将分享如何在vue项目中添加sass
在这里插入图片描述

GitHub项目地址:https://github.com/jiangjiaheng/web-template

关于sass

本文默认你对sass有一定的了解,并且阅读过相关的官方文档,因此本文就不在赘述关于sass的基础知识。

在这里插入图片描述
sass官方文档:https://www.sass.hk/

添加方式

1. 创建项目时选择预处理器sass

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features 
  • 1
  • 2
  • 3
  • 4

移动上下键选择Manually select features:手动选择创建项目的特性。

显示如下:

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

移动上下键在CSS Pre-processors,按提示点击空格键选择CSS-processors

显示如下:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus 
  • 1
  • 2
  • 3
  • 4

选择第一个SCSS/SASS作为我们的CSS预处理器。

完成后项目会帮我们安装sass-loader node-sass

2. 手动安装sass-loader

如果在创建项目没有选择CSS预处理器,我们也可以手动安装sass-loader node-sass来集成scss

npm install -D sass-loader node-sass 
  • 1

使用

完成添加后,我们只需要在style指定langscss即可,无须多余操作:

<style lang="scss" scoped>
$color: red;

h1 {
  color: $color;
}
</style>




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Vue报错Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解决方案

前端达人

错误提示:


  1. ERROR Failed to compile with 1 errors 下午6:51:57
  2. error in ./src/views/Login.vue
  3. Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
  4. at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\utils.js:77:13)
  5. at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\index.js:34:59)
  6. @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
  7. Config":false}!./node_modules/_sass-loader@9.0.3@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
  8. 13:3-17:5 14:22-397
  9. @ ./src/views/Login.vue
  10. @ ./src/router/index.js
  11. @ ./src/main.js
  12. @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 解决方案:

找到问题所在:Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

这个问题是因为Sass的版本过高导致,所以根据提示将版本改为对应的版本就可以了,我这里是改为4.0.0版本。

下面是怎么改版本:

1.首先在IDE中找的package.json文件:

2. 然后打开该文件找到“sass-loader”,后面跟着的便是你现在的版本,根据提示将其改为对应版本即可 :

3.在Terminal(终端)中输入:cnpm install(注意用cnpm 淘宝的镜像,用npm可能会下载不成功)

 4.运行成功:npm run dev


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Vue.js——十分钟入门Vuex

前端达人

一. 什么是Vuex?

Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

Vuex核心
Vuex核心

上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解.

二. 为什么要使用Vuex?

试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vueB.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vueB.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现, A组件想要和B组件通讯往往是这样的:

组件通讯
组件通讯
  • A组件说: "报告老大, 能否帮我托个信给小弟B" => dispatch一个事件给App
  • App老大说: "包在我身上, 它需要监听A组件的dispatch的时间, 同时需要broadcast一个事件给B组件"
  • B小弟说: "信息已收到", 它需要on监听App组件分发的事件

这只是一条通讯路径, 如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验.

Vuex就是为了解决这一问题出现的

三.如何引入Vuex?

  1. 下载vuex: npm install vuex --save
  2. main.js添加:
import Vuex from 'vuex' Vue.use( Vuex ); const store = new Vuex.Store({ //待添加 }) new Vue({ el: '#app', store, render: h => h(App) }) 

四. Vuex的核心概念?

在介绍Vuex的核心概念之前, 我使用vue-cli初始化了一个demo, 准备以代码的形式来说明Vuex的核心概念, 大家可以在github上的master分支进行下载.这个demo分别有两个组件ProductListOne.vueProductListTwo.vue, 在App.vuedatat中保存着共有的商品列表, 代码和初始化的效果如下图所示:

初始化效果
初始化效果
//App.vue中的初始化代码 <template> <div id="app"> <product-list-one v-bind:products="products"></product-list-one> <product-list-two v-bind:products="products"></product-list-two> </div> </template> <script> import ProductListOne from './components/ProductListOne.vue' import ProductListTwo from './components/ProductListTwo.vue' export default { name: 'app', components: { 'product-list-one': ProductListOne, 'product-list-two': ProductListTwo }, data () { return { products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] } } } </script> <style> body{ font-family: Ubuntu; color: #555; } </style> 
//ProductListOne.vue <template> <div id="product-list-one"> <h2>Product List One</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-one{ background: #FFF8B1; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-one ul{ padding: 0; } #product-list-one li{ display: inline-block; margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #E8800C; } </style> 
//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-two{ background: #D1E4FF; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-two ul{ padding: 0; list-style-type: none; } #product-list-two li{ margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #860CE8; display: block; } </style> 

核心概念1: State

state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

  • 此时我们就可以把App.vue中的两个组件共同使用的data抽离出来, 放到state中,代码如下:
//main.js import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' Vue.use( Vuex ) const store = new Vuex.Store({ state:{ products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] } }) new Vue({ el: '#app', store, render: h => h(App) }) 
  • 此时,ProductListOne.vueProductListTwo.vue也需要做相应的更改
//ProductListOne.vue export default { data () { return { products : this.$store.state.products //获取store中state的数据 } } } 
//ProductListTwo.vue export default { data () { return { products: this.$store.state.products //获取store中state的数据 } } } 
  • 此时的页面如下图所示, 可以看到, 将公共数据抽离出来后, 页面没有发生变化.


    state效果
    state效果

到此处的Github仓库中代码为: 分支code01

核心概念2: Getters

我将getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

  • 此时,我们可以在main.js中添加一个getters属性, 其中的saleProducts对象将state中的价格减少一半(除以2)
//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] }, getters:{ //添加getters saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } } }) 
  • productListOne.vue中的products的值更换为this.$store.getters.saleProducts
export default { data () { return { products : this.$store.getters.saleProducts } } } 
  • 现在的页面中,Product List One中的每项商品的价格都减少了一半
getters效果
getters效果

到此处的Github仓库中代码为: 分支code02

核心概念3: Mutations

我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

  • 下面,我们在main.js中添加mutations属性,其中minusPrice这个回调函数用于将商品的价格减少payload这么多, 代码如下:
//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ //添加mutations minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } } }) 
  • ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPrice方法
//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">减少价格</button> //添加按钮 </ul> </div> </template> 
  • ProductListTwo.vue中注册minusPrice方法, 在该方法中commitmutations中的minusPrice这个回调函数
    注意:调用mutaions中回调函数, 只能使用store.commit(type, payload)
//ProductListTwo.vue export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); //提交`minusPrice,payload为2 } } } 
  • 添加按钮, 可以发现, Product List Two中的价格减少了2, 当然你可以自定义payload,以此自定义减少对应的价格.
    mutations效果
    mutations效果

(Product List One中的价格没有发生变化,原因是getter 监听的是map方法产生的新对象)

到此处的Github仓库中代码为: 分支code03

核心概念4: Actions

actions 类似于 mutations,不同在于:

  • actions提交的是mutations而不是直接变更状态

  • actions中可以包含异步操作, mutations中绝对不允许出现异步

  • actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象

  • 此时,我们在store中添加actions属性, 其中minusPriceAsync采用setTimeout来模拟异步操作,延迟2s执行 该方法用于异步改变我们刚才在mutaions中定义的minusPrice

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠标', price: 20}, {name: '键盘', price: 40}, {name: '耳机', price: 60}, {name: '显示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } }, actions:{ //添加actions minusPriceAsync( context, payload ) { setTimeout( () => { context.commit( 'minusPrice', payload ); //context提交 }, 2000) } } }) 
  • ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPriceAsync方法
<template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">减少价格</button> <button @click="minusPriceAsync">异步减少价格</button> //添加按钮 </ul> </div> </template> 
  • ProductListTwo.vue中注册minusPriceAsync方法, 在该方法中dispatchactions中的minusPriceAsync这个回调函数
export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); }, minusPriceAsync() { this.$store.dispatch('minusPriceAsync', 5); //分发actions中的minusPriceAsync这个异步函数 } } } 
  • 添加按钮, 可以发现, Product List Two中的价格延迟2s后减少了5


    actions效果
    actions效果

到此处的Github仓库中代码为: 分支code04

核心概念5: Modules

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 


作者:EduMedia_熠辉

链接:https://www.jianshu.com/p/a804606ad8e9

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


Vue中使用定时器setInterval和setTimeout

前端达人

js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout

 

一、循环执行(setInterval)

 

顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉

用法是setInterval(“方法名或方法”,“延时”), 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔

复制代码
<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
    data() { return {
        timer: '',
        value: 0 };
    },
    methods: {
      get() { this.value ++;
        console.log(this.value);
      }
    },
    mounted() { this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  }; </script>
复制代码

 

 

上面的例子就是页面初始化的时候创建了一个定时器setInterval,时间间隔为1秒,每一秒都会调用一次函数get,从而使value的值加一。

 

 

 

 

二、定时执行 (setTimeout)

 

定时执行setTimeout是设置一个时间,等待时间到达的时候只执行一次,但是执行完以后定时器还在,只是没有运行

用法是setTimeout(“方法名或方法”, “延时”); 第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔

复制代码
<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
    data() { return {
        timer: '',
        value: 0 };
    },
    methods: {
      get() { this.value ++;
        console.log(this.value);
      }
    },
    mounted() { this.timer = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  }; </script>
复制代码

 

 

上面是页面初始化时候创建一个定时器setTimeout,只在1秒后执行一次方法。

 

 

 

定时器需要在页面销毁的时候清除掉,不然会一直存在!!!

 



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

css3通过scale()、rotate()实现放大、旋转

前端达人

css3通过scale()实现放大功能、通过rotate()实现旋转功能,下面有个示例,大家可以参考下

一、scale()方法

缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放。

跟translate()方法一样,缩放scale()方法也有3种情况:

(1)scaleX(x):元素仅水平方向缩放(X轴缩放);
(2)scaleY(y):元素仅垂直方向缩放(Y轴缩放);
(3)scale(x,y):元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放);

1、scaleX(x)

语法:

transform:scaleX(x)

说明:

x表示元素沿着水平方向(X轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。
大家想想倍数是怎样一个概念就很好理解了。

2、scaleY(y)

语法:

transform:scaleY(y)

说明:

y表示元素沿着垂直方向(Y轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。

3、scale(x,y)

语法:

transform:scale(x,y)

说明:

x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。

举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<head>
    <title>CSS3缩放scale()用法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        .main
        {
            margin:100px auto;/*水平居中*/
            width:300px;
            height:200px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #jb51
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:scaleX(1.5);
            -webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:scaleX(1.5);     /*兼容-moz-引擎浏览器*/
        }
        /*普通方便对比*/
         #jbzj
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="jb51">脚本之家1</div>
    </div>
    <div class="main">
        <div id="jbzj">脚本之家2</div>
    </div>
</body>
</html>

在chrome浏览器预览效果如下:

分析:

从上图可以看出,元素沿着X轴方向放大了1.5倍(两个方向同时延伸,整体放大1.5倍)。

transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/

当使用上面代码时,在浏览器预览效果如下:

css3通过scale()实现放大功能

通过rotate()实现旋转功能

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。如下图所示:

HTML代码:

1
2
3
<div class="wrapper">
  <div></div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

演示结果

而transition则可设置元素变化所需的时间

html中的结构代码

<ul>
<li><img src="image/1.jpg" ></li>
<li><img src="image/2.jpg" ></li>
<li><img src="image/3.jpg" ></li>
</ul>

css3样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul{
margin-top:50px;
list-style:none;
}
ul li{
width:200px;
height:150px;
float:left;
margin-left:10px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
}
ul li:hover{
-webkit-transform:scale(1.5) rotate(10deg);
-moz-transform:scale(1.5) rotate(10deg);
-o-transform:scale(1.5) rotate(10deg);
}
li img{
width:100%;
height:100%;
}

以上就是css3通过scale()、rotate()实现放大、旋转的详细内容,更多关于css3放大、旋转的资料请关注脚本之家其它相关文章!




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:脚本之家

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

解决往数组添加数据,第二次会覆盖第一次的方案

前端达人


  1. // 获取缓存里边的项目数据
  2. var e = wx.getStorageSync('projectList');
  3. if(!e){
  4. // 获取存放项目
  5. var e = this.data.projectList;
  6. }
  7. // 获取项目个数
  8. var a = e.length;
  9. var title = wx.getStorageSync('title');
  10. var value = wx.getStorageSync('value');
  11. var img_url = wx.getStorageSync('img_url');
  12. var i = {
  13. id: a,
  14. title: title,
  15. value: value,
  16. img_url: img_url,
  17. };
  18. e.push(i);

这里的代码是以小程序为案例的,所有程序都是一个道理

直接上代码来解释,第二次数据会覆盖第一次的原因就是,每次在触发这个方法的时候初始化了数据。所以就会覆盖数据

所以在这个方法里边只需要先获取e这个数据,判断e是否存在值,当有值的时候往里边push

数据,当没有数据的时候直接将数据初始化即可




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

vue.js — 解决添加重复数据报错问题

前端达人

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </div> </body> <script> var vm = new Vue({
            data: {
                arr: ['apple','pear','orange']
            },
            methods:{
                add: function(){ //[Vue warn]: Duplicate value found in v-for="val in arr": "tomato".  //Use track-by="$index" if you are expecting duplicate values. //重复添加会报数据重复提示 this.arr.push('tomato');
                }
            }
        }).$mount('#box'); </script> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

当我们点击【添加】按钮两次之后,会出现如下报错信息
vue添加重复数据报错

使用track-by解决添加重复数据报错问题

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr" track-by='$index'> {{val}} </li> </ul> </div> </body> <script> var vm = new Vue({
            data: {
                arr: ['apple','pear','orange']
            },
            methods:{
                add: function(){ //[Vue warn]: Duplicate value found in v-for="val in arr": "tomato".  //Use track-by="$index" if you are expecting duplicate values. //重复添加会报数据重复提示 this.arr.push('tomato');
                }
            }
        }).$mount('#box'); </script> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

解决vue添加相同数据报错

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

JavaScript 中的作用域、预解析以及变量提升

前端达人



JavaScript 中的作用域、预解析以及变量提升

作用域:变量的作用范围

局部作用域:函数内部



在局部作用域声明的变量称为局部变量,局部变量只能在当前函数内部使用



1)函数在执行的时候会在内存中开辟新空间



2)当执行完毕函数之后,会关闭作用域空间(变量被销毁)



注意:形参也是局部变量



function fn() {

    let b = 5

  // 局部访问 变量 b 

    console.log(b) // 5

}

fn()

// 全局访问 变量 b

console.log(b) // 访问不存在的变量,报错

1

2

3

4

5

6

7

8

在控制台打印得到如下结果







全局作用域:函数外部



1)在全局作用域声明的变量是全局变量,全局变量可以在任何地方使用



2)因为全局变量可以任何地方使用,所以要特别关注局部变量



let a = 2

function fn() {

    // 局部访问 变量 a

    console.log(a) // 2

}

fn()

// 全局访问 变量 a

console.log(a) // 2

1

2

3

4

5

6

7

8

在控制台打印得到如下结果







函数内部之所以能够访问到变量 a ,是因为有一个作用链,函数内部访问一个变量会先在自己的作用域内找,找不到会向上级作用域找,找不到就会报错



例如 如下代码



(找不到报错的情况)



function fn() {

    function fn1() {

        function fn2() {

            // 局部访问 变量 a

    console.log(a) // 2

        }

        fn2()

    }

    fn1()

}

fn()

1

2

3

4

5

6

7

8

9

10

11

控制台打印







(全局变量局部访问的情况)



let a = 'hello javascript'

function fn() {

    function fn1() {

        function fn2() {

            // 局部访问 变量 a

    console.log(a) // hello javascript

        }

        fn2()

    }

    fn1()

}

fn()

1

2

3

4

5

6

7

8

9

10

11

12

控制台打印







块级作用域:类似局部作用域



1)用 {} 包裹一块



2)let声明变量具有块级作用域,var声明变量不具有块级作用域



例如



(以字面量对象为例)



let obj = {

    uname: '法外狂徒-张三',

    age: 68

}

1

2

3

4

想要访问这个对象里面的属性必须通过 obj.属性,而不能直接访问



预解析

预解析:在代码执行之前把变量和函数会提前解析到当前作用域的最前面



任何作用域在执行之前都要预解析 (函数优于变量)



变量:带有声明的变量,只定义不赋值



1)变量在声明之前被访问,变量的值为 undefined



函数:带有名字的函数,只定义不调用



1)函数优于变量



console.log(a) // undefined

fn() // hello javascript



function fn() {

    console.log('hello javascript')

}

var a = 2

1

2

3

4

5

6

7

代码是自上而下执行,但是在代码执行前会先进行代码的预解析,把变量以及函数 声明 提升到当前作用域的最前面,如上代码,console.log(a) 会打印 undefined



但是,注意!!!注意!!!



变量必须是 var 声明的才可以,如果是 let 声明的变量会报错



图 (var 声明的 a)







图 (let 声明的 a)







变量提升

预解析会引起变量的提升



变量不声明就输出会报错



console.log(a) // 报错

1

控制台打印







用 var 声明



console.log(a) // undefined



var a = 'hello javascript'

1

2

3

控制台打印 undefined ,我们知道变量定义不赋值会输出 undefined,说明变量已经存在并且提升了,但是只提升了声明没有提升赋值,所以打印 undefined ,如果没有提升的话,就会像上面一样在执行 console.log(a) 的时候直接报错



结论:var 存在变量提升



用 let 声明



console.log(a) // 报错



let a = 'hello javascript'

1

2

3

结论:let 不存在变量提升



补充:

申明变量:let \ var \ const



1)let 声明的变量不在window内



2)var 声明的变量相当于给window添加了个属性,let不会



3)var 声明的变量不具有块级作用域,let具有块级作用域



4)var 可以重复声明,let只能声明一次



5)const 用来定义常量,不可以改值



6)const 定义的常量必须初始化有值,let可以不设置值



建议:常量名字因为是不可以改动的值,所以常量名建议用大写,一般用于定义固定不变的值




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档