vue个人笔记

最新推荐文章于 2024-09-10 14:15:01 发布

Bowen_Yang

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量125

点赞数

分类专栏：前端学习文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/qq_39627843/article/details/119487096

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

官方文档

https://cn.vuejs.org/v2/guide/list.html

视频教学参考：

最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili

插值操作（渲染表达式）

<div id="main">
  <span>{{message}}</span>
  <p>{{count * 2}}</p>  <!--数字x2-->
  <p>{{message}}---{{message2}}</p> <!--渲染两个变量-->

</div>

let vm = new Vue({
    el: "#main",
    data: {
      message: "yes2",
      message2:'second',
      count: 2,
      allowSee: false,
      todoList: [
        {'text': 'homework'},
        {'text': 'housework'},
        {'text': 'project'},
      ]
    }
);

v-once 静态值，渲染之后不会随值变化而界面上变化

v-html 解析html，

    data: {
      url: '<a href="xxx">baidu</a>'
     }

例如data里面有个url的变量，直接渲染是不能显示html格式的

需要这样写

<p v-html="url"></p>

不想{{}}被解析

<span>{{message}}</span>

用v-pre，这样浏览器就能原封不动显示{{message}}

<span v-pre>{{message}}</span>

绑定标签属性

v-bind:src
<img v-bind:src="url" alt="">

动态绑定class

<style>
.active{
    color:red;
}
</style>
<div v-bind:class="{ active: isActive }"></div>

data: {
  isActive: true,
  hasError: false
}

当data的isActive为true时，active这个class就会加在div上面，从而显示对应颜色

当有多个class要判断时，用这样的语法：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

class加三元表达式

<img class="test" :class="[isActive?activeClass:noneActiveClass]">
#这里需要在data里面有activeClass和noneActiveClass这两个变量
data: {
  isActive: false,
  activeClass: 'active',
  noneActiveClass: 'noneActive'
}

computed计算属性,功能也能够使用普通函数来替代，但计算属性会有缓存，多次取重复的值速度会更快

<p>total:{{totalPrice}}</p>

  let vm = new Vue({
    el: "#main",
    data: {
      priceList: [1, 2, 3, 4]
    },
    computed: {
      totalPrice() {
        let ans = 0
        // for (let i = 0; i < this.priceList.length; i++) {
        //   ans += this.priceList[i]
        // }
        for (let price of this.priceList){
          ans += price
        }
        return ans
      }
    }
  })

@click 阻止冒泡和阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
<div id="main">
  <div @click="divCick">
    <span>text</span>
    <button @click="buttonClick">click</button>
  </div>
</div>
</body>
<script>
  let vm = new Vue({
    el: "#main",
    data: {},
    methods: {
      divCick(){
        console.log('div click')
      },
      buttonClick(){
        console.log('button click')
      }
    },
    created: () => {
      console.log('created')
    },
    computed: {
      totalPrice() {
        let ans = 0
        // for (let i = 0; i < this.priceList.length; i++) {
        //   ans += this.priceList[i]
        // }
        for (let price of this.priceList) {
          ans += price
        }
        return ans
      }
    }
  })
</script>
</html>

使用@click.stop来阻止事件冒泡

<button @click.stop="buttonClick">click</button>

使用prevent来阻止默认事件

<button @click.prevent="buttonClick">click</button>

js高阶函数使用：

参考文章：

JS中几种常见的高阶函数 - 古兰精 - 博客园

使用reduce函数可以直接一步计算和，reduce传递两个参数，第一个参数是函数，第二个是初始值

let new_ans = this.shopList.reduce((previousVal, book) => {
          return previousVal + book.price * book.orderCount
        }, 0)

webpack基本使用：

首先webpack依赖node环境，需要先安装node

安装教程可参考链接：

WebPack的安装及使用_童一的博客-CSDN博客_webpack安装

然后使用npm install webpack进行安装

1.直接使用webpack命令，不添加其他配置文件

使用webpack <entry> [output]命令

例如，我现在有一个test.js文件，我想把它打包成另外一个js文件，

我们就使用webpack test.js bundle.js命令，这样就生成了一个bundle.js文件，这个bundle.js就直接可以被html引用然后调用

之所以需要打包，是因为js之间可能存在引用关系，webpack能够帮我们处理这种引用关系，我们只需要指定一个入口js文件，就能打包生成一个可执行的js文件

例如我有一个math.js

const pi = 3.14

module.exports={
  pi
}

然后test.js用到了math.js

const {pi} = require('./mathUtil')
console.log(pi);

如果我直接把这两个js引入到html中，是执行不了的，因为浏览器识别不了这样的语法。但是通过webpack就可以。webpack最后会将这些js文件装换为一个可执行的js文件，最后在html中引入这一个文件即可

2.通过配置文件使用webpack

需要一个配置文件，名字为webpack.config.js，然后指定好入口和出口文件，直接使用webpack命令就能打包了

module.exports={
    /*入口，请求某个文件*/
    entry:'./src/main.js',
    /*输出位置*/
    output:{
        filename:"./dist/bundle.js"
    },
};

路径的话，还有更优的写法：

const path= require('path')
module.exports={
  /*入口，请求某个文件*/
  entry:'./src/main.js',
  /*输出位置*/
  output:{
    path:path.join(__dirname,'dist'),
    filename:"bundle.js"
  },
};

npm使用：

查看某个包的版本号

npm view css-loader versions

npm view jquery versions

其他推荐链接：

vue插槽讲解：

一次性讲明白vue插槽slot-前端开发博客