04 2022 档案
摘要：1. 功能：用于增强Vue 2. 本质：包含install [固定的词]方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。 plugins.js export default { install(Vue,x,y,z){ console.log(x,y,z)
阅读全文
摘要：scoped样式 scoped 是写在style里面的,写上就会出现了
阅读全文
摘要：<template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button> <School ref="sch"/> </div> </template> <s
阅读全文
摘要：1.首次安装 : cnpm i -g @vue/cli 2.创建项目 vue create 项目名 3.运行 : ( cnpm run serve 或)进去代码,点击运行就好了 自定义脚手架 : babel : ES6转换ES5的 eslint : 语法检查的 分析脚手架 1.babel.confi
阅读全文
摘要：关于VueComponent： 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //定义studen
阅读全文
摘要：几个注意点： 1.关于组件名: 一个单词组成： 第一种写法(首字母小写)：school 第二种写法(首字母大写)：School 多个单词组成： 第一种写法(kebab-case命名)：my-school 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持) 备注： (1)
阅读全文
摘要：Vue中使用组件的三大步骤： 一、定义组件(创建组件) vue.extend 二、注册组件 三、使用组件(写组件标签) 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别
阅读全文
摘要：生命周期 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。 关于销毁Vue实例 1.销毁后借助V
阅读全文
摘要：过滤器 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。 语法： 1.注册过滤器：Vue.filter(name,callback) 全局过滤器 或 new Vue{filters:{}} 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx
阅读全文
摘要：监视数据的原理 Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vu
阅读全文
摘要：需求 ：通过分享二维码，绑定上下级关系 思路 ：在页面生成二维码（二维码由第三个网页+手机号码生成），然后扫描二维码跳转到网页，然后注册，绑定上下级关系 1.二维码（ weapp-qrcode.js 生成 ） /** * weapp.qrcode.js v1.0.0 (https://github.
阅读全文
摘要：过滤之列表排序 <body> <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <button @click="sortType = 2">年
阅读全文
摘要：过滤之计算属性实现 <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key=
阅读全文
摘要：过滤之监听属性实现 <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key=
阅读全文
摘要：<html> <head> <meta charset="UTF-8" /> <title>绑定样式</title> <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px
阅读全文
摘要：<body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> <hr/> <h3>a的值是:{{numbers.a}}</h3> <button @click="numbers.a
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<sp
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 测试：<in
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<sp
阅读全文
摘要：<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<sp
阅读全文
摘要：vue的介绍 1.vue是一套用于构建用户界面的渐进式的JavaScript框架 2.vue的特点: a.采用组件化模式,提高代码复用率,且让代码更好维护 b.声明式编码,让编码人员无需直接操作DOM,提高开发效率 c.使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点 3.学习Vue前,最
阅读全文
摘要：自定义指令 1、定义语法： (1).局部指令： new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) }) <html> <head> <meta charset="UTF-8" /> <title>自定义指令</ti
阅读全文
摘要：v-text,html,cloak,once,pre v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。 v-html指令： 1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： (1).v
阅读全文
摘要：v-for 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） 4.v-if比v-for的优先级更高 key的原理 1. 虚拟DOM中key的作用： key是虚拟DOM对象的
阅读全文
摘要：事件绑定 含义 : 事件绑定 , xxx是事件名 简写 : [ @:xxx=' ' ] 注意 : 1.事件的回调需要配置在methods对象中，最终会在vm上； 2.methods中配置的函数，不要用箭头函数！否则this就不是vm了； 3.methods中配置的函数，都是被Vue所管理的函数，th
阅读全文
摘要：v-if , v-show v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。v-if可以与temp
阅读全文
摘要：v-bind 含义 : 单向绑定 , 数据只能从data流向页面 简写 : [ :value=' ' ] v-model 含义 : 双向绑定 , 数据不仅能从data流向页面，还可以从页面流向data 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model
阅读全文
摘要：插值语法 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新； 注意区分：js表达式 和 js代码(语句) 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
阅读全文
摘要：第 2 章，了解 JavaScript 如何与 HTML 结合来创建动态网页，主要介绍在网页中嵌入 JavaScript 的不同方式，还有 JavaScript 的内容类型及其与<script>元素的关系。 script 的 defer 属性 : 1.defer只对外部文件有效 2.立即下载,但是要
阅读全文
摘要：第 1 章，介绍 JavaScript 的起源：从哪里来，如何发展，以及现今的状况。这一章会谈到 JavaScript 与 ECMAScript 的关系、DOM、BOM，以及 Ecma 和 W3C 相关的标准。 JavaScript 包含 : ECMAScript : 由ECMA-262定义并提供核
阅读全文
摘要：第 1 章，介绍 JavaScript 的起源：从哪里来，如何发展，以及现今的状况。这一章会谈到 JavaScript 与 ECMAScript 的关系、DOM、BOM，以及 Ecma 和 W3C 相关的标准。 第 2 章，了解 JavaScript 如何与 HTML 结合来创建动态网页，主要介绍在
阅读全文
摘要：<图解http-第一章> 客户端 : 通过发送请求获取服务器资源的 Web 浏览器 TCP/IP : 互联网相关的各种协议的总称 , 层次分别分为以下 4 层：应用层、传输层、网络层和链路层 应用层 : 决定了向用户提供应用服务时通信的活动 ( HTTP 协议处于该层 ) 传输层 : 提供处于网络连
阅读全文
