VUE学习笔记

最新推荐文章于 2024-07-12 15:14:43 发布
最新推荐文章于 2024-07-12 15:14:43 发布
阅读量72 收藏
点赞数
分类专栏： java web 文章标签： vue.js 学习 笔记 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Camelia_Jilly/article/details/133102227
版权

VUE

概述

Vue是一套前端框架， 免除原生JavaScript中的DOM操作， 简化书写
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
官网: https://cn.vuejs.org

  • mvc思想：Model-View-Controller image-20230815092325943

    • 模型（Model）：模型代表应用程序的数据和业务逻辑。
      对应实体类和业务逻辑层
    • 视图（View）：视图负责展示模型的数据给用户，并呈现用户界面。
      对应HTML页面、JSP页面、前端模板等
    • 控制器（Controller）：控制器作为模型和视图之间的中介，处理用户的输入和操作。
      比如servlets和框架(如springmvc)的控制器

    数据流动方向固定：只能实现模型到视图的单项展示，数据通常是触发了控制器的动作后，从模型到视图，再经过控制器

  • mvvm(Model-View-ViewModel)：实现数据的双向绑定，将编程的关注点放在数据上 image-20230815092907342
    双向数据流：指的是数据的变化可以直接影响视图，同时视图的变化也可以直接影响数据。

开发流程

  1. 新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
  1. 在JS代码区域，创建Vue核心对象，进行数据绑定
new Vue({
        el: "#app",

        mounted(){
            //在页面渲染完毕后自动执行的方法，通常是发送异步请求，获取数据
            this.selectAll();
        },

        methods: {//定义 Vue 实例中的方法。可以访问和修改 data 中的数据
        },
        data() {
            //定义 Vue 实例的数据，在此声明的数据会被 Vue 自动响应式地绑定到视图上
            return {
        }
    })
  1. 编写视图
<div id="app">
  <input name="username" v-model="username"><!--v-model实现双向数据绑定-->
  <input name="email" v-model="user.email">
  {{ username }}<!--插值表达式-->
</div>

常用指令

指令作用
v-bind为HTML标签绑定属性值，如设置href，css样式等，v-bind可以省略
v-model在表单元素上创建双向数据绑定，
v-on为HTML标签绑定事件”
<input type="button" value="一个按钮" v-on:click="show()">
v-on:click(或@click)
v-if条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else否定条件的渲染某元素，与v-if连用
v-else-if条件渲染，与v-if和v-else连用，一般要在后面加一句<input v-model="count">
v-show根据条件展示某元素，切换的是display属性的值，和v-if渲染方式不一样
v-for列表渲染，遍历容器的元素或对象的属性
<div v-for="(addr,i) in addrs">
<!--表示索引，从0开始-->
{{i+1}}: {{addr}}<br>
</div>

生命周期

生命周期的八个阶段:每触发-个生命周期事件， 会自动执行-个生命周期方法(钩子)

状态阶段周期
beforeCreate创建前
created创建后
beforeMount载入前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

image-20230815103514813

mounted

挂载完成，Vue初始化成功，HTML页面渲染成功。

new Vue({
	el:"#app",
    mounted(){
    alert("yue挂载完毕，发送异步请求");
    }
});


<script>
    new Vue({
        el: "#app",
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            // 页面加载完成后，发送异步请求，查询数据
            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp) {
                _this.brands = resp.data;
            })
        }
    })
</script>

Element

一 套基于Vue的网站组件库，用于快速构建网页
组件:组成网页的部件，例如超链接、按钮、图片、表格等等~

使用

  1. 引入所需文件：
<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  1. 创建Vue核心对象：
<script>
new Vue({
  el: "#app"
});
</script>
  1. 复制官网上的Element组件代码。

布局

Layout布局

通过基础的24分栏，迅速简便地创建布局

image-20230815225500363

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

    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>

</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    <!--
        添加一行，8个格子  24/8 = 3
    -->


    <el-row>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

</div>



<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })

</script>

</body>
</html>
Container布局容器

用于布局的容器组件，方便快速搭建页面的基本结构

image-20230815225609819

container同上

组件

image-20230816110119798

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->

    <el-row>

        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
            >

        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>


    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>

            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                console.log(this.brand);
            },
            // 添加数据
            addBrand(){
                console.log(this.brand);
            },

            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }

        },
        data() {
            return {
                // 当前页码
                currentPage: 4,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,

                // 品牌模型数据
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id:"",
                    ordered:"",
                    description:""
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        }
    })

</script>

</body>
</html>

: ‘华为科技有限公司’,
ordered: ‘100’,
status: “1”
}, {
brandName: ‘华为’,
companyName: ‘华为科技有限公司’,
ordered: ‘100’,
status: “1”
}, {
brandName: ‘华为’,
companyName: ‘华为科技有限公司’,
ordered: ‘100’,
status: “1”
}]
}
}
})

```
秋原鹿鸣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue 学习笔记
weixin_43971312的博客
05-22 2180
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
vue学习笔记
weixin_42765975的博客
09-21 867
/1.想要vue工作必须new一个vue对象出来，容器依旧符合html模板规范，只是加入了一些vue的语法例如双括号{{}},//5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。//7.指令语法包括v-bind:,v-if:等等，他可以用于解析标签体内容，标签属性，标签事件等。
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1185
vue切换主题
vue解决页面放大图片模糊的问题
最新发布
m0_56104994的博客
07-12 187
解决页面放大，图片模糊的问题
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 744
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1353
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Vue的常见指令
m0_63624484的博客
07-09 565
它的作用就是我们可以动态的定义属性的值，比如常见的<img src = "1.jpg">我们如果想要修改图片就需要获取到DOM对象，然后再重新填充，但是如果使用v-bind，v-show作用和v-if一样，只是当它为true或者false都会生成DOM对象；style表示样式，同样我们也可以用vue绑定style，实现样式属性的动态生成。接下来，我们实现经常在网页上看见的多选项选择时，选到哪个，哪个就会高亮显示。所以说，vue主要是实现对数据的操作，而js是对DOM对象的操作。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 758
模糊搜索功能 每个网站都要用得到
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 476
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
vue3 路由跳转新页面并传递参数与获取参数
Anlittlecat的博客
07-10 306
parmas的形式传参需在路由处定义。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 194
通过sm4对文件进行加解密，用户输入密码
Vue.js学习笔记（五）抽奖组件封装——转盘抽奖
summer_gf的博客
07-11 370
动态配置转盘组件开发，只需要改动数据，就自动生成转盘，减少UI和前端的工作量。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值