初识Vue框架--基础知识

最新推荐文章于 2024-09-25 00:49:17 发布

Harry-iu

最新推荐文章于 2024-09-25 00:49:17 发布

阅读量275

点赞数

分类专栏： # Vue 文章标签： vue js html

本文链接：https://blog.csdn.net/www1577791638/article/details/119417389

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

来源博客：【Harryの心阁】

认识Vue

渐进式框架
Core+Vue-router+Vuex 全家桶
特点：

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

初识Vue

let app = new Vue({
  el: '#app', // 挂载要管理的元素
  data: { // 定义数据
    message: '你好，世界'
  }
})

简单计数器

<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <button @click="counter++">+</button>
  <button @click="counter--">-</button>
</div>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      counter: 0
    }
  })
</script>

<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <!-- <button @click="counter++">+</button>
    <button @click="counter--">-</button> -->
  <button v-on:click="addNum">+</button>
  <button v-on:click="subNum">-</button>
</div>
<script src="./js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    // mushache语法
    data: {
      counter: 0
    },
    methods: {
      addNum: function() {
        this.counter++;
      },
      subNum: function() {
        this.counter--;
      }
    }
  })
</script>

事件指令

v-once

只会在第一次的时候展示，只渲染一次
没有表达式

v-html和v-text

相当于innerHTML
相当于innerText 都会将标签中的内容覆盖

v-pre

原文输出不进行解析

v-bind

动态绑定class 使用v-bind:class或者:class
class 里面可以写数组，对象，方法methods

计算属性的setter和getter

计算属性一般是没有set方法,只读属性
使用计算属性中的set方法必须设置参数

v-on

可以使用@ 代替v-on:
参数不需要额外的参数小括号可以省略
$event对象获取浏览器参数

修饰词

修饰符.stop阻止事件冒泡
阻止表单的默认提交事件.prevent
监听键盘的事件@keyup 监听键盘回车事件.enter
.once只能执行一次
.navice 监听组件的事件

v-if

多个元素通过条件判断展示或者隐藏某个元素. 或者多个元素
进行两个视图之间的切换

条件渲染的问题

在渲染DOM时，会复用原来的DOM元素
使用key标识会创建新的DOM元素

v-show

元素隐藏保留元素
切换频率高时使用v-show

key的作用

为了更高效的更新渲染虚拟DOM
diff算法

响应式问题

可以做到响应式:push在数组中追加元素; pop()删除数组中的最后一个元素, shift()删除数组中的第一个元素 unshift() 在数组中最前面追加元素; splice()删除元素/插入元素/替换元素(关键在第二个参数); sort()排序; reverse()进行反转; Vue.set(修改的对象, 索引值, 要修改的元素)
通过索引值修改数组中的元素无法进行页面渲染
filters filters不会修改数据, 只是改变用户看到的输出(效果)

购物车案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书购物车</title>
</head>
<style>
  body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .table_warp {
    padding: 20px;
  }

  table {
    border: 1px solid #ccc;
    border-right: 0;
    border-bottom: 0;
    border-spacing: 0;
  }

  thead {
    background-color: rgb(246, 246, 246);
  }

  td,
  th {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }

  button {
    margin: 0 5px;
  }
</style>

<body>
  <div class="table_warp" id="app">
    <h2>图书购物车</h2>
    <div v-if="bookList.length">
      <table>
        <thead>
          <th>
          <td v-for="(item,index) in th_title">{{item}}</td>
          </th>
        </thead>
        <tbody>
          <tr v-for="(item,index) in bookList">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.datePublish}}</td>
            <td>{{item.price*item.puNum| getPrice}}</td>
            <td><button @click="item.puNum>1?item.puNum--:false">-</button>{{item.puNum}}<button @click="item.puNum++">+</button></td>
            <td><button @click="removeBook(index)">移除</button></td>
          </tr>
        </tbody>
      </table>
      <div>总价格：{{totalPrice | getPrice}}</div>
    </div>
    <h3 v-else>购物车为空</h3>
  </div>

</body>
<script src="./js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      th_title: ['书籍名称', '出版日期', '价格', '购买数量', '操作'],
      bookList: [{
          id: 0,
          name: '《算法导论》',
          datePublish: '2006-9',
          price: 85.00,
          puNum: 2
        },
        {
          id: 1,
          name: 'UNIX编程艺术',
          datePublish: '2008-9',
          price: 35.00,
          puNum: 1
        },
        {
          id: 2,
          name: '《编程珠玑》',
          datePublish: '2006-9',
          price: 85.00,
          puNum: 1
        },
        {
          id: 3,
          name: '《算法导论》',
          datePublish: '2010-9',
          price: 100.00,
          puNum: 1
        },
        {
          id: 4,
          name: '《算法导论》',
          datePublish: '2026-9',
          price: 76.00,
          puNum: 1
        }
      ]
    },
    computed: {
      // 计算总价格
      totalPrice() {
        return this.bookList.reduce((v, i) => v + i.price * i.puNum, 0)
      }
    },
    methods: {
      // 移除书籍
      removeBook(index) {
        this.bookList.splice(index, 1)
      }
      // getPrice(price) {
      //   return '￥' + price.toFixed(2)
      // }
    },
    // 过滤器的使用
    filters: {
      getPrice(price) {
        return '￥' + price.toFixed(2)
      }
    }
  })
</script>

</html>

案例图

v-model

input双向绑定
radio使用时双向绑定如果绑定的时相同的数据, name可以省略
selected 多个选择加入属性multiple

<!-- <input type="text" v-model='message'>{{message}}  使用v-model实现双向绑定 -->
<input type="text" :value="message" @input="message = $event.target.value">{{message}}
<!--使用input事件-->