随笔分类 - Vue
摘要：环境搭建 1、安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2、安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3、安装脚手架 cnpm install -g
阅读全文
摘要：slot插槽 (内容分发) a. 单个slot b. 具名slot *混合父组件的内容与子组件自己的模板-->内容分发 *父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。 1、基本使用 <!DOCTYPE html> <html lang="en"> <head> <me
阅读全文
摘要：fetch和axios axios与fetch实现数据请求 fetch（不是所有浏览器都支持，谷歌浏览器支持），XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。 兼容性不好 polyfill: https://github.com/
阅读全文
摘要：只要变量发生变化，就会执行监听属性中的方法 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </hea
阅读全文
摘要：计算属性 插值的普通函数，只要页面一刷新，函数就会重写计算，跟函数没关的值的变化，函数也会重写计算 把函数当成属性来用 》只有这个函数使用的属性(变量)变化，函数才重写运算 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
阅读全文
摘要：三种方式 方式一：jquery的ajax方法发送请求(基本不用了) 方式二：js官方提供的fetch方法(XMLHttpRequest)（官方的，用的也少） 方式三：axios第三方，做ajax请求 代码测试 <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：生命周期图 1、官网原图 2、我理解的图 生命周期 钩子函数描述 beforeCreate 创建Vue实例之前调用 created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） beforeMount 渲染DOM之前调用 mounted 渲染DOM之后调用 beforeUpdate 重
阅读全文
摘要：checkbox选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2
阅读全文
摘要：数据双向绑定 v-model的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/v
阅读全文
摘要：事件释义 input 当输入框进行输入的时候 触发的事件 change 当元素的值发生改变时 触发的事件 blur 当输入框失去焦点的时候 触发的事件 change 和 blur 最本质的区别： 如果输入框为空，失去焦点后，change不会触发，但是blur会触发 过滤案例 <!DOCTYPE ht
阅读全文
摘要：v-if+v-for+v-else控制购物车商品的显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if + v-for + v-else控制购物车商品的显示</title> <script src=
阅读全文
摘要：指令释义 v-if 相当于： if v-else 相当于：else v-else-if 相当于：else if <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>if、else if、else</title>
阅读全文
摘要：数据的绑定 语法： :属性名=js变量/js语法 :class=’js变量、字符串、js数组’ class：三目运算符、数组、对象{red: true} :style=’js变量、字符串、js数组’ style：三目运算符、数组[{backgreound: ‘red’},]、对象{backgroun
阅读全文
摘要：指令释义 v-bind 直接写js的变量或语法（不推荐） : 直接写js的变量或语法（推荐） v-bind:class=’js变量’可以缩写成：:class=’js变量’ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
阅读全文
摘要：事件指令 指令释义 v-on 触发事件（不推荐） @ 触发事件（推荐） @[event] 触发event事件（可以是其他任意事件） v-on:click 可以缩写成@click <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
阅读全文
摘要：文本指令 指令释义 v-html 让HTML渲染成页面 v-text 标签内容显示js变量对应的值 v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示 v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示 v-show与 v-if的区别： v-show：标签还在，只是不显示了（
阅读全文
摘要：插值可以放变量和少量js代码 语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/
阅读全文
摘要：Vue介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，可以一点一点地使用它，只用一部分，也可以整个工程都使用它 js的
阅读全文
摘要：1、HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看 2、Ajax的出现 -> 后台发送异步请求，Render+Aja
阅读全文
