随笔分类 - vue2-放小结
摘要：双向绑定原理 1. 初始化的时候，把所有视图层的数据添加到对象中 2. 劫持数据发生的改变【哪个数据添加了v-model】 3. 劫持的数据去通知dep（订阅者）：具体知道哪个数据要改变 4. 订阅者通知waterch对象，触发update方法来更新视图层 补充： data是响应式的，因为data的
阅读全文
摘要：1.概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？ 多个组件需要共享数据时 3.搭建vuex环境 创建文件：src/store/index.js //引入Vue
阅读全文
摘要：作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。 写法： 准备好样式： 元素进入的样式： v-enter：进入的起点 v-enter-active：进入过程中 v-enter-to：进入的终点 元素离开的样式： v-leave：离开的起点 v-leave-active：离开过
阅读全文
摘要：路由 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 前端路由：key是路径，value是组件。 1.基本使用 安装vue-router，命令：npm i vue-router 应用插件：Vue.use(VueRouter) 编
阅读全文
摘要：作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 > 子组件 。 分类：默认插槽、具名插槽、作用域插槽 使用方式： 默认插槽： 父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template>
阅读全文
摘要：在vue.config.js中添加如下配置： devServer:{ proxy:"http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不
阅读全文
摘要：1. 先下载 cnpm i pubsub-js 发布消息 : 传递数据的 <template> <div class="student"> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <button @click="sendStudentName">把学
阅读全文
摘要：全局事件总线 : 任意组件间通信 一种组件间通信的方式，适用于任意组件间通信。 安装全局事件总线： new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 使用事
阅读全文
摘要：自定义事件适用于：子组件 > 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/> 第二种
阅读全文
摘要：一. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 二. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。 三. 相关API： 1. xxxxxStorage.setItem('key', 'value');
阅读全文
摘要：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)
阅读全文
