vue学习笔记——简单入门总结(二)

1. VUE的样式相关

1.1. 动态绑定样式：

1. class动态绑定：

  data()  {
    return{
      testClass : "redBorden"
    }
1
2
3
4

<style>
  .redBorden{
    border:5px solid red;
  }

  .biggerFont{
    font-weight: 600;
  }

</style>
1
2
3
4
5
6
7
8
9
10

  <div :class="testClass">
    这是一个简单的div
  </div>
1
2
3

如果有多个可以放置到数组里，可以再data中声明，也可以直接在样式里写数组

效果如下：

testClass : ["redBorden","biggerFont"]
1

2. 内联样式的绑定：

与class绑定几乎一致

  <div :style="style">
    这是一个简单的div
  </div>
1
2
3

style : {
        background : "red"
      }
1
2
3

1.2 : element-ui引入使用(按需引入)

1.引入element-ui

    npm i element-ui
1

2.引入babel-plugin-component

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

	npm install babel-plugin-component -D
1

3.然后，将 babel.config.js修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12

4.如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import App from './App.vue'
import {Button} from 'element-ui';

Vue.config.productionTip = false
Vue.use(Button)
new Vue({
  render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10

如果嫌弃引入一个类别的组件太多，可以去element-ui官网查找组件说明单独引入一个组件，这里不做过多赘述。

<template>
  <div :style="style">
    这是一个简单的div

      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

1.3. scoped样式：

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果style后追加scoped关键字，则改样式仅属于该组件

样式不会对嵌套的其他组件生效。

2. VUE的常用指令（二）

2.1. 条件渲染:

2.1.1. v-if指令:

<template>
  <div :style="style" >
    这是一个简单的div

      <el-button v-if="false">默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

vue会根据其中的布尔值决定是否渲染改元素

如下控制默认按钮是否渲染

2.1.1. v-show指令:

<template>
  <div :style="style" >
    这是一个简单的div

      <el-button v-show="false">默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

v-show用法与v-if相同

v-if会在dom中移除或添加元素。

而v-show仅仅是隐藏，并未真正移除。

如果需要较多的考虑元素的复用，则推荐使用v-show

2.2. 列表渲染:

利用v-for进行循环渲染，

key是必须的，用于vue识别不同的按钮，key必须确保唯一（即便最终渲染到页面上是相同的）

  <div :style="style" >
    这是一个简单的div
      <ul>
        <li v-for="type in buttonStyles" :key = type.id>
          <el-button  :type="type.id">默认按钮</el-button>
        </li>
      </ul>
    </div>
1
2
3
4
5
6
7
8

      buttonStyles :[
         {id :"primary"},
         {id :"success"},
         {id :"info"},
         {id :"warning"}
      ],
1
2
3
4
5
6

2.2. v-text-文本渲染:

把所需要的数据以文本的形式解析到标签内,原本标签内数据不再加载

<div v-text="buttonStyles"></div>
1

2.3. v-html:

内容中有html结构会被解析为标签

 htmlData:"
hahahahahah
"
1

2.4. v-cloak:

遮盖层 它的出现就是为了解决在未加载代码导致的闪烁现象

说人话就是如果vue没有进行接管的时候，可能出现将vue语法直接展现在页面的情况

使用改指令可以隐藏，给用户更好的体验

2.5 v-once:

v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次

包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染

<template>
  <div >
    <div v-once>{{i}}</div>
    <button @click="addI">i加一</button>
  </div>
</template>
1
2
3
4
5
6

  methods : {
    addI(){
      this.i++
      console.log(this.i)
    }
  }
1
2
3
4
5
6

2.6 v-pre:

浏览器解析引擎遇到vue的插值符号时会自动解析

当你想输出不被解析的纯文本时，可以使用v-pre指令。

<div v-pre>{{i}}</div>
1

2.7 自定义指令:

<div v-add = "i"></div>
1

  directives:{
    add(element,i){
      element.innerHTML = i.value+1
      console.log(element)
      console.log(i)
    }
1
2
3
4
5
6

3. VUE的插槽：

3.1. 默认插槽和具名插槽：

<div>
  这是默认插槽的位置
  <slot></slot>
  <br>
  这是slot1插槽的位置
  <slot name="slot1"></slot>
</div>
</template>

1
2
3
4
5
6
7
8
9

   <SlotTest >我是大聪明
      <a slot="slot1" href="https://www.baidu.com">百度的链接</a>
    </SlotTest>
1
2
3

实际上插槽也是组件间通信的一种方式。

3.2. 作用域插槽：

子组件提供内容（数据），在父组件中展示。

表现形式和默认插槽和具名插槽几乎是反着来的。

3. VUE的路由：

1：vue是单页面应用，路由就是为了解决从哪里来到那里去的问题
2：vue路由以#拼接哈希进行操作，目的是区别a链接或者接口，仅仅用于vue使用

3.1:路由的基本使用：

1.npm安装

我这里安装的3版本，要注意版本相匹配，否则可能会无法使用

npm install vue-router@3
1

2.路由的配置

1.创建路由文件

2.mian.js使用路由

router-link设置匹配路由，router-view设置内容呈现位置

3.2:路由的传参：

3.2.1 query传参.

1：对象传递参数

  <router-link :to="{
     path : '/RouterComponent1',
     query :  {
       data1 : 123
     }
    }">
    RouterComponent1
    </router-link>
1
2
3
4
5
6
7
8

2：对象使用参数

3.2.2 query传参.

query通过name进行传参，需要给路由进行命名

这里我给命名为RouterComponent2

 <router-link :to="{
     name : 'RouterComponent2',
     params :  {
       data2 : 456
     }
    }">RouterComponent2</router-link>
    <router-view></router-view>
1
2
3
4
5
6
7

3.3：路由的其他相关功能：

1: replace
替换历史记录，历史记录不会增加，而是替换最新的记录

2：push
可以添加记录，在最新的记录上添加记录

3：back
在历史记录中后退一步，没有历史记录不可以后退

4：go
可控制前进或者后退几步