VUE的引入以及基本使用

VUE的简单概述和基本使用方法

李NN

9874人浏览 · 2022-04-05 21:00:30

李NN · 2022-04-05 21:00:30 发布

Vue

Vue的基本介绍
IDEA中引入VUE的两种方式
VUE指令
引入vue.js文件和使用流程
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文件和使用流程

新建 HTML 页面，引入 Vue.js文件
```
<script src="js/vue.js"></script>
```
在JS代码区域，创建Vue核心对象，进行数据绑定
```
new Vue({
    el: "#app",
    data() {
        return {
            username: ""
        }
    }
});
```
创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
- el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
- data ：用来定义数据模型
- methods ：用来定义函数。这个我们在后面就会用到
编写视图
```
<div id="app">
    <input name="username" v-model="username" >
    {{username}}
</div>
```
{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

VUE的声明周期

开始创建
初始化数据
编译模板
挂载Dom
渲染→更新→渲
卸载

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

View Design

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

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport