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 全局
// [email protected]  包 + 版本。
// --registry=https://registry.npm.taobao.org 这条命令使用什么源。指定本次命令是从哪里下包
npm install -g [email protected] --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);
    }
}
相关推荐
从int开始10 分钟前
在过滤器中获取body中的json数据并且使得后续的controller层也能获取使用
java·filter
长勺12 分钟前
Java云原生到底是啥，有哪些技术
java·开发语言·云原生
前端小巷子13 分钟前
CSS渲染性能优化
前端·css·面试·性能优化
找不到、了32 分钟前
有关SOA和SpringCloud的区别
java·spring·spring cloud
等等54334 分钟前
Java EE初阶——初识多线程
java·开发语言·jvm
苦学编程的谢1 小时前
计算机是如何工作的
服务器·前端·javascript
星霜旅人1 小时前
Java并发编程
java
蓉妹妹1 小时前
React+Taro选择日期组件封装
前端·react.js·前端框架
风口上的吱吱鼠1 小时前
记录 ubuntu 安装中文语言出现 software database is broken
linux·服务器·前端
whltaoin1 小时前
前端弹性布局：用Flexbox构建现代网页的魔法指南
前端·弹性布局
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04数据分析实战 | K-means算法——蛋白质消费特征分析05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06西电B测-计算机网络综合实验(含验收问题)07Coze扣子平台完整体验和实践（附国内和国际版对比）08苍穹外卖面试总结09DeepSeek各版本说明与优缺点分析10【解决】Android Gradle Sync 报错 Could not read workspace metadata