Vue后端必学

最新推荐文章于 2024-08-17 11:52:42 发布

临江仙.刺客

最新推荐文章于 2024-08-17 11:52:42 发布

阅读量1.2k

点赞数

分类专栏：笔记文章标签： vue.js html5 html

临江仙.编程笔记

本文链接：https://blog.csdn.net/weixin_45450412/article/details/120753927

版权

这篇博客详细介绍了Vue.js的基本语法，包括模板语法、条件渲染、列表渲染、事件处理、表单输入绑定，以及深入探讨了组件、路由、Vuex等高级特性。讲解了如何创建和复用组件，使用Axios进行网络请求，以及如何处理路由的多种场景。此外，还涵盖了VueX的状态管理和Swiper组件的使用，以及Element UI的集成。

摘要由CSDN通过智能技术生成

VUE

基本语法

模板语法

插值

在这里插入图片描述

<template>
  <div id="app">
    <div>
      <h3>模板语法</h3>
      <p>{
  { msg }}</p>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      msg:"这是一个模板语法"
    }
  },
  components: {
    
  }
}
</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>

在这里插入图片描述

原始HTML

如果还是按照之前的插值方法，HTML标签会被当成字符串解析

在这里插入图片描述

使用v-html属性h3标签会被解析成HTML标签

在这里插入图片描述

属性

通过v-bind将属性变成动态，所有在元素上的属性都可以这样绑定

在这里插入图片描述

class=active

在这里插入图片描述

将active变成空字符串

在这里插入图片描述

{ { }}中只能存在单行/个表达式，三目运算符可以但是if，else不可以

在这里插入图片描述

v-bind 可以缩写成：

在这里插入图片描述

缩写

在这里插入图片描述

效果一致

| 在这里插入图片描述

条件渲染

flag为false值消失，为true则显示

在这里插入图片描述

通过v-if和v-else进行判断，flag的值决定最终取值，0也表示false，非0表示true

在这里插入图片描述

当flag为true时一组都显示

在这里插入图片描述

虽然都显示了但是会多一层div

在这里插入图片描述

将div标签换成template标签

在这里插入图片描述

这样会少一层div都是同级的div

在这里插入图片描述

v-show 控制是否显示

在这里插入图片描述

若是false则不显示

在这里插入图片描述

当flag为false时不显示，display：none表示，基于元素的显示与隐藏，v-if是基于元素的移除和添加

在这里插入图片描述

列表渲染

v-for将一组数据渲染成一个个item的形式

在这里插入图片描述

上面报错是因为每个列表都要有一个唯一的索引，添加索引之后就不报错了

在这里插入图片描述

item中包含item和index（下标）

在这里插入图片描述

很多时候会用下标当索引，下标也是唯一的

在这里插入图片描述

事件处理

methods在data同级下，用于承载事件函数

在这里插入图片描述

点击按钮打印语句

在这里插入图片描述

取反操作，按钮点一下显示，再点一下不显示

在这里插入图片描述

<template>
  <div id="app">
    <div>
      <h3>模板语法</h3>
      <p>{
  { msg }}</p>
      <div v-html="price"></div>
      <div :class="active">hello</div>
      <p>{
  { count * 2}}</p>
    </div>

    <div>
      <h3>条件渲染</h3>
      <p v-if="flag">临江仙</p>
      <p v-else>刺客</p>
      <template v-if="flag">
        <p>1</p>
        <p>2</p>
        <p>3</p>
      </template>
      <div v-show="flag">hello SHOW</div>
    </div>

    <div>
      <h3>列表渲染</h3>
      <ul>
        <li v-for="(item,index) in result" :key="index">{
  { item.text }}</li>
      </ul>
    </div>

    <div>
      <h3>事件处理</h3>
      <p v-if="flags">我是新人请多关照</p>
      <button v-on:click="clickHandle">按钮</button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      msg:"这是一个模板语法",
      price:"<h3>300</h3>",
      active:'active',
      count:1,
      flag:false,
      result:[
        {
          id:"1001",
          text:"东京的水"
        },
        {
          id:"1002",
          text:"印度的疫情"
        },
        {
          id:"1003",
          text:"中国的特斯拉"
        }
      ] ,
      flags:false
    }
  },
  methods:{
    clickHandle(){
      //console.log("月落乌啼霜满天");
      this.flags=!this.flags
    }
  },
  components: {
    
  }
}
</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>

在这里插入图片描述

v-on可以缩写成 @

在这里插入图片描述

事件传递参数

默认不给函数传参也会有数据Event

在这里插入图片描述

传参，实现点击文本打印文本的效果

在这里插入图片描述

如果在传递参数的同时还想获得event对象这样写

在这里插入图片描述

<template>
  <div id="app">
    <div>
      <h3>模板语法</h3>
      <p>{
  { msg }}</p>
      <div v-html="price"></div>
      <div :class="active">hello</div>
      <p>{
  { count * 2}}</p>
    </div>

    <div>
      <h3>条件渲染</h3>
      <p v-if="flag">临江仙</p>
      <p v-else>刺客</p>
      <template v-if="flag">
        <p>1</p>
        <p>2</p>
        <p>3</p>
      </template>
      <div v-show="flag">hello SHOW</div>
    </div>

    <div>
      <h3>列表渲染</h3>
      <ul>
        <li v-for="(item,index) in result" :key="index">{
  { item.text }}</li>
      </ul>
    </div>

    <div>
      <h3>事件处理</h3>
      <p v-if="flags">我是新人请多关照</p>
      <button @click="clickHandle">按钮</button>
      <ul>
        <li @click="getMessageHandle(item.text,$event)" v-for="(item,index) in result" :key="index">{
  { item.text }}</li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      msg:"这是一个模板语法",
      price:"<h3>300</h3>",
      active:'active',
      count:1,
      flag:false,
      result:[
        {
          id:"1001",
          text:"东京的水"
        },
        {
          id:"1002",
          text:"印度的疫情"
        },
        {
          id:"1003",
          text:"中国的特斯拉"
        }
      ] ,
      flags:false
    }
  },
  methods:{
    clickHandle(){
      //console.log("月落乌啼霜满天");
      this.flags=!this.flags
    },
    getMessageHandle(data,e){
      console.log(data,e);
    }
  },
  components: {
    
  }
}
</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>

修饰符

在这里插入图片描述

现在点击这个按钮会跳转

在这里插入图片描述

现在希望可以点击这个事件但是不跳转，这样写

在这里插入图片描述

可以点击触发事件并不跳转网页

在这里插入图片描述

事件修饰符

在这里插入图片描述

数组更新检测

在这里插入图片描述

点击三次添加数据

在这里插入图片描述

有些方法是不能用的

在这里插入图片描述

所有不变更原始数组的都不能用，所有变更原始数组的都可以用

在这里插入图片描述

变更原始数组就可以用了

在这里插入图片描述

添加更多分组的数据

在这里插入图片描述

表单的输入绑定

在这里插入图片描述

使用 v-model

在这里插入图片描述

直接在上面实时读取文本框里面的内容

在这里插入图片描述

点击获取按钮在控制台打印值

在这里插入图片描述

v-model.lazy 回车或失去焦点才能获得输入框里面的内容

在这里插入图片描述

计算属性VS侦听器

在这里插入图片描述

效果一致都是翻转字符串

在这里插入图片描述

三种方法实现字符串翻转，最后一种是调用函数

在这里插入图片描述

以为有缓存所以在数据不发生变化时直接拿来用，当数据发生变化才重新求值，方法是每一次都在重新求值，比较消耗性能这就是差异

在这里插入图片描述

侦听器

在这里插入图片描述

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>

在这里插入图片描述