div标签（HTML）

div标签的作用是，设定字、画、表格等的摆放位置。 DIV元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。 DIV标签，称为区隔标记。

什么是vue

vue是响应式数据驱动：页面是由数据来生成的，数据改变之后，页面也会变动。

一个基本的vue页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>页面名字</title></head><body><div id="app">{{ message }}</div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:" hello "}})</script></body></html>

vue语法

vue的作用范围在：在el命中的元素内部

el：挂载点

el：“#app” 意思是将创建的Vue对象app 挂载到标签名字为app的标签上

提示：#是id选择器的关键字 .是class选择器的关键字

date：数据对象

vue实例需要使用的数据都会在date中

date数据对象的类型3种有：基本数据类型 message:" xxx " 数组array:[ ] 对象obj:[ ]

写复杂类型数据遵守JS的语法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>页面名字</title></head><body><div id="app">{{ message }}  //取基本信息{{student.age}} //取对象信息{{ classnumb }} //取数组{{classnumb[2]}} //取数组值</div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:" hello ",student:{name:"李佩泽",age:"22"},classnumb:["1班","2班","3班"]}})</script></body></html>

vue指令

vue指令是指以 v- 开头的一组特殊语法，出现在标签内部

（1）v-text：设置标签的文本值

（2）v-html：设置标签的innerHTML，内容中的有html结构会被解析成标签

（3）v-on：为元素绑定事件

v-on: 可以简写为 @

绑定的方法定义在对象的methods属性中

方法内部的值通过this关键字可以访问定义在date中的数据

date数据改变，页面数据也会改变，这就是Vue的响应式数据驱动

（4）v-show：根据表达式的布尔值，切换元素的显示和隐藏（比如关闭广告）

true：显示元素 false：不显示元素

v-show 后面可以写表达式，最终会被解析成为布尔值

（5）v-if：类似v-show的效果，根据布尔值进行判断

（6）v-bind：为元素绑定属性（比如为图片绑定介绍，即鼠标指向图片时出现介绍）

（7）v-for ：循环

（8）v-model：获取和设置表单元素的值（双向绑定，页面显示和date数据对象绑定）

如何获取后端数据库数据

axios：

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中的请求和响应。它是一个流行的第三方库，可以轻松地发送异步请求和处理响应。Axios支持各种请求类型，包括GET，POST，PUT，DELETE等。它还提供了拦截器，可以在请求和响应之前添加自定义逻辑。

axios的请求格式

同时还有HTTP请求的是：例如jQuery的$.ajax和Fetch API。它们都可以用于发送HTTP请求和处理响应，但它们的API和功能可能有所不同。

vue2.x 学习笔记相关推荐

Vue2.0学习笔记二基础语法
1. Mustache语法 Mustache语法也叫插值表达式,Mustache语法式通过{{}}渲染到页面,并且数据是响应式的. 数据的响应式:数据的变化导致页面的内容随之变化效果图: 2. 指令 ...
Vue2.0学习笔记一：各种表达式
#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | ...
vue2.x学习笔记
Vue.config.productionTip=false //阳止 vue在启动时生成生产提示. BootCDN MOMENT.JS 日期处理库 dayjs 解构赋值连续写法 {query:{id ...
【天禹老师】Vue2个人学习笔记
一. Vue 核心 1. Vue简介 1.1 官网中文官网英文官网 1.2 介绍 1.2.1 Vue 是什么? 一套用于构建用户界面的渐进式JavaScript框架作者:尤雨溪 1.2.2 Vu ...
vue2.x 学习笔记for
文章目录 Vue指令之`v-for`和`key`属性 v-for循环普通数组 v-for循环对象数组 v-for循环对象 v-for迭代数字 v-for循环中key属性的使用 Vue指令之v-for和 ...
Vue2.0学习笔记：Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
vue2.0学习笔记 -- 常用指令
一,(windows,node)淘宝镜像配置 1,创建文件夹:E:\nodejs\node_global 2,设置nodejs全局目录,在cmd中输入npm config set cache &quo ...
尚硅谷Vue2学习笔记分享
前言这里是尚硅谷Vue2的学习笔记分享. 原视频是尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 Vue3的笔记链接文章目录前言初识Vue 模板语法数据绑定 el和data ...
Vue学习笔记（5）（Vuex）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vuex 认识Vuex 官方解释:Vuex 是一个专为 Vue.js ...

vue2.x 学习笔记