13.VUE

记忆永恒 2023-03-28 原文

VUE

笔记目录：(https://www.cnblogs.com/wenjie2000/p/16378441.html)

视频教程(P146~P148)

本篇是使用的vue2。虽然vue3.x已经出了，目前但对于后端人员来说了解一些vue2就足够了。不需要过于深入学习

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

Vue快速入门

首先要在IDEA中下载Vue.js插件（File>Setting>Plugins）。如果不下，后续在html中使用vue不但代码没有提示和高亮，还会报错（实际上能正常使用没有问题）。

新建HTML页面，引入vue.js文件（我这里用的是vue2.x。如果使用vue3.x则是引入的vue.global.js，语法上也有一些区别）
```

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```
当然，你也可以下载此文件并自行提供服务：
```
<script src="js/vue.js"></script>
```

在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
    el:"#app",
    data() {
        return {
            username: "",
        }
    }
});

如果使用的vue3，这里就是：

const {createApp} = Vue
createApp({
    data() {
        return {
            username: "",
        }
    }
    ......//内部除了el，其他没什么区别
}).mount('#app')

如果想用vue3，后面可以模仿着进行修改

编写视图

<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>

完整html页面

<!--输入框内容改变，{{username}}会跟着变。Model变动，让两个View变化产生联动-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                username: ""
            }
        }
    });
</script>
</body>
</html>

Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如: v-if，v-for...

常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	↑
v-else-if	↑
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind（为HTML标签绑定属性值，如设置href , css样式等）

<a v-bind:href="url">百度一下</a>
<!--其中“url”可以绑定为指定的值-->

<!--v-bind可以省略-->
<a :href="url">点一下</a>

完整页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a :href="url">点一下</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                username: "",
                url:"https://www.baidu.com/"
            }
        }
    });
</script>
</body>
</html>

v-model（在表单元素上创建双向数据绑定）

之前的快速入门案例就是使用的v-model实现数据绑定的
```
<input v-model="username">
```

v-on（为HTML标签绑定事件）

<input type="button" value="按钮" v-on:click="show()">

<!--简写-->
<input type="button" value="按钮" @click="show()">

new Vue({
    el:"#app",
    methods:{
        show(){
            alert("按钮被点了");
        }
    }
});

v-if（条件性的渲染某元素，判定为true时渲染,否则不渲染）

<!--注意下面的count也需要在data()中定义-->
<div v-if="count==3">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else>div3</div>
<input v-model="count">

v-show（根据条件展示某元素，区别在于切换的是display属性的值）
```
<div v-show="count==3">div4</div>
```

v-for（列表渲染，遍历容器的元素或者对象的属性）

<!--注意下面的addrs需要在data()中定义,例如addrs: ["北京", "上海", "天津"],-->
<div v-for="addr in addrs">{{addr}}</div>

加索引

<!--i表示索引，从零开始-->
<div v-for="(addr,i) in addrs">{{i + 1}}--{{addr}}</div>

Vue生命周期

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

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

实际开发基本上只会遇到mounted，其他的可以需要时再学

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

发送异步请求，加载数据

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

案例

查询所有品牌

直接在上一节的案例的基础上修改html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1" id="brandTable">
        <tr align="center">
            <td>序号</td>
            <td>品牌名称</td>
            <td>企业名称</td>
            <td>排序</td>
            <td>品牌介绍</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
        <!--使用v-for遍历tr-->
        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i+1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.status}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                brands:[],
            }
        },
        mounted() {
            // 页面加载完后，发送异步请求，查询数据
            var _this=this;//如果直接在axios中的.then(function(){})中使用this，this默认会指向window对象，不能指向Vue的对象,所以需要变量_this进行传递
            axios({
                method: "get",
                url: "http://localhost:8080/login-web/SelectAllServlet2",
            }).then(function (response) {
                _this.brands=response.data;
            })
        },
    });
</script>
</body>
</html>

新增品牌

新增品牌的页面也可以学着手动修改。不难，这里我就不给结果了

有关13.VUE的更多相关文章

ruby - 安装libv8(3.11.8.13)出错，Bundler无法继续 - 2
运行bundleinstall后出现此错误:Gem::Package::FormatError:nometadatafoundin/Users/jeanosorio/.rvm/gems/ruby-1.9.3-p286/cache/libv8-3.11.8.13-x86_64-darwin-12.gemAnerroroccurredwhileinstallinglibv8(3.11.8.13),andBundlercannotcontinue.Makesurethat`geminstalllibv8-v'3.11.8.13'`succeedsbeforebundling.我试试gemin
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ruby-on-rails - gem install rmagick -v 2.13.1 错误 Failed to build gem native extension on Mac OS 10.9.1 - 2
我已经通过提供MagickWand.h的路径尝试了一切，我安装了命令工具。谁能帮帮我？$geminstallrmagick-v2.13.1Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingrmagick:ERROR:Failedtobuildgemnativeextension./Users/ghazanfarali/.rvm/rubies/ruby-1.8.7-p357/bin/rubyextconf.rbcheckingforRubyversion>=1.8.5...yescheckingfor/
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
ruby-on-rails - Heroku 错误 H13 - 2
自从我将我的应用程序部署到heroku以来，在过去的几天里，我一直在断断续续地收到这个错误。它发生在我开始使用unicorn作为服务器之前和之后。有时我可以通过使用herokurunrakedb:migrate然后herokurestart让它恢复运行，但这只修复了几个小时，它又坏了。至于网页，它说“应用程序错误”。日志不是很有用，但每次发生此错误时都会显示以下内容:[2014-10-27T21:13:31.675956#2]ERROR--:worker=1PID:8timeout(16s>15s),killing[2014-10-27T21:13:31.731646#14]INFO-
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图：这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
vue3.0 + vite2.0+如何兼容低版本浏览器 - 2
这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：
ruby - 将 OSX 更新到 10.13 (macOS High Sierra) 后不编译 SCSS - 2
考拉版本:2.2.0Errormessage:/scss/styles.scss/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/2.3.0/rubygems/dependency.rb:319:into_specs':Couldnotfind'sass'(>=0)among15totalgem(s)(Gem::LoadError)Checkedin'GEM_PATH=/Users/monstercritic/.gem/ruby/2.3.0:/Library/Ruby/Gems/2.3.0:/Syst
ruby-on-rails - 无法在 Ubuntu 13.04 上安装 rmagick gem - 2
当我尝试安装rmagic时:geminstallrmagic它给出了错误:Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingrmagick:ERROR:Failedtobuildgemnativeextension./home/biske/.rbenv/versions/2.0.0-p247/bin/rubyextconf.rbcheckingforRubyversion>=1.8.5...yescheckingforgcc...yescheckingforMagick-config...yesche
ruby-on-rails - Rails 3.2.13 与 Rails 4.0.1 - 改变了吗？方法变了？ - 2
我最近注意到ActiveRecord对象上的方法changed?在Rails3.2.13和Rails4.0.1之间发生了变化。问题在于连接到数据库中整数字段的字段。假设我的模型Model带有number整数字段:#Rails3.2.13m=Model.lastm.number#=>5m.number='5hello'm.number#=>5m.number_changed?#=>truem.changed?#=>truem.changes#=>{:number=>[5,5]}#Rails4.0.1m=Model.lastm.number#=>5m.number='5hello'm.nu