Vue进阶使用(三)---使用Element UI组件库及Sass预处理语言

Vue进阶使用(三)---使用Element UI组件库及Sass预处理语言

前言:做一个有梦想的程序猿!

使用Element UI第三方组件库

Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端元组件库,由饿了么前端团队推出。它并不依赖于Vue,却是一个十分适合Vue项目的框架。

1. cnpm安装element-ui依赖

cnpm install element-ui --save

在 package.json 文件可看到element-ui版本信息,

 "dependencies": {
    "element-ui": "^2.13.2",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

当然你也可以先在package.json文件中指定element-ui版本,然后通过

cnpm install

命令进行安装。

2. main.js文件全局引入注册element ui组件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 引入element ui组件
import Element from 'element-ui'
// 引入element ui默认主题
import 'element-ui/lib/theme-chalk/index.css'
// 全局注册element ui组件
Vue.use(Element)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

3.使用Element UI组件

通过上面全局注册element ui组件之后,可以在任意的vue文件使用element ui的任何组件
使用element ui的table组件,直接在template标签上使用标签就可以使用element ui的table组件,无需再在引入组件并在components里面注册。
example:

<template>
  <div class="element-index">
    Element Table
    <el-table :data="tableData"  border class="el-table" >
          <el-table-column key="1" type="index" label="序号" align="center" width="100px" :resizable='false'></el-table-column>
          <el-table-column prop="date" label="日期" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      tableData: [
        {
          date: '2020-06-19',
          name: 'Nirvana',
          address: '北京市长安街108号'
        },
        {
          date: '2020-06-19',
          name: 'Lss',
          address: '上海市南京路107号'
        },
        {
          date: '2020-06-18',
          name: 'Lvtu',
          address: '广州市车陂106号'
        },
        {
          date: '2020-06-17',
          name: 'Wenxuan',
          address: '深圳市宝安区105号'
        }
      ]
    }
  }
}
</script>

<style lang="css" scoped>
    .element-index{
        margin: 0;
        padding: 0;
    }
    .el-table{
        position:absolute;
        left:25%;
        width: 50%;
    }
</style>

在这里插入图片描述
这里只举例介绍 el-table 使用,element ui其他具体组件的参数可自行浏览element ui的官方文档
https://element.eleme.cn/#/zh-CN/component/installation

sass css预处理语言

1、css、sass、scss的区别
CSS 指层叠样式表 (Cascading Style Sheets)。
Sass (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。Sass 是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目,其后缀是.sass。
SCSS (Sassy CSS),一款css预处理语言,SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感,其实就和css3语法一样,其后缀名是分别为 .scss。

2. SCSS常用用法
(1)变量

SASS允许使用变量,所有变量以$开头。

$blue : #1875e7; 
  div {
   color : $blue;
}

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

$side : left;
  .rounded {
    border-#{$side}-radius: 5px;
  }

(2)计算功能
SASS允许在代码中使用算式:

$var: 50px;
  body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

(3)嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:

div h1 {
    color : red;
}

可以写成:

div {
    h1 {
      color:red;
    }
}

属性也可以嵌套,比如border-color属性,可以写成:

p {
    border: {
      color: red;
    }
}

注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

a {
   &:hover { color: #ffb3ff; }
}

(4)注释
SASS共有两种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

/*!
  重要注释!
*/

(5)引入文件

@import命令,用来插入外部文件。

@import "path/filename.scss";
@import "path/filename";

如果插入的是.css文件,则等同于css的import命令。

@import "foo.css";

插入外部文件

@import "http://foo.com/bar";

Vue中使用Sass

1. cnpm引入sass依赖

cnpm install node-sass --save
cnpm install  --save  sass-loader@7.0.3

在 package.json 文件可看到Sass版本信息

"dependencies": {
    "element-ui": "^2.13.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.0.3",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

2. Vue文件中使用scss

在Vue文件中style模块中使用scss语法
现在可以将style里面的语法改写如下:

<style lang="scss" scoped>
    .element-index{
        margin: 0;
        padding: 0;
        .el-table{
            position:absolute;
            left:25%;
            width: 50%;
        }
    }
</style>

3. 全局样式
有时候有些样式是公用的,需要抽出来写在一个公共样式文件中去。传统的html需要为每个html文件引入css样式文件来实现公用样式,vue引入公用样式只需要要main.js入口文件引入样式文件即可。
在项目src目录下创建一个styles目录,styles目录下创建一个base.scss文件
在这里插入图片描述
base.scss文件内容:

$color-ff3300: #ff3300;
$font-size-32: 32px;

.color-ff3300{
    color: $color-ff3300;
}
.color-ff3300{
    font-size: $font-size-32;
}

main.js文件中引入这个样式作为全局样式

// 引入全局样式
import './styles/base.scss'

这样就可以直接在html标签当中使用全局样式

<template>
  <div class="sass-index">
    Element Table
    <div class="color-ff3300 font-size-32">
        全局样式
    </div>
  </div>
</template>

<script>
export default {
  name: 'sass-index',
  data () {
    return {
    }
  }
}
</script>
<style lang="scss" scoped>
    .sass-index{
        margin: 0;
        padding: 0;
    }
</style>

在这里插入图片描述

最后,如果本篇文章对您有所帮助,可以评论或点赞支持一下哦,感谢感谢!
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是实现模糊搜索的步骤: 1. 安装Element UI组件库 在Vue项目中使用Element UI组件库需要先安装它,可以使用npm或yarn命令进行安装。具体命令如下: 使用npm安装:`npm i element-ui -S` 使用yarn安装:`yarn add element-ui` 2. 引入Element UI组件Vue项目中需要使用Element UI组件,首先需要在main.js中引入Element UI组件。具体代码如下: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 实现模糊搜索功能 在Vue组件的template标签中添加一个el-input组件和el-table组件,其中el-input组件用于输入关键词进行搜索,el-table组件用于显示搜索结果。具体代码如下: ```html <template> <div> <!-- el-input组件 --> <el-input placeholder="请输入关键词" v-model="keyword" @input="handleSearch"></el-input> <!-- el-table组件 --> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </div> </template> ``` 在Vue组件的script标签中,定义data属性,其中包含tableData数组和keyword字符串。tableData数组用于存储搜索结果,keyword字符串用于存储搜索关键字。同时,在methods中定义handleSearch方法,该方法用于实现模糊搜索功能。具体代码如下: ```javascript <script> export default { data() { return { tableData: [ { name: '张', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, ], keyword: '' } }, methods: { handleSearch() { if (!this.keyword) { // 如果keyword为空,显示所有数据 this.tableData = [ { name: '张', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, ] } else { // 使用filter方法实现模糊搜索 this.tableData = this.tableData.filter(item => item.name.includes(this.keyword)) } } } } </script> ``` 以上代码实现了一个简单的模糊搜索功能,当在el-input组件中输入关键词时,el-table组件会根据关键词进行模糊搜索,并显示搜索结果。如果关键词为空,el-table组件会显示所有数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值