VUE基础+ElementUI快速入门
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 的表达式。
常用指令
-
文本插值
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:"一夜暴富"
}
});
script>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Exn4tWQT-1593432056772)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593428448527.png)]](http://img.e-com-net.com/image/info8/bf6df4bfcc9948f58448b45626f0648e.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)]](http://img.e-com-net.com/image/info8/92d80bc6d5d94283a15b6e1645bcdc55.png)
-
条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。判定为真时渲染,否则不渲染。
v-else-if：条件性的渲染。判定为真时渲染,否则不渲染。
为false时，页面上根本不会加载这个元素
v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
页面上一定会有这个元素，为false时，只是display属性为none。
div1
div2
div3
-
列表渲染
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。
<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>Documenttitle>
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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过去，根据自己具体的需求再进行具体的改造。然后就欧克了。