回顾：
jquery变量选择器：
$("#div :eq("+index+")")Vue是一套构建用户界面的渐进式前端框架。（面向数据编程，更多的是操作数据，而jquery是操作dom，这就是两者的区别）
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点
易用：在有 HTML CSS JavaScript 的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb min+gzip 运行大小、超快虚拟 DOM(不需要自己操作dom了）、最省心的优化。
区别：
jquery他操作数据是伴随着需要操作domVue主要面向数据操作下载和引入 vue.js 文件。
编写入门程序。
视图：负责页面渲染(body中的html)，主要由 HTML+CSS 构成。 脚本：负责业务数据模型（Model）以及数据的处理逻辑。
Vue整体构成=模板+数据
模板
<body> <!-- 视图 --> <div id="div"> {{msg}} </div> </body>数据
<script src="js/vue.js"></script> <script> // 脚本 new Vue({ el:"#div",//指定从哪里开始解析(选择器) data:{ msg:"Hello Vue" } }); </script>Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。
let vm=new Vue({ 选项列表; });选项列表
el 选项：用于接收获取到页面中的元素。(根据常用选择器获取，指定你模板元素位置)。data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。数据绑定
在视图部分获取脚本部分的数据。
{{变量名}}
指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
常用指令
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UPp408YI-1593824596792)(\img\1593180667859.png)]
v-html:把文本解析为HTML代码
作用：解析标签，将变量内容存放到标签的文本处{{}}：直接绑定变量并将数据直接展示在符号处 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本插值</title> </head> <body> <div id="div"> <!-- <div>{{msg}}</div> --> <div v-html="msg"></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ msg:"<b>Hello Vue</b>"//相当于把这个标签放到div标签之间 } }); </script> </html>绑定属性
v-bind：为 HTML 标签绑定属性值(操作标签的属性值)
<a :href="url">百度一下</a> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绑定属性</title> <style> .my{ border: 1px solid red; } </style> </head> <body> <div id="div"> <a v-bind:href="url">百度一下</a> <br> <!-- 简写形式，可以省略v-bind --> <a :href="url">百度一下</a> <br> <div :class="cls">我是div</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ url:"https://www.baidu.com", cls:"my" } }); </script> </html>v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title> </head> <body> <div id="div"> <!-- 判断num的值，对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3 --> <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 v-show="flag">div4</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ num:1, flag:false } }); </script> </html>列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性。
写在对应元素上，可遍历生成多个该元素
<li v-for="name in names">{{name}}</li> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表渲染</title> </head> <body> <div id="div"> <ul> <li v-for="name in names"> {{name}} </li> <!-- 对names下面赋值，生成多个li标签 --> <li v-for="value in student"> {{value}} </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ names:["张三","李四","王五"], student:{ name:"张三", age:23 } } }); </script> </html>事件绑定
v-on：为 HTML 标签绑定事件。
<button v-on:click="change()">改变div的内容</button> <!-- 简写形式 --> <button @click="change()">改变div的内容</button> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件绑定</title> </head> <body> <div id="div"> <div>{{name}}</div> <button v-on:click="change()">改变div的内容</button> <button v-on:dblclick="change()">改变div的内容</button> <!-- 简写形式 这里绑定的方法直接写methods里定义的方法--> <button @click="change()">改变div的内容</button> </div> </body> <script src="js/vue.js"></script> <script> let vm=new Vue({ el:"#div", data:{ name:"黑马程序员" }, methods:{ change(){ this.name = "传智播客" }//这个只改变脚本中name的值，然后牵扯到模板(视图)中的name值改变 } }); </script> </html>v-model：在表单元素上使用创建双向数据绑定。
作用：将变量和输入框进行双向绑定，变量改变了之后输入框会改变，反之亦然。
<input type="text" name="username" v-model="username">双向数据绑定
更新data数据，页面中的数据也会更新更新页面数据，data数据也会更新。MVVM模型(Model View ViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来就是ViewModel，它是桥梁。
ViewModel负责吧Model的数据同步到View展示出来，还负责吧View修改的数据同步回Model。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3pBCCw1f-1593824596796)(\img\1593306170168.png)]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单绑定</title> </head> <body> <div id="div"> <form autocomplete="off"> 姓名：<input type="text" name="username" v-model="username"> <!-- 只有为表单绑定v-model，才会在页面显示初始值，用户能改变这些值， 以前通过标签.val()来获取值，但这里就不用了，绑定后就是双向数据绑定 同步改变，可以直接操作这些提交的属性，不用麻烦的重新获取--> <br> 年龄：<input type="number" name="age" v-model="age"> </form> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ username:"张三", age:23 } }); </script> </html>指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
文本插值
v-html：把文解析为HTML代码。绑定属性
v-bind：为 HTML 标签绑定属性值。
条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性。
Element：网站快速成型工具，是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
使用 Element 前提必须要有 Vue。
组件：组成网页的部件，例如 超链接、按钮、图片、表格等等
Element 官网：https://element.eleme.cn/#/zh-CN ，ctrl+F弹出搜索框
Element提供的按钮
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hY1SUSoa-1593824596798)(\img\1593308364482.png)]
下载 Element 核心库。
引入 Element 样式文件。
引入 Vue 核心 js 文件。
引入 Element 核心 js 文件。
编写按钮标签。
通过 Vue 核心对象加载元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>快速入门</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <!-- 引入这三个文件 --> </head> <body> <button>我是按钮</button> <br> <div id="div"> <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> <br> <el-row> <el-button plain>朴素按钮</el-button> <el-button type="primary" plain>主要按钮</el-button> <el-button type="success" plain>成功按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>警告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button> </el-row> <br> <el-row> <el-button round>圆角按钮</el-button> <el-button type="primary" round>主要按钮</el-button> <el-button type="success" round>成功按钮</el-button> <el-button type="info" round>信息按钮</el-button> <el-button type="warning" round>警告按钮</el-button> <el-button type="danger" round>危险按钮</el-button> </el-row> <br> <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row> </div> </body> <script> new Vue({ el:"#div" }); </script> </html>基础布局：将页面分成最多24个部分，自由切分
行标签：
列标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基础布局</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <style> .el-row { /* 行距为20px */ margin-bottom: 20px; } .bg-purple-dark { background: red; } .bg-purple { background: blue; } .bg-purple-light { background: green; } .grid-content { /* 边框圆润度 */ border-radius: 4px; /* 行高为36px */ min-height: 36px; } </style> </head> <body> <div id="div"> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> </body> <script> new Vue({ el:"#div" }); </script> </html>表单：由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据.
prop属性和from中rules的属性名称相同，和实体类中属性名相同 model：指的是实体对象，data中的属性rules：指定校验规则，也是data中的属性ruleForm：相当于idrules规则信息
name1: [ // required：是否必须， message：如果不满足校验条件显示内容，trigger：什么时候触发校验 { required: true, message: '请输入活动名称123132', trigger: 'blur' }, // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ]表单拷贝
标签内容可以直接完全拷贝
数据拷贝：自己先创建Vue实例，再拷贝别人data函数的返回值
new Vue({ el:"#div", data:{ form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } });函数中(箭头函数和lambda表达式是一个意思)
(valid)=>{} 相当于 function(valid){} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单组件</title> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> </head> <body> <div id="div"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-form-item prop="date2"> <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker> </el-form-item> </el-col> </el-form-item> <el-form-item label="即时配送" prop="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div> </body> <script> new Vue({ el:"#div", data:{ ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], date1: [ { type: 'date', required: true, message: '请选择日期', trigger: 'change' } ], date2: [ { type: 'date', required: true, message: '请选择时间', trigger: 'change' } ], type: [ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } ], resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ], desc: [ { required: true, message: '请填写活动形式', trigger: 'blur' } ] } }, methods:{ //提交 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, // 重置 resetForm(formName) { this.$refs[formName].resetFields(); } } }); </script> </html>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8qtjJnC-1593824596801)(\img\1593314973716.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8EC8qVfr-1593824596803)(E:\每日讲课笔记\WEB_new\13-VUE（双元）\Vue和Element基础\img\1593315013922.png)]
Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于 Vue 的桌面端组件库。
使用 Element 前提必须要有 Vue。
使用步骤
下载 Element 核心库。
引入 Element 样式文件。
引入 Vue 核心 js 文件。
引入 Element 核心 js 文件。
借助常用组件编写网页。
常用组件
网页基本组成部分，布局、按钮、表格、表单等等~~~
常用组件不需要记住，只需要在 Element 官网中复制使用即可。
