专栏首页全栈开发之路Vue项目笔记(持续更新)

Vue项目笔记(持续更新)

一、命名方式(目录、组件)

组件的文件夹与文件名都使用PascalBase命名

二、父组件与子组件:

1、 父组件引用子组件:

//父组件
<script>
import TitleBar from './Common/TitleBar'
export default {
  name: 'WapCalc',
  components: {
    TitleBar: TitleBar
  }
}
</script>

2、父组件向子组件传值

父组件关键点:

1、:xxx="xxx"
2、data(){
    return{
        xxx: 'xxx'
    }
  }
//父组件
<template>
  <div class="WapCalc">
    <TitleBar :title="title"></TitleBar>
  </div>
</template>

<script>
import TitleBar from './Common/TitleBar'
export default {
  name: 'WapCalc',
  data () {
    return {
      title: '房贷计算器'
    }
  },
  components: {
    TitleBar: TitleBar
  }
}
</script>
<style scoped>
</style>

子组件关键点:

1、props: ['xxx']
2、{{xxx}}
//子组件
<template>
  <div class="title-bar">
    <span class="back" style="display: none;"></span>
    <span>{{title}}</span>
  </div>
</template>

<script>
export default {
  name: 'TitleBar',
  data () {
    return {
    }
  },
  props: ['title']
}
</script>
<style scoped>
</style>

3、 兄弟组件间传值

使用一个Vue实例作为中央事件总线。 Vue内部有一个事件机制,可以参考源码。 $on方法用来监听一个事件 $emit用来触发一个事件。

/*新建一个Vue实例作为中央事件总嫌*/
import Vue from 'vue';
let VueEvent = new Vue()
export default VueEvent

在触发的组件中引入

import VueEvent from '../../assets/js/VueEvent.js'
VueEvent.$emit('事件名', data)

在接收的组件中引入

import VueEvent from '../../assets/js/VueEvent.js'
VueEvent.$on('事件名', (data) => {...})

三、vue-cli支持scss

vue-cli中已经内置配置好了sass 以及lass的配置。 如果需要的话直接下载两个模块就可以了 webpack它会根据 lang 属性自动用适当的加载器去处理。 npm install node-sass --save-dev npm install sass-loader --save-dev

四、vue-cli配置autoprefixer

npm install postcss-loader autoprefixer --save-dev 新建一个 postcss.config.js 文件,输入:

module.exports = {
    plugins: [
        require('autoprefixer')({
            browserslist: [
                ">0.01%"
            ]
        })
    ]
}

五、vue-cli配置雪碧图

npm i --save webpack-spritesmith

//添加配置
const SpritesmithPlugin = require('webpack-spritesmith');
......
    plugins: [
      new SpritesmithPlugin({
        //目标小图标
        src: {
          cwd: path.resolve(__dirname, `./src/${PAGE}/assets/sprite`),
          glob: '*.png'
        },
        // 输出雪碧图文件及样式文件
        target: {
          image: path.resolve(__dirname, `./src/${PAGE}/assets/images/sprite.png`),
          css: path.resolve(__dirname, `./src/${PAGE}/assets/css/sprite.scss`)
        },
        apiOptions: {
          cssImageRef: '../../assets/images/sprite.png'
        },
        // 雪碧图中每个图片带有一定间距
        spritesmithOptions: {
          algorithm: 'top-down',
          padding: 4
        }
      }),
      TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin(),
    ]
......

六、vue生命周期

vue生命周期

七、v-for既可以遍历数组也可以遍历对象

遍历对象: v-for="(value, proper) in obj" value是属性值,proper是属性索引

八、class动态绑定方式

1、根据某个条件加载样式

:class="{'样式名': 条件}"

2、三元表达式

:class="[条件?'条件为真时的class':'条件为假时的class']"

3、三元表达结合数组

:class="[[条件?'条件为真时的class':'条件为假时的class'],{'样式名': 条件},'样式名'...]"

九、webkit-box-orient: vertical打包线上不显示

为什么用:多行截断

overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*文本溢出时显示省略标记*/
display:-webkit-box;/*设置弹性盒模型*/
-webkit-line-clamp:1;/*文本占的行数,如果要设置2行加...则设置为2*/
 -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/

原因: optimize-css-assets-webpack-plugin 这个插件的问题,在webpack打包的时候,过滤了部分css 解决:

/*! autoprefixer: off */
-webkit-box-orient: vertical;
 /* autoprefixer: on */

十、Vue使用axios

axios是一个基于 promise 的 HTTP 库 使用:npm install axios 自己封装一个方法使用:

import axios from 'axios'
async getApi(url) {
  try {
    let res = await axios.get(url)
    res = res.data
    return new Promise((resolve) => {
      if (res.code === 0) {
        resolve(res)
      } else {
        resolve(res)
      }
    })
  } catch (err) {
    console.log(err)
  }
},

=》IE兼容性问题

报错:promise 在ie中未定义的问题 解决:

import Promise from 'promise-polyfill'
if (!window.Promise) {
  window.Promise = Promise
}

十一、dev开发阶段解决跨域问题

在/config/index.js里设置

proxyTable: {
      '/api': {
        target: 'http://10.129.232.183:8364', /*后端提供服务的前缀地址*/
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
}

十二、package.json中dependencies与devDependencies区别

dependencies

生产环境依赖,会被打包 装包姿势:npm install xxx –save

devDependencies

开发环境依赖,不会被打包 装包姿势:npm install xxx –save-dev

区别: 在开发阶段,dependencies与devDependencies没什么大的区别,都需要被下载,因为我们开发时要用到开发环境

但当我们把打包好的项目交给运维部署时,他使用npm install命令去安装,只会把dependencies的包下载下来,而不会去下载devDependencies里面的包

十三、package.json中dependencies与devDependencies区别

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JSP学习

    参考知乎:https://www.zhihu.com/question/37962386/answer/87758781

    杨肆月
  • SpringMVC学习

    Spring MVC是一个基于MVC架构的用来简化web应用程序开发的应用开发框架,它是Spring的一部分,它和Struts2一样都属于表现层的框架。

    杨肆月
  • JS执行上下文/作用域/闭包

    2)一般来说内部能访问外部,外部不能访问内部。 那么怎么让外部也能访问内部? —— return

    杨肆月
  • 最全的Spring注解详解

    @Configuration : 配置类 == 配置文件,告诉Spring这是一个配置类 @ComponentScan(value="com.atguigu"...

    海仔
  • 一篇带你看懂Flutter叠加组件Stack

    Stack未定位的子组件大小由fit参数决定,默认值是StackFit.loose,表示子组件自己决定,StackFit.expand表示尽可能的大,用法如下:

    老孟Flutter
  • Python开发物联网数据分析平台---web框架

    前端使用Bootstrap主题框架AdminLTE,后台使用python语言的tornado作为web框架。利用tornado的模板作为主要的动态页面生成方式,...

    MiaoGIS
  • 反向传播算法推导-卷积神经网络

    在SIGAI之前的公众号文章“反向传播算法推导-全连接神经网络”中,我们推导了全连接神经网络的反向传播算法。其核心是定义误差项,以及确定误差项的递推公式,再根据...

    SIGAI学习与实践平台
  • 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能 npm 人家的包过成千上万次,但你是否有创建,发布和使用过自己的 npm 包?

    Fundebug
  • 【HDU 5858】Hard problem(圆部分面积)

    交点是(\frac{\sqrt{7} L}{4\sqrt{2}},\frac{L}{4\sqrt{2}})。

    饶文津
  • 微信小程序自定义组件详解

    从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

    前端开发博客

扫码关注云+社区

领取腾讯云代金券