10_Vue

coo1heisenberg2024-03-03 8:29

文章目录

Vue

概念 ：
Vue.js是一个渐进式框架（类似于堆积木）

  • 渐进式：从核心到完备的全家桶
  • 增量：从少到多，从一页到多页，从简单到复杂
  • 单文件组件： 一个文件描述一个组件
  • 单页应用：经过打包生成一个单页的html文件和一些js文件

Vue的编程思想：

  1. 点击按钮，触发vue的方法
  2. 在vue的方法里面，对数据进行修改
  3. 修改完之后，数据会自己显示到页面上去

快速入门

  1. 创建一个html页面

  2. 导包，需要注意包一定要在正确的位置，一定要有这个js文件

    • 相对路径引入。<script src="./js/vue.js"></script>
    • 外部路径引入。<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  3. 创建一个div，并在div块上写id = app（id选择器的原理）

  4. 创建vue对象，会首先找el属性，去html上找一个id是app的元素

    • 如果有，那么这个html块上的元素，都会按照vue语法重新解析

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src ="vue.js"></script>
</head>
<body>

<div id="app">
    {{msg}}
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            msg: "hello vue"
        }
    })
</script>

</body>
</html>

说明：

  • 首先引入js文件
    • 这个是引入Vue官方给我们写得一些方法，我们才能使用它的特性，与引包类似
  • div上写得 id=app,固定写法 。与new Vue({})中el属性对应。 是仿照的id选择器的写法
    • new Vue： 创建了一个vue对象
      • 一个Vue对象一旦创建, 会立即检测自己的el属性
      • 根据自己的el属性, 到dom树上找到对应结点 (根据id )，也就是发现el = "#app"
      • 就会去页面上找，找一个块的id是app
      • 把这个块上的东西，按照vue的语法重新解析
  • 当我们使用了 new Vue({el:"#app"})的写法，就代表：vue块会替换掉这个div(id=app的)，并进行重新渲染
    • 重新按照vue的语法来进行解析
  • div内部，使用了 {``{message}}。这是一个插值表达式，我们先这样理解，它可以使用变量，使用来自vue对象中定义的变量

Vue的指令

Vue的插值表达式

  1. 可以用于插入文本
    • {``{msg}}
      • 会去 vue对象中去寻找这个变量。vue对象的data属性, 是vue对象专门用来自定义数据的地方
  2. js表达式（js表达式是有一个返回值的）
  3. 不可以插入js语句

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>

<div id="root">
    {{msg}}
    <!--msg逆序-->
    {{msg.split("").reverse().toString()}}

    {{flag ? "Yes": "No"}}

    <!--     {{var i = 10}}-->
    <!-- 注意：在js中，只能写表达式，不能写一些语句（逻辑分支语句）-->
</div>

<script>
    new Vue({
        el:"#root",
        data : {
            msg: "zhangsan" ,
            flag: false
        }
    })
</script>

</body>
</html>

V指令

v-bind（单向绑定）
  • v-bind相当于告诉了vue框架，后面的东西来自vue的data框架
  • v-bind主要是在vue的标签上面，去使用vue里面的变量

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="imgTest">
    <img src="img/1111.png">
    <br>

    <img v-bind:src="url">
    <!--1. 写了v-bind其实就是告诉了vue，后面的东西来自vue
        2. src就是这个标签的属性名
        3. url就是来自vue里面的data-->
</div>


<script>
    new Vue({
        el:"#imgTest",
        data: {
            url: "img/1111.png"
        }
    })
</script>

</body>
</html>
v-model（双向绑定）
  • 可以把一个vue对象中的数据，通过v-model双向绑定，关联到对应html代码的表单元素的value上，让 两者相互影响，相互改变
  • 用于存储表单里面的数据的。
  • 如果data里面只有一个变量的时候，可以直接写v-model = "vue里面的变量"

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>

<div id="root">
    <input v-model:value="msg">

    {{msg}}


    <br>

    <select v-model="test">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <input v-model:value="test">
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            msg:"vue",
            test:"2"
        }

    })
</script>

</body>
</html>
v-on（事件监听）

监听一个事件, 把这个事件触发到vue对象中

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>

<div id="root">

    {{msg}}

    <br>

    <button v-on:click="changedivVue">Vue的button</button>

</div>

<button onclick="changediv()">button</button>
<!-- 页面上一个按钮，点了之后变成zhangsan-->

<!-- 用vue实现-->

<script>
    new Vue({
        el: "#root",
        data: {
            msg: "this is msg"
        },
        methods: {
            changedivVue: function () {
                this.msg = "zhangsan";
            }
        }
    })

    /* 传统的实现方法*/
    function changediv() {
        document.getElementById("root").innerText = "zhangsan";
    }
</script>

</body>
</html>
v-for（循环）

循环渲染/遍历一份数组

注意事项：

  • 注意1： v-for用在那个html标签上，他就会根据for遍历的数据量渲染出对应数量个html标签

  • 注意2： 语法上，我们要求每一个被v-for所渲染出的标签， 都应该有一个唯一的不变的key属性，用来表示这个被渲染出的标签

    • 原因是：给了key之后，我们对元素操作后，有一些没有改变的东西，不会重新渲染，比较省时间

  • 注意3：使用v-for遍历的时候可以用in ， 也可以用 of

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" 
xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>

<div id="root">
    <!-- v-for = "item in list"-->
    <!-- 在其他地方，你就可以用到item-->
    <div v-for="item in list">{{item}}</div>

    <!-- 语法要求：我们必须要给它传一个key，key是唯一的，不可变的-->

    <ol>
        <li v-for="item in list">{{item}}</li>

    </ol>

    <ul>
        <!-- v-for可以拿到下标，第一个写的是元素，第二个写的是下标-->
        <!-- 只和位置有关-->
        <li v-for="(aaa,bbb) in list" v-on:click="deleteNum(bbb)" 
        v-bind:key="bbb">{{aaa}} ---- {{bbb}}</li>
    </ul>

    <!-- v-for 里面有多少元素，那么就会生成多少个标签-->
</div>

<script>
    new Vue({
        el: "#root",
        data:{
            list:["zhangsan", "lisi", "wangwu"]
        },

        methods:{
            deleteNum: function (index){
                this.list.splice(index,1) // 第一个传下标，第二个传删除的个数
            }
        }
    })
</script>

</body>
</html>
v-text、v-html
  • v-text, v-html 等价于innerText和innerHTML
  • v-text、v-html都是用来向某个标签内部插入内容
  • 两者的区别在于：
    • 和innerText和innerHTML一样

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>

<div id="root">

    <div>div1</div>

    <div v-text="dataTest">div1</div>
    <!-- 其实就是innerText使得div1指向dataTest-->

    <div v-text="dataDiff">div2</div>

    <div v-html="dataDiff">div2</div>

</div>


<script>
    new Vue({
        el: "#root",

        data: {
            dataTest: "zhangsan",
            dataDiff: "<b>helloworld<b>"
        }
    })
</script>

</body>
</html>


div1
zhangsan
<b>helloworld<b>
helloworld(粗体)
v-show（显示/隐藏）
  • 根据布尔值隐藏和显示某些内容
  • 只是控制是不是显示，给它加上了一个display属性

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src ="vue.js"></script>
</head>
<body>

<div id="app">
    <div v-show="flagTrue">这是divTrue</div>
    <div v-show="flagFalse">这是divFalse</div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            msg: "hello vue",
            flagTrue : true,
            flagFalse: false
        }
    })
</script>

</body>
</html>


这是divTrue
v-if（分支语句）
  • V-if
  • V-else
  • V-else-if

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>
<div id="root">

    <!--  v-show只是显示， v-if 如果为假，结点都不会挂-->
    <!-- 只会显示一个分支-->
    <div v-if="1==2">
        v-if
    </div>
    <div v-else-if="bool1">
        v-else-if1
    </div>
    <div v-else-if="bool2">
        v-else-if2
    </div>
    <div v-else>
        v-else
    </div>

</div>
<script>

    new Vue({
        el: "#root",
        data: {
            bool1: true,
            bool2: false
        }
    })

</script>

</body>
</html>


v-else-if1
v-once（只加载一次）

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src ="vue.js"></script>
</head>
<body>

<div id="app">
    <div>
        {{msg}}
    </div>

    <div v-once>
        {{msg}}
    </div>

    <br>

    <input v-model="msg">

</div>


<script>
    new Vue({
        el: "#app",
        data:{
            msg: "hello vue"
        }
    })
</script>

</body>
</html>


只能修改一次，再次修改不起作用
helloworld！！
hello vue

helloworld！！
v-pre（阻止预编译）

  • 阻止预编译。让它不作为vue被解析。

  • 里面写得vue语法，会当做普通的html语法，比如一些插值表达式，v指令

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>
<div id="root">

    <div v-pre>
        {{aaa}}
    </div>
    <div>
        {{msg}}
    </div>

</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "zs"
        }
    })
</script>
</body>
</html>


{{aaa}}
zs
v-clock（延迟加载）
  • 可以设置一个单独的样式，比如不显示，当vue对象生成后，会将页面上所有的v-cloak去掉，这样就会让显示效果变为正常。
  • 作用：当vue对象创建出来的时候，会去检测自己块里所有的 v-cloak 属性，检测到有这个属性，vue会帮你删除掉这个属性，一般会在延迟加载的时候用到

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>

    <style>
        /* v-cloak是属性选择器*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>


<!--V-cloak 延迟加载-->
<div id="root">

    <div v-cloak>
        {{msg}}
    </div>

</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "helloworld"
        }
    })

</script>

</body>
</html>

模块（template）

  • template中，可以使用vue的所有语法，v指令，插值表达式
  • 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素 。挂载元素的内容都将被忽略。
    • 出现template时，只会显示template中的内容
  • template就是和data平齐的一个东西
  • 当一个vue对象里面，有了一个template这个字段，就会按照template里面的字段来显示

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>

<div id="root">
    {{msg}}
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            msg: "hello template",
            data1: "hello world"
        },

        // template就是和data平齐的一个东西
        // 当一个vue对象里面，有了一个template这个字段，就会按照template里面的字段来显示
        template:"<div>{{msg}} <span v-on:click='alertTest'>这是字</span></div>",
        methods: {
            alertTest:function () {
                alert("warning")
            }
        }
    })
</script>

</body>
</html>

组件（component）

  • 一个vue对象就是一个vue组件
  • template出现地方，就会有template里面的内容去替换掉原来的东西
  • 组件的目的：
    • 可以仿照div嵌套构建页面的思想, 让大vue组件/对象持有小vue对象, 小vue对象持有管控更小区域的vue对象这种思路, 构建一个大的页面。

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>

    <style>
        .son {
            width: 2000px;
            height: 200px;
            background-color: yellow;

        }

        .child {
            width: 1000px;
            height: 500px;
            background-color: blue;

            margin: 0 auto;
        }

        .child_left{
            width: 800px;
            height: 2000px;
            background-color: green;

            float: left;
        }

        .child_right{
            width: 400px;
            height: 1000px;
            background-color: green;

            float: right;
        }
    </style>
</head>
<body>


<div id="root">

</div>

<script>

    var child_left = {
        template: "<div class='child_left'>child_left</div>"
    }

    var child_right = {
        template: "<div class='child_right'>child_right</div>"
    }

    var son = {
        template: "<div class='son'>son</div>"
    }

    var child = {
        components: {
            CL: child_left,
            CR: child_right
        },

        template: "<div class='child'><CL></CL><CR></CR></div>"
    }


    new Vue({
        el: "#root",
        data: {},
        template: "<div>father<aaa></aaa><bbb></bbb></div>",
        components: {
            // 定义组件的格式为：
            // 别名：原对象名
            aaa: son,
            bbb: child
        }
    })
</script>

</body>
</html>

生命周期

概念： 一个Vue对象从创建到销毁的过程，就是vue的生命周期。

  • 与Java类似，Java对象从初始化，到被调用，到最终被销毁，这也是一个生命周期

生命周期相关的一些方法：

  • beforeCreate：在vue对象创建之前

  • created：在vue对象创建之后

  • beforeMount：挂载之前

  • mounted：挂载之后

  • beforeUpdate：更新前

  • updated：更新后

  • beforeDestroy：销毁前

  • destoryed：销毁后

eg：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    {{msg}}
    <input v-model="msg">
</div>
<script>

    var root = new Vue({
        el: "#root",
        data: {
            msg: "zs"
        },
        beforeCreate: function () {
            console.log("控制台打印:beforeCreate")
        },
        created: function () {
            console.log("控制台打印:created")
        },
        beforeMount: function () {
            //页面还未被渲染
            console.log(this.$el),
                console.log("控制台打印:beforeMount")
        },
        mounted: function () {
            //页面渲染完成
            console.log(this.$el),
                console.log("控制台打印：mounted")
        },
        beforeUpdate: function () {
            console.log("控制台打印：beforeUpdate")
        },
        updated: function () {
            console.log("控制台打印：updated")
        },
        beforeDestroy: function () {
            console.log("控制台打印：beforeDestroy")
        },
        destroyed: function () {
            console.log("控制台打印：destroyed")
        }
    })
</script>
</body>
</html>

生命周期一般用来做初始化数据来使用

创建和实现Vue项目

后端开发流程

  • 环境准备阶段

    • 安装jdk
      • 编译代码的工具
    • 安装idea
      • 提升编码效率的
    • 给idea安装插件
      • 特异化功能，需要插件

  • 通过idea创建java项目

  • 在这个项目中写代码(也要引用别人的代码)

    • 手动下jar包

      1. 麻烦
      2. 包冲突。比如两个包都要用到一个版本的junit。但是使用到的版本却不一致
      • 如何解决
        使用maven插件。 配置文件，只需要提供包名和版本，由maven帮我们下载，和管理包冲突

  • 编译打包, 给用户使用

前端开发流程

1.环境准备工作，不用重复进行。每台电脑只用进行一次

  • 安装node

    • 编译运行代码的环境，是一个浏览器的内核

      • 相当于 Java和JDK的关系。

    • js ---> 浏览器(node本身就是一个浏览器)

  • 安装node 自带 npm(包管理工具)

    • npm就是一个下载前端包的插件。

    • 只要告诉它你要下载什么包和版本，它会帮你下载

  • 安装cnpm： cnpm是npm服务器的镜像

java 复制代码 
// 使用npm去安装包
// -g 全局
// cnpm@6.0.0  包 + 版本。
// --registry=https://registry.npm.taobao.org 这条命令使用什么源。指定本次命令是从哪里下包
npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org

  • 安装 vue-cli

    • vue-cli（俗称：vue脚手架）: 是vue官方提供的、快速生成vue工程化项目的工具

    • 用来等一会帮我们构建一个前端服务器

    • 基于webpack

java 复制代码 
cnpm install -g @vue/cli 
cnpm install -g @vue/cli-init

  • 判断是否安装完成： vue -V

  • 安装webpack: 模块打包机

java 复制代码 
cnpm install -g webpack

上述步骤都属于环境配置, 不要重复进行；除非安装失败, 或者某个东西崩溃了

2.初始化项目

  • 通过vue-cli创建一个vue项目:
java 复制代码 
vue init webpack 项目名

eg：// vue init webpack vue1
    // 在当前目录下，安装一个叫做vue1 的项目

注意路径，不要带中文

选择的时候，不要使用npm去安装包

  • 安装依赖
    • 切换路径 ---> 到项目里面
    • 执行 cnpm install ---> 结束, 意味着项目创建完毕
  • 启动这个项目: 作为前端服务器
java 复制代码 
npm run dev
  1. 如何启动一个前端项目

node_modules里面是所有的依赖，文件太多太散，所以一般不建议大家拷贝的时候带上它，建议直接删掉，移动到指定目录后，再重新下载依赖。

  • 将前端目录放到一个文件夹，不要有中文
  • 进入前端文件夹，安装依赖

eg：

java 复制代码 
cd vue1
cnpm install
  • 启动项目
java 复制代码 
npm run dev

最重要的几个文件。

  • package.json
    • 依赖的文件
      • 依赖，启动的脚本
      • scripts脚本中是否有dev
  • config/index.js
    • port
  • main.js
    • 怎么由index.html最终展示出来里层App.vue文件的。

前后端分离的流程：

  1. 前端负责展示，后端负责数据处理
    • 前端需要商品的一些信息，比如名字、图片、价格，这些信息都是来自后端
  2. 点击下单按钮，其实就是前端给后端发送了一个请求，后端拿到这个请求之后进行处理

axios

是vue的一个插件, 可以在vue中， 写发起请求代码

安装步骤：

  1. 导包。必须要进入项目的主目录
    cnpm install axios --save

  2. 在main.js配置

    • 导入axios语法： 从node_modules
      import axios from "axios"
    • Vue.prototype： 等价于给整个项目中所有的vue对象配置一个属性： $axios
      Vue.prototype.$axios = axios

  3. 具体使用

如何进行界面美化

ElementUI

如何在Vue项目中使用

1.安装element-ui

java 复制代码 
// 使用淘宝的源头下载。
// --save 下载，并且将element-ui存储到package.json文件中
cnpm install element-ui --save

2.在main.js文件中定义

java 复制代码 
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.使用组件

java 复制代码 
<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

Ant Design Charts

eCharts

如何在vue项目中使用

1.在指定项目主目录，安装echarts

java 复制代码 
$ cnpm install echarts --save

2.在vue项目的main.js文件中定义

java 复制代码 
import * as echarts from 'echarts';

// Vue.prototype 等价于给整个项目中所有的vue对象配置一个属性 $echarts
Vue.prototype.$echarts = echarts

3.在vue页面使用

java 复制代码 
<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
  
  
// 生命周期钩子  
mounted() {
    this.drawLine();
},
// vue的函数
methods: {
    drawLine() {
      var chartDom = document.getElementById('main');
      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);
    }
}
相关推荐
冰淇淋烤布蕾9 分钟前
EasyExcel使用
java·开发语言·excel
拾荒的小海螺16 分钟前
JAVA：探索 EasyExcel 的技术指南
java·开发语言
Jakarta EE32 分钟前
正确使用primefaces的process和update
java·primefaces·jakarta ee
涔溪39 分钟前
Ecmascript（ES）标准
前端·elasticsearch·ecmascript
马剑威（威哥爱编程）40 分钟前
哇喔！20种单例模式的实现与变异总结
java·开发语言·单例模式
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
java—大象1 小时前
基于java+springboot+layui的流浪动物交流信息平台设计实现
java·开发语言·spring boot·layui·课程设计
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10文件或文件夹名称中有空格如何批量去除