1.Vue框架的有点是什么 轻量级框架：只关注视图层，大小只有几十KB简单易学：文档通顺清晰，语法简单数据双向绑定，数据视图结构分离，仅需操作数据即可完成页面相应的更新组件化开发：工程结构清晰，代码维护方便虚拟DOM加载HTML节点，运行效率高 2.什么是MVVM MVVM：是Model-View-ModelView的缩写，是一种脱胎于MVC模式的设计模式 Model:代表数据层，负责存放业务相关数据 View:代表视图层，负责页面上的数据展示 ViewModel:是同...
@目录接口调用方式异步promise基于Promise发送Ajax请求Promise 基本API实例方法.then().catch().finally()静态方法.all().race()fetchfetch API 中的 HTTP 请求fetchAPI 中 响应格式axiosaxios基础用法axios 全局配置axios 拦截器async 和 await图书列表案例1. 基于接口案例-获取图书列表2 添加图书3 验证图书名称是否存在4. 编辑图书5 删除图书 接口调用方式原生ajax 基于jQuery的ajax fetch axios异步JavaScript的执行环境...
3.vue一些基础语法 3.1.v-bind <body> <div id="app"><h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1><!-- v-bind 指令的简写形式： 冒号（:） --> <h1 :title="message">我是标题</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"> </script> <script> new Vue({ el: '#app', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) </script> </body>3....
下载Vue框架 把Vue框架当作一个包使用，下载： https://cn.vuejs.org/v2/guide/installation.html直接导入外网上的Vue框架 导入网址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js （开发版） <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Vue框架的基本使用 导入Vue框架给标签添加class或者id在script内写入Vue语法 var app = new一个Vue对象（{el: '标签选择器',data: {key: value} }）html标签内{{ ...
什么是Vuex Vuex是一个专门为Vue.js应用程序开发的一个状态管理模式，它采用了集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 什么是状态管理模式 new Vue({// statedata () {return {count: 0}},// viewtemplate: `<div>{{ count }}</div>`,// actionsmethods: {increment () {this.count++}} })状态自管理应用包含以下几个部分: state，驱动应用的数据源view，以声明方式将 state 映射到...
MVVM M(data)–>Model V(dom)–>View VM–>ViewModel VUE中VM就是Vue，从M取出数据通过Vue内部把数据渲染到View（每一个dom） Vue的生命周期Vue的基本语法 插值操作 mustache语法：双大括号语法，用于把data渲染到demo。v-once：原本不加v-once时，数据是响应式的。加了v-once数据渲染过一次就不会再改变了。v-html：该指令后面往往跟上一个String类型，将String类型的html解析出来并进行渲染。（url）v-text：不使用mustache语法时...
vue中使用new Vue() 的方式可以实现数据到页面元素的双向绑定。使用Vue内的el参数绑定标签的id建立关联，data参数定义标签需要绑定的数据，methods参数定义函数集合标签内使用{{field}} 绑定数据到标签内；标签内使用 v-model="field" 可以实现标签到数据model的双向绑定；按钮标签使用 v-on:click="函数或简单代码逻辑" 可以实现点击事件。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" c...
效果 点击增加数量，总价格随之改变 数量为1时，减少数量按钮无法被点击 移除按钮将此书籍从表单移除，并且总价格变化 移除全部书后，隐藏表单，只显示：购物车为空<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 总组，字体大小 */.zu {font-size...
Vue基础（一） vue官方文档：https://cn.vuejs.org/v2/guide/ Vue只负责视图层！视图层就只负责给用户看、以及刷新后台给的信息。 Vue遵守Soc原则：关注点分离原则 Vue核心：数据驱动、组件化！ vue也分为三层：MVVM M：model层。在这里表示JavaScript对象V：view层。在这里表示DOM元素VM：ViewModel层。连接视图与数据的中间件，Vue.js就是ViewModel层的实现者 ViewModel的作用是：双向数据绑定。 后端会将数据传到Model层，View...
vue简介 JavaScript框架简化Dom操作响应式数据驱动 页面是由数据来生成的，数据改变，页面跟着改变 第一个Vue程序 <head><title>vue1111</title> </head> <body><div id='app'>{ {message} }</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:'#app', //#是id选择器data:{message:"你好!"}})</script></body>el:挂载点 建议使用id选择器 只用用于双标签，但<html>和<body...
本篇博客是基于Vue官网文档整理指令v- 1. v-html 与 v-text <div id="app">{{msg}} <br/><span v-html="msg"></span> <!-- v-html是告诉浏览器这是一段无须转移的html代码片段，是会被执行的 --><br/><span v-text="msg"></span> <!-- v-text是告诉浏览器这是一段文本，无需执行 --> </div>v-text相比直接在页面出用{{msg}}来接收参数，可以避免加载闪烁问题（即页面中出现源代码的情况），不过闪烁问题可以用另一个指令v-clo...
vue 中常用的 高阶函数 一、filter 过滤 const nums = [10,20,30,40,666,980]//返回true 就把 内容加到 newNums数组中 let newNums = nums.filter(function(n){return n < 100 })要求: 1.n 为传递过来的每一个数 2.返回 小于 100 的 （你小于100 才会返回） 二、map函数 //2.map函数的使用 let new2Nums= newNums.map(function(n){return n * 2 }) console.log(new2Nums);要求：把所有的数字 * 2 返回 1.map 遍历数组 返回 的每一...