随笔分类 - 3.前端框架
摘要：一、父传子 1.基于props的attribute 当是一个基本数据类型时，随便；初始化多个组件实例时，虽然基本数据类型的值相同但是地址都初始化了不同，只是值进行了拷贝，所以修改本实例数据地址的值不会影响其他实例的值； 当是一个引入数据类型时，需要返回一个函数，不然会造成多个组件实例修改同一份数据的
阅读全文
摘要：一、vue的不同版本 第一个：在浏览器中或者说浏览器可以识别的index.html中，如果要通过<sciript src=xxx>的方式引入，应该选择此版本 （.runtime）(.prod)都是可选项，如果选了（。runtime）表示只需要运行时的vue版本，不需要runtime+complier
阅读全文
摘要：一、组件 1、什么是组件化？ 将一个大的问题分解成一个个小的功能模块，这一个个功能模块就是组件话开发； 优点：利于大问题的拆分解决；便于后期维护； 2、全局组件 3、局部组件 4、singe-file-components文件 。vue文件浏览器无法识别，所以需要使用webpack构建工具将.vue
阅读全文
摘要：一、计算属性 1.为什么要用计算属性？ 原因：对data里的数据进行复杂处理；计算属性，计算计算，就是可以对data里的属性进行表达式计算，并且可以是复杂表达式，并且可以复用在很多{{}}中； 而且计算属性有缓存，复用时会更快； 计算属性也有响应式； 2.计算属性的setter和getter 二、侦
阅读全文
摘要：一、介绍 vue3创建一个vue实例不再使用new Vue了，而是使用vue.createApp(对象option).mount(); 二、简单语法 1.mustanche语法和v-text语法： 可以绑定data里的属性，可以使用data里的属性的表达式，可以使用methods里的函数，还可以使用
阅读全文
摘要：vue是如何实现响应式的？ 首先通过object.defineProperty方法获取实时改变的值； 然后通过订阅者模式将值推送给所有用到此值的属性上； 主要是发布者订阅者模式； 1是通过defineProperty方法可以实时知道属性值的改变， 2发布者通过调用notify方法，notify方法又
阅读全文
摘要：一、简介 如何使用? npm install axios -S 使用方法axios（config）即可 方法axios（）里面传入一个参数对象，参数对象里面可以有url属性、methods属性、params属性， 请求结束后会返回一个promise对象，所以我们可以添加一个then方法，如果请求成功
阅读全文
摘要：一、介绍 二、使用 和vue-router一样， 自定义一个文件夹，叫store，在文件下定义一个文件index.js 在index文件里， 在main.js里的初始化实例里，将store加载到vue实例上。 三、单一状态树 主要是值只初始化一个store对象，将所有数据都存储在这个store对象中
阅读全文
摘要：动态路由： 多个路由指向同一个组件；比如/user/:id，id传的不一样，但是会都匹配这个路由记录，然后指向同一个组件； 注意两点（1）这个时候组件是会被复用的，组件实例并不会销毁重建，而是直接使用；（2）组建内部可以通过this.$route.params来获取后面跟的参数 嵌套路由 一个组件内
阅读全文
摘要：一、使用vue-cli2 脚手架要使用的前提是需要先安装nodejs和webpack； 然后安装脚手架vue-cli3： npm install @vue/cli（可以加-g选择全局安装） 因为我们要使用脚手架2所以还要安装脚手架2：npm install @vue/cli-init（可以加-g选择
阅读全文
摘要：一. webpack基本使用 webpack是一个前端模块化打包工具; 我们在node环境中, 安装了webpack包之后, 只需要新建一个main.js文件, 然后在这个文件和其他文件可以使用任何模块化规范(commonjs\amd\cmd\ed6都行)开发, 最后打包的时候只需要打包这个main
阅读全文
摘要：一 模块化介绍 为什么要模块化开发? js文件引入顺序不正常导致项目不能启动问题; js文件同名变量冲突问题; 实现模块话开发目前有commonjs规范\amd规范\cmd规范\es6规范; 二 commonjs规范 commonjs规范的实现需要使用到node环境; 三 ES6规范 首先最重要的一
阅读全文
摘要：一、slot插槽 1、简单使用 可以在子组件模板中定义一个《slot》标签，作为插槽； 这样在父组件模板调用子组件模板时，可以在《cpn》《/cpn》中写入东西，比如 <cpn><p>我是一个p元素</p></cpn> 这个时候， <p>我是一个p元素</p> 就会重写插槽内的默认值； 2、具名插槽
阅读全文
摘要：一、组件化 1、介绍 2、注册组件的三个步骤 3、全局组件和局部组件 全局组件使用vue类的component方法创建；这个时候这个组件将可以在所有的vue实例下使用； 局部组件在创建某个vue实例的时候添加component属性创建，那么这个组件就只能在这个vue实例下使用； 4、父组件和子组件
阅读全文
摘要：一、事件监听v-on: 1、什么叫事件监听 v-on参数，就是可以监听我们触发的各种事件，比如点击click事件、键盘keyup事件；监听的原理是什么？我猜是因为我们的每一个事件都会产生一个对象，v-on捕获到了相关的对象就算是监听到了相关的事件； 2、v-on参数 （1）不需要参数时，可以简写 （
阅读全文
摘要：一、基本语法 1、mustache语法： 双大括号，让data属性的值响应式的显示在html文件中； 也可以在双大括号中写一些简单的表达式； 2、v-once语法 标签只渲染一次，后期改变不进行渲染； 还有v-for和v-on语法和v-clok语法； 其中v-cloak斗篷语法，现在用的很少； v-
阅读全文
摘要：vue的这种声明式编程，可以有效的进行数据和页面的相分离； 以前使用的原生js或jquery是命令式编程，就会很冗余； el属性告诉vue对象以后管理哪个元素。 data属性帮助我们管理数据，并进行在视图上显示；methods属性主要是一些可能会被事件触发的方法； v-for的命令:可以循环遍历数据
阅读全文
摘要：使用vue后所有的对象都抽取成一个个的组件，通过组件加插槽的方式，实现开发。 子组件设计好默认的html模板并加上一个插槽， 父组件调用子组件，方式一可以使用默认的，方式二也可以通过插槽的方式插入一个自己喜欢的模板覆盖默认模板，方式三也可以通过父子组件通信的方式修改子组件模板来生成一个自己喜欢的模板
阅读全文