Vue

Vue的基本介绍

简单来说，Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写html代码。例如下面就是DOM的部分操作：

document.getElementById(idName) ）；

学习了 VUE 后，这部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢？

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上；而要了解 MVVM 思想，必须先聊聊 MVC 思想，如下图就是 MVC 思想图解

黑马供图-MVC
MVC:只能实现模型到视图的单向展示

简单来说就是将模型中的数据通过html的方式，展示在前端页面中，当模型中的数据改变时，前端页面跟着改变。

黑马供图-MVVM
MVVM:可以实现模型到视图的双向展示

模型和视图可以通过VUE模型进行双向绑定。当模型数据变化时前端页面会随之变化，而在前端网页中，例如：表单数据变化时，模型数据也会随之改变。

IDEA中引入VUE的两种方式

方法1.下载插件

在这里插入图片描述
1.1 下载完后根据提示重启IDEA
1.2 在setting中找到Editor>File Types>Vue.js Template,然后点击加号，添加*.html，即.html认为vue可识别
在这里插入图片描述
1.3 创建***.html文件发现，vue代码块成功提示并高亮。但是凡是html文件的图标都变成的vue的文件的显示图标，但这个没有什么影响。此时编写VUE和插值表达式代码时都会系统提示。

方法2.更改File type

1.此方法不需要下载插件Vue.js，仅作VUE语法上的提示，编写插值表达式的时候系统不会提示，HTML图标不会受影响。和方法1 一样也是修改file types，不过是修改HTML，添加上*.vue，即HTML认为.vue可识别。
在这里插入图片描述
2.然后找到Editor>Inspections>HTML>Unknown HTML tag attribute，将原来内容删去，复制如下内容，添加新的标签库内容
在这里插入图片描述

@tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click.once,@change,@change.lazy,@change.number,@change.trim,v-model,v-for,v-text,v-html,v-if,v-else-if,v-else,v-pre,v-once,v-bind,scoped,@keyup.enter,:class,:style,v-show,:key,@keyup,@submit,@submit.prevent,@mouseenter,@mouseleave,@mouseout,@mouseover

*注意如果你尝试过第一种方式，那么这里你HTML应该会缺少.html，重新补上（这种情况下需要添加 .html 和 .vue）

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 v-model的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">点击一下</a>
    <a :href="url">点击一下</a>
    <input v-model="url">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com"
            }
        }
    });
</script>
</body>
</html>

通过浏览器打开上面页面，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据

运行：
在这里插入图片描述
关于vue的其他用法可上网搜索

引入vue.js文件和使用流程

  1. 新建 HTML 页面，引入 Vue.js文件

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

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

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

    创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

    • el ： 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
    • data ：用来定义数据模型
    • methods ：用来定义函数。这个我们在后面就会用到

  3. 编写视图

    <div id="app">
    <input name="username" v-model="username" >
    {{username}}
</div>

    {{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

VUE的声明周期

  1. 开始创建
  2. 初始化数据
  3. 编译模板
  4. 挂载Dom
  5. 渲染→更新→渲
  6. 卸载

我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。其中最重要的是mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。我们会在该方法中发送异步请求，加载数据。

# java # javascript # idea # intellij idea
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

口才教育：如何提升沟通技巧与表达能力

avatar ViewDesign
cover

C 嵌入式系统设计模式 28：通道模式

avatar ViewDesign

优雅的前端框架：iView - 强大、易用且美观

优雅的前端框架：iView - 强大、易用且美观项目地址:https://gitcode.com/gh_mirrors/iv/iview是一个基于 Vue.js 的高质量 UI 组件库，旨在为开发者提供简单、直观、高效的基础组件，帮助他们快速构建现代 Web 应用程序。此项目由 Alibaba IVWEB 团队维护，质量与更新稳定性有保障。技术分析Vue.js 基础：iView 充分利...

avatar ViewDesign