Java阶段三Day04

今天你学Java了吗

已于 2023-05-26 10:28:14 修改

阅读量615

点赞数

分类专栏： # 开发篇文章标签： java vue.js javascript

于 2023-05-24 10:55:28 首次发布

本文链接：https://blog.csdn.net/weixin_65777087/article/details/130842650

版权

开发篇专栏收录该内容

100 篇文章 0 订阅

订阅专栏

Java阶段三Day04

文章目录

Java阶段三Day04

Vue框架

Vue框架概述

Vue是一种流行的渐进式JavaScript框架，用于构建Web用户界面。它具有易学、轻量级、灵活性强、高效率等特点，并且可以与其他库和项目集成。是目前最流行的前端框架之一。
框架的两种用法：
- 多页面应用：在html页面中引入vue.js框架文件
- 单页面应用：通过脚手架的方式使用VUE框架

如何引入vue.js

从CDN服务器引入

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

把vue.js文件下载到本地后引入
```
<script src="js/vue.min.js"></script> 
```

Vue框架的HelloWorld

<body>
    <div>
        <!--插值，让此处的文本内容和info变量进行绑定-->
        {{info}}
    </div>
    <!--引入vue.js框架文件-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        //创建Vue对象 Vue对象相当于是MVVM设计模式中的VM视图模型
        let v = new Vue({
            el:"body>div"，//el=element 指定Vue框架的管理范围
            data:{ //在data里面定义和页面元素进行绑定的变量
                info:"HelloVue!"
            }
        })
    </script>
</body>

Vue框架执行原理

代码中new 的VUE对象就相当于是MVVM设计模式中的VM视图模型，此对象负责将页面中发生改变的元素和data里面的变量在内存中绑定，并且会不断监听变量值的改变，当检测到变量值发生改变时，会自动从内存中找到与之对应的元素，并且让元素的内容跟着发生改变

基本指令

文本相关指令

指令	介绍
{{变量}}	插值，让当前位置的文本内容和变量进行绑定
v-text=“变量”	让元素的文本内容和变量进行绑定
v-html=“变量”	让元素的标签内容和变量进行绑定

属性绑定和双向绑定

指令	介绍
属性名=“变量”	让元素的某个属性的值和变量进行绑定
v-model=“变量”	双向绑定，让控件的值和变量进行双向绑定，当需要获取控件的值的时候使用

注：所谓双向绑定，就是当变量的值发生改变时，与其绑定的控件内容会跟着发生改变，当用户操作控件内容时，对应的变量也会跟着发生改变

事件绑定

指令	介绍
@事件名=“方法”	给元素添加事件，需要将事件触发的方法声明在methods里面

v-for循环遍历指令

指令	介绍
v-for=“(变量，下标) in 数组”	循环遍历指令，遍历的同时会生成元素，当需要让页面的内容和数组进行绑定时使用

显示隐藏相关指令

指令	介绍
v-if=“变量”	让元素是否显示和变量进行绑定，true显示、false不显示（删除元素）
v-else	让元素的显示状态和 v-if 取反
v-show=“变量”	让元素是否显示和变量进行绑定，true显示、false不显示（隐藏元素）