vue
文章平均质量分 56
不是死水
学得越多,就觉得自己越渺小。
展开
-
Vue的数据代理,监听属性
1. 数据代理通过一个对象代理另一个对象中的属性的操作(读 / 写 )例如 <script> let son = {x: 100} let son1 = {y: 200} Object.defineProperty(son1,'x',{ get(){ return son.x }, set(value){ son.x = value }原创 2021-08-19 00:17:13 · 191 阅读 · 0 评论 -
Vue的diff算法(初始dom)
一、虚拟 DOM (virtual dom) diff 算法首先要明确一个概念就是 diff 的对象是虚拟DOM(virtual dom),更新真实 DOM 是 diff 算法的结果。 注:virtual dom可以看作是一个使用 JavaScript 模拟了 DOM结构 的树形结构,这个树结构包含整个DOM结构的信息二、为什么使用 diff 算法? 1、页面结构庞大时,DOM 操作代价太高,可维护性差,因此要减少 DOM 操作; 2、虚拟 DOM 很轻量,对虚拟 DOM 操作.转载 2021-08-16 23:37:45 · 152 阅读 · 0 评论 -
Vue初体验(初学者)
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。1.首先去官网下载vue.js2.在你的项目中引入vue<script src="../vue.js/vue.js"></script>3.用一个标签来放项目<div id="原创 2021-06-23 22:09:40 · 185 阅读 · 1 评论 -
Vuex初始用
一. 什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension(opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。1.1状态管理到底是什么简单理解成需要多个组件共享的变量全部存储在一个对象里面,响应式的公共组件单页面二. 在..原创 2021-08-05 12:48:37 · 129 阅读 · 0 评论 -
vue学习笔记总结(二)
一. Vue Cli1.1 runtime-compiler和runtime-only的区别ESLint是模版规范runtime-compiler从 template -> ast-> rander-> vdom-> 真实domruntime-only从 rander-> vdom ->dom1.2 VueCLI31.如何创建项目 vue create project2.CLI3的目录结构3.配置文件:1.vue ui查看 2.隐藏的配置文原创 2021-08-04 09:19:09 · 116 阅读 · 0 评论 -
vue学习笔记总结(一)
一. 动态绑定属性(v-bing)语法糖::class绑定类 :style 绑定样式二. 计算属性1.本质 computed{set{},get{} }2.计算属性和methods对比 :多次使用有缓存三.事件监听1.语法糖@2.参数 btnClick 不带参数btnClick(event)浏览器自带的事件btnClick(参数,$evevt)3.修饰符1.stop 阻止冒泡事件2.prevent 阻止默认事件3.enter 监听回车键...原创 2021-08-02 21:53:28 · 134 阅读 · 0 评论 -
axios(初始用)
1.axios基本使用先安装npm install axios --save,引入axios后import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, ren原创 2021-08-05 21:14:27 · 290 阅读 · 0 评论 -
vue(学习笔记总结三)
一. promise1.1promise的基本使用 什么是promise 用来执行异步任务,解决回调地狱Promise是一个构造函数,自身上有all、resolve、reject这几个方法,原型上有then、catch等同样的方法。 如何将异步操作放入到promise中通过new promise 新建一个构造函数 ,(resolve,reject)=> then/catch1.2 promise的链式调用new Promise((resol...原创 2021-08-07 00:24:42 · 66 阅读 · 0 评论 -
router路由 导航守卫(基础重点笔记)
一. 安装router二. 在模块化中使用它1.导入路由对象 import form,并且调用Vue.use(VueRouter)安装,调用Vue.use安装插件前需引入Vue// 配置路由相关的信息import VueRouter from 'vue-router'import Vue from 'vue'// 1.通过Vue.use安装插件Vue.use(VueRouter);2.创建路由实例,并且传入路由映射配置(导出router)const routes =...原创 2021-08-01 23:44:58 · 316 阅读 · 0 评论 -
vue.cli(脚手架)
1.使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置2.在node.js中npm install -g @vue/cli 3.0版本3.拉取2.0版本框架 vue initwebpack my-project原创 2021-07-31 16:18:37 · 53 阅读 · 0 评论 -
组件通信,访问(笔记)
1.父传子 通过props<body> <div id="add"> <div> <cpn :cmovies = 'movies' :cmessage = 'message'></cpn> </div> </div> <template id="cpn"> <div> <ul> <li v-for =.原创 2021-07-27 23:36:25 · 78 阅读 · 0 评论 -
vue组件化开发(笔记)
1.组件化开发的基本使用三步骤 1.创建组件构造器vue.extend({ template:自定义模版}) 2.注册组件 vue.component(组件的标签名,构造器) 3.使用组件<body> <div id="add"> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></m...原创 2021-07-25 00:01:00 · 97 阅读 · 0 评论 -
vue 高阶函数,v-model表单绑定
一.高阶函数1.filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 const num = [10,20,30,50,100] // 1.filtle函数的使用 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 let newNews = num.filter(function (n) { return n < 40 }) console.log(newNews);2.ma原创 2021-07-16 18:04:34 · 697 阅读 · 0 评论 -
vue事件监听,条件判断
一. 事件监听 v-on语法糖@1. 基本的使用法法 <div id="add"> 点击次数{{counter}} <button @click = "add">+</button> <!--v-on:click = "" 语法糖 --> <button @click = "dec">-</button> </div> <scrip原创 2021-07-07 21:48:47 · 1078 阅读 · 0 评论 -
动态绑定属性
1.v-bing的基本使用原创 2021-06-26 21:44:24 · 248 阅读 · 0 评论 -
vue插值的操作
1.mustache语法 {{}} :俗称双大括号语法作用:把数据中的内容解析到视图层引入vue文件 <div id="add"> <h2>{{message}}</h2> </div> <script> const add = new Vue({ el: '#add', data: { message: 'hello word', } })原创 2021-06-25 21:49:45 · 93 阅读 · 0 评论