VUE基础+ElementUI快速入门

最新推荐文章于 2024-03-18 23:41:44 发布

北海怪兽Monster

最新推荐文章于 2024-03-18 23:41:44 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue html

本文链接：https://blog.csdn.net/m0_48639280/article/details/107027376

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

VUE快速入门

Vue 介绍

Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点

易用：在有 HTML CSS JavaScript 的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue 快速入门使用

下载和引入 vue.js 文件。
编写入门程序。
视图：负责页面渲染，主要由 HTML+CSS 构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。

入门详解

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

let vm = new Vue({
	选项列表;
});

选项列表

el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。

data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。

methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
数据绑定

在视图部分获取脚本部分的数据。

入门案例

<body>
    <!-- 视图部分 -->
    <div id="myDiv">
        {{msg}}
    </div>
    
</body>
<script src="vuejs/vue.js"></script>
<script>
    <!--脚本数据部分-->
    new Vue({
        el:"#myDiv",
        data:{
            msg:"hello body"
        }
    });
</script>

Vue常用指令

指令概述：

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。

使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。

常用指令

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XbwOPnke-1593432056769)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593428267859.png)]$

文本插值

v-html：把文本解析为 HTML 代码。

作用：将文本数据中的html标签解析出来

<body>
    <div id="myDiv">
        <div>{{msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#myDiv",
        data:{
            msg:"<b>一夜暴富</b>"
        }
    });
</script>

效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Exn4tWQT-1593432056772)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593428448527.png)]$

绑定属性

v-bind：为 HTML 标签绑定属性值。

作用：为html标签的属性赋值

<body>

    <div id="myDiv">
        <a v-bind:href="cl">百度一下了啦</a>
    </div>
    
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#myDiv",
        data:{
            cl:"www.baidu.com"
        }
    });
</script>

效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u97JjkF1-1593432056773)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593428686080.png)]$

条件渲染

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。判定为真时渲染,否则不渲染。
v-else-if：条件性的渲染。判定为真时渲染,否则不渲染。

为false时，页面上根本不会加载这个元素

v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。

页面上一定会有这个元素，为false时，只是display属性为none。

<body>
    <div id="myDiv">
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else = "num % 3 ==2">div3</div>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#myDiv",
        data:{
            num:3
        }
    });
</script>

列表渲染

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

作用：将你的数组动态的加载到页面

<body>
    <div id="div">
        <ul>
            <!-- 循环遍历 数组对象， -->
            <li v-for="name in names">
                {{name}}
            </li>
            <!-- 将对象中每一个属性都 遍历出来 -->
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>

事件绑定

v-on：为 HTML 标签绑定事件。

<body>
    <div id="myDiv">
        <div>{{msg}}</div>
        <div id="div1"></div>
        <div id="div2"></div>
        <button v-on:click="change()">改变div1的值
        </button>
        <button v-on:dblclick="twoChangge()">点击两下生效</button>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#myDiv",
        data:{
            msg:"我是真的帅"
        },
        methods:{
            change:function(){
                this.msg="这是真的"
            },
            twoChangge(){
                this.msg="千真万确";
            }
        }
    });
</script>

表单绑定

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

双向数据绑定
更新 data 数据，页面中的数据也会更新。
更新页面数据，data 数据也会更新。

MVVM模型(Model View ViewModel)： 是 MVC 模式的改进版
在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。
将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。
ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zCATUiCy-1593432056775)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593430405528.png)]$

<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:25
        },
        
    });
</script>

当你修改 data 的数据时，input 中的默认值也会发生改变。这是我们一直都觉得单向绑定。

现在使用 Vue ，当你修改input中的值，内存中data的值也会跟随变化。虽然说你刷新之后还是原有的值，那是因为你把内存中的数据干掉了，重新执行了一次。

这里个人是这样理解的，cpu将硬盘的程序读取进入内存中，之前的单向绑定，input的数据发生改变不会对内存中原有的data数据产生影响。现在使用 Vue的双向绑定，input中的数据发生改变会对内存中data的数据产生影响。

计算机执行程序，先将程序从硬盘中读取到内存中，在内存中运行，最后将结果展示给用户。之前的单向绑定，用户不传值，就是用程序的默认值，如果用户传了值，就覆盖默认值。使用用户传入的值进行程序运行，但是对原有从硬盘加载进来值不影响。

简单理解jQuery和Vue的区别

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

Element UI的基本使用

Element 介绍

Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。
使用 Element 前提必须要有 Vue。
组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
Element 官网：https://element.eleme.cn/#/zh-CN

Element快速入门步骤

下载 Element 核心库。
引入 Element 样式文件。
引入 Vue 核心 js 文件。
引入 Element 核心 js 文件。
编写按钮标签。
通过 Vue 核心对象加载元素。

编写按钮标签

    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
</head>
<body>
    <div id="myDiv">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:"#myDiv"
    });
</script>

一定要先将依赖文件导入，css文件控制样式，js文件控制功能。

elementUI依赖于vue.js 所以一定得在element之前导入vue.js

使用element规定得 html结构，属性。最后自己再编写数据脚本，指定要使用element得元素。

个人理解：为什么就写了最简单得脚本文件，element效果就有了？

因为element依赖于vue，所以element的效果只会出现在vue之上。在使用了vue的地方，才会出现element效果。然后再一看，嚯，使用了element的自定义标签，效果必须安排上啊。

使用表格UI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
          background: oldlace;
        }
      
        .el-table .success-row {
          background: #f0f9eb;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <template>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                prop="date"
                label="日期"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>
            </el-table>
        </template>
    </div>
    
</body>
<script src="vuejs/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:"#myDiv",
            data: {
                tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }]
        
            },
            methods: {
                tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                return 'warning-row';
                } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
            }
        }
    });
</script>
</html>

ElementUI使用：先看懂示范代码每块的功能，然后cv过去，根据自己具体的需求再进行具体的改造。然后就欧克了。

北海怪兽Monster

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
VUE基础+ElementUI快速入门

VUE快速入门Vue 介绍Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。特点易用：在有 HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。Vue 快速入门使用下载和引入 vue.j
复制链接

扫一扫