Vue2.js进阶学习

java厂长
958 阅读2分钟

Vuejs进阶学习分享

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情。

基础语法

v-html和v-text

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

  • 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
  • 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

如果我们希望解析出HTML展示,可以使用v-html指令

  • 该指令后面往往会跟上一个string类型
  • 会将string的html解析出来并且进行渲染

而v-text

  • v-text作用和Mustache比较相似：都是用于将数据显示在界面中

  • v-text通常情况下，接受一个string类型

<template>
  <div id="app">
    <h2 v-html="k1"></h2>
    <h2 v-text="k1"></h2>
  </div>
</template>

<script>
import SmartInput from "@/components/smartInput";
export default {
  name: 'App',
  data(){
    return{
      k1: '<div style="color: red;">这是一段文字</div>',
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

image-20220630193616200

v-bind

除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

  • 比如动态绑定a元素的href属性口，动态绑定img元素的src属性，作用是动态绑定属性口，缩写： ：
<a :href="link">点击跳转到百度</a>

<script>
data(){
    return{
      k1: '<div style="color: red;">这是一段文字</div>',
      link: 'www.baidu.com',
    }
  },
</script>

image-20220630194246323

计算属性

在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。

  • 比如我们有firstName和lastName两个变量，需要显示完整的名称，但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}

我们可以将上面的代码换成计算属性：

<template>
  <div id="app">
    <h2 v-html="k1"></h2>
    <h2 v-text="k1"></h2>

    <a :href="link">点击跳转到百度</a>

    <h2>{{fullName}}</h2>
  </div>
</template>

<script>
import SmartInput from "@/components/smartInput";
export default {
  name: 'App',
  data(){
    return{
      k1: '<div style="color: red;">这是一段文字</div>',
      link: 'www.baidu.com',
      firstName: 'Robby',
      lastName: 'Jsebabytes'
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

image-20220630194654391

v-on

在前端开发中，我们需要经常和用于交互。

这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等口在vue中如何监听事件呢？使用v-on指令。作用：绑定事件监听器，缩写：@

<template>
  <div id="app">
    <h2 v-html="k1"></h2>
    <h2 v-text="k1"></h2>

    <a :href="link">点击跳转到百度</a>

    <h2>{{fullName}}</h2>

    <button @click="count()" value="点击按钮+1">+{{num}}</button>
    <button @click="countTen(10, $event)" value="点击按钮+10">+{{num}}</button>
  </div>

</template>

<script>
import SmartInput from "@/components/smartInput";
export default {
  name: 'App',
  data(){
    return{
      k1: '<div style="color: red;">这是一段文字</div>',
      link: 'www.baidu.com',
      value: "我是你爹",
      firstName: 'Robby',
      lastName: 'Jsebabytes',
      num: 1
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName;
    }
  },
  methods: {
    count() {
      this.num++
    },
    countTen(count, event) {
      console.log(event)
      this.num += 10;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

当通过methods中定义方法，以供@click调用时，需要注意参数问题:

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意:如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

image-20220630202340033

image-20220630202838309

v-if/v-else-if/v-else

<template>
  <div id="app">
    <h2 v-html="k1"></h2>
    <h2 v-text="k1"></h2>

    <a :href="link">点击跳转到百度</a>

    <h2>{{fullName}}</h2>

    <button @click="count()" value="点击按钮+1">+{{num}}</button>
    <button @click="countTen(10, $event)" value="点击按钮+10">+{{num}}</button>

    <div>
      <div v-if="grade>=90">优秀</div>
      <div v-else-if="grade>=80">良好</div>
      <div v-else-if="grade>=60">及格</div>
      <div v-else="grade<60">不及格</div>
    </div>
  </div>

</template>

<script>
import SmartInput from "@/components/smartInput";
export default {
  name: 'App',
  data(){
    return{
      k1: '<div style="color: red;">这是一段文字</div>',
      link: 'www.baidu.com',
      value: "我是你爹",
      firstName: 'Robby',
      lastName: 'Jsebabytes',
      num: 1,
      grade: 80
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

image-20220630203327429

v-for

当我们有一 组数据需要进行渲染时，我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环，格式如下: item in items 的形式。

如果在遍历的过程中不需要使用索引值？

语法格式：v-for="(item ,index) in datas" ，依次从datas中取出item，并且在元素的内容中，可以使用Mustache语法，来使用item。

如果在遍历的过程中，需要拿到元索在数组中的索引值呢?

语法格式：v-for=(item, index) in items，其中的index就代表了取出的item在原数组的索弓|值。

案例

image-20220630204612025

Test.vue

<template>
  <div>
    <table border="1" align="center" style="width: 1000px;">
      <thead>
      <th></th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
      </thead>
      <tbody>
      <tr v-for="(item ,index) in datas" :key="index">
        <td>{{index+1}}</td>
        <td>《{{item.title}}》</td>
        <td>{{item.date}}</td>
        <td>￥{{item.money}}</td>
        <td>
          <button @click="down(index)" :disabled="item.count<=1">-</button>

          {{item.count}}

          <button @click="inser(index)">+</button>
        </td>
        <td>
          <button @click="del(index)">删除</button>
        </td>
      </tr>
      </tbody>
      <div>
        <span>总计：</span>
        <span>{{total}}</span>
      </div>
    </table>
  </div>
</template>

<script>
import SmartInput from '@/components/smartInput'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Test',
  components: { SmartInput },
  data () {
    return {
      value: 0,
      datas: [
        {
          title: '算法导论',
          date: '2006-09',
          money: 80.00,
          count: 1
        },
        {
          title: '数据库原理',
          date: '2028-09',
          money: 100.00,
          count: 1
        },
        {
          title: 'JAVA基础',
          date: '2006-09',
          money: 130.00,
          count: 1
        },
        {
          title: 'Py从入门到入土',
          date: '2006-09',
          money: 80.00,
          count: 1
        }
      ]
    }
  },
  methods: {
    inser(num) {
      this.datas[num].count++
    },
    down(num) {
      if (this.datas[num].count <= 1) this.datas[num].count = 1
      else this.datas[num].count--
    },
    del (index) {
      this.datas.splice(index, 1)
    }
  },
  computed: {
    total() {
      let sum = 0
      for (let i = 0; i < this.datas.length; i++) {
        // eslint-disable-next-line no-unused-vars
        sum += this.datas[i].count * this.datas[i].money
      }
      return sum
    }
  }
}
</script>

<style scoped>
th{
  height: 30px;
}
td {
  height: 40px;
}
</style>

App.vue

<template>
  <div class="app">
    <Test/>
  </div>
</template>

<script>
// @ is an alias to /src
import Test from '@/components/Test'

export default {
  name: 'App',
  components: {
    Test
  }
}
</script>

image-20220630204908915

父子通信

父给子通信

App.vue

<template>
  <div id="app">
    <input type="text" v-model="value">

    <div>
      {{value}}
    </div>
    <SmartInput :smart="value"/>
  </div>
</template>

<script>
import SmartInput from "@/components/smartInput";

export default {
  name: 'App',
  components: {
    SmartInput
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

smartInput.vue

<template>
  <input type="text" v-model.lazy="smart">
</template>

<script>
export default {
  name: "smartInput",
  props: ["smart"]
}
</script>

<style scoped>

</style>

image-20220630180128784

子给父通信

App.vue

<template>
  <div id="app">
    <div>
      <SmartInput @child-event="parentEvent"/>
    </div>
  </div>

</template>

<script>
import SmartInput from "@/components/smartInput";
export default {
  name: 'App',
  data(){
    return{
      value: "我是你爹"
    }
  },
  components: {
    SmartInput
  },
  methods: {
    parentEvent(data) {
      console.log(data)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

smartInput.vue

<template>
  <div>
    <div>
      <button @click="emitToparent">这是子组件的按钮，将值传递给父组件</button>
    </div>
  </div>

</template>

<script>
export default {
  name: "smartInput",
  methods: {
    emitToparent() {
      this.$emit('child-event','子组件向父组件传递的内容')
    }
  }
}
</script>

<style scoped>

</style>

image-20220630192457722

❤️‍欢迎订阅❤️‍

厂长写博客目的初衷很简单，希望大家在学习的过程中少走弯路，多学一些东西，对自己有帮助的留下你的赞赞👍或者关注➕都是对我最大的支持，你的关注和点赞给厂长每天更文的动力。

对文章其中一部分不理解，都可以评论区回复我，我们来一起讨论，共同学习，一起进步！

avatar
文章
阅读
粉丝