![](https://img-blog.csdnimg.cn/20210623211222682.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 64
认识Vue
北辰.two
这个作者很懒,什么都没留下…
展开
-
Vue - 侦听器
1. vue侦听器-watch可以侦听data/computed属性值改变使用场景(作用):主动侦听data/computed变量"值"的变化语法:watch: { 变量名 (newVal, oldVal){ // 变量名对应值改变这里自动触发 } }例子:<template> <div> <input type="text" v-model="name"> </div><原创 2021-11-01 18:16:08 · 242 阅读 · 0 评论 -
Vue - 计算属性
1.vue计算属性-computed一个数据, 依赖另外一些数据计算而来的结果场景: 一个变量的值, 需要用另外变量计算而得来语法:computed: { "计算属性名" () { return "值" }}注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同注意2: 函数内变量变化, 会自动重新计算结果返回例子:需求:需求1: 求2个数的和显示到页面上需求2: 字符串翻转<template> &l原创 2021-11-01 18:08:23 · 52533 阅读 · 0 评论 -
Vue - 过滤器
vue过滤器-定义使用转换格式, 过滤器就是一个函数, 传入值返回处理后的值过滤器只能用在, 插值表达式和v-bind表达式Vue中的过滤器场景 :传入一个值,得到处理后的值字母转大写, 输入"hello", 输出"HELLO"字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"本质:函数 (Vue3.0 - 过滤器移除了)语法:在项目入口main.js文件中定义全局过滤器:Vue.filter("过滤器名", (值) => {return原创 2021-11-01 17:33:20 · 241 阅读 · 0 评论 -
Vue - 动态
动态class用v-bind给标签class设置动态的值如何给标签class属性动态:语法::class="{类名: 布尔值}" 布尔值 为true表示使用类名,false表示不用正常的class也可以用 ,也可以同时使用:class="[类名, 类名]"<template> <div> <p :class="{redStr: bool}">值为true, key作为类名生效</p> <p class=原创 2021-11-01 17:07:55 · 264 阅读 · 0 评论 -
有key - 值为索引 - 就地更新
口诀: key的值有id用id, 没id用索引<template> <div> <ul id="myUL"> <li v-for="(obj, index) in arr" :key="index">{{ obj.name }} <input type="text"></li> </ul> <button @click="addFn">下标为1的位置新增一个</原创 2021-10-26 20:57:48 · 96 阅读 · 0 评论 -
虚拟dom 和 diff算法
虚拟dom.vue文件中的template里写的标签, 都是模板, 都要被vue处理后成虚拟DOM对象, 才会渲染显示到真实DOM页面上1.内存中生成一样的虚拟DOM结构(本质是个JS对象=)因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了比如template里标签结构<div id="box"> <p class="my_p">123</p></div>对应的虚拟DOM结构const dom = {原创 2021-10-26 20:49:54 · 290 阅读 · 0 评论 -
v-for更新监测
v-for更新监测当v-for遍历的目标结构改变, Vue触发v-for的更新这些方法会触发数组改变, v-for会监测到并更新页面push()pop()shift()unshift()splice()sort()reverse()这些方法不会触发v-for更新slice()filter()concat()注意: vue不能监测到数组里基础类型值的变化而更新, 如果需要请使用Vue.set(), 或者覆盖整个数组<template> <div&原创 2021-10-26 20:30:10 · 172 阅读 · 0 评论 -
Vue常用指令
Vue常用指令插值表达式在dom标签中, 直接插入内容又叫:声明式渲染/文本插值语法: {{ 表达式 }}<template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div></templa原创 2021-10-26 19:28:13 · 383 阅读 · 0 评论 -
vue - 修饰符.native 与修饰符.sync
<my-com @click="hClick"></my-com>提问:对于自定义的组件,如果添加@click,在我们点击这个组件,这个回调会执行吗?答:不会!原因:自定义子内部并没有$emit这个click事件。对于内置dom元素(例如div, button,p,…) vue会自动绑定系统事件(click, mouseenter,…),而对于普通的自定义的组件要自己处理。...原创 2021-05-15 20:47:29 · 331 阅读 · 0 评论 -
Vuex
vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化vuex解决了什么问题如何确保在不同组件中的数据保持同步如何确保每次对于数据的修改都是可追踪的举个例子一个户外商店有两名员工,张三和李四,在一天的早上,他们分别对帐篷的数量做了一次盘点,发现一共有三个帐篷可供出售,俩个人在商店里度过了一天,张三卖出去俩个,他以为库存里还有一个,李四卖出去一个,他以为库存里还有俩个,而原创 2021-10-25 17:22:43 · 107 阅读 · 0 评论 -
Vue - MVVM设计模式
MVVM转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。MVVM,一种软件架构模式,决定了写代码的思想和层次M: model数据模型 (data里定义)V: view视图 (html页面)VM: ViewModel视图模型 (vue.js源码)MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DO原创 2021-06-24 16:14:22 · 530 阅读 · 0 评论 -
ESLint
什么是ESLinteslint的目标是提供一个插件化的 JavaScript代码规范检测工具。目标:全部开发人员编写javascript代码的时候保持一种统一风格。好处:提升项目开发速度、增强代码可维护性。见到这样子的错误, 证明你的代码不严谨应用官方文档开启eslint规范检测,具体在vue.config.js中配置lintOnSave: true, // 文件保存时(Ctrl+s)就做eslint规范检测//lintOnSave: false //关闭原创 2021-06-24 15:42:28 · 239 阅读 · 0 评论 -
Vue-cli脚手架
webpack自己配置环境很麻烦, 下载vue-cli包,用vue命令创建脚手架项目1. 什么是Vue-cli脚手架vue-cli是vue官方提供的一个全局模块包(带命令工具行的), 开箱即用, webpack零配置, 此包用于创建脚手架工程脚手架是为了保证各施工过程顺利进行而搭设的工作平台脚手架工程就是一套固定的文件夹+文件+配置的工程, 我们在此基础上开发业务在开发过程中,脚手架工具是有用的,开发完成(项目上线生产环境),它就没有用了2. vue-cli的好处和能力...原创 2021-06-24 15:08:21 · 1585 阅读 · 0 评论 -
什么是Vue
1. 什么是Vuevue官网 (作者: 尤雨溪)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动自底向上, 增量开发, 组件集合, 便于复用2. 为什么学Vue来一个小例子 - 把一个数组里数据铺设到li标签内原生js做法<ul id="myUl">原创 2021-06-23 21:07:42 · 358 阅读 · 0 评论 -
webpack
1. 什么是webpackwebpack就是一个打包工具。本身是 node的一个第三方模块包, 是一个用于现代 JavaScript 应用程序的 静态模块打包工具webpack官网2. webpack能做什么把很多文件打包整合到一起, 缩小项目体积, 提高加载速度3. webpack的使用步骤默认入口: ./src/index.js默认出口: ./dist/main.js3.1 基础使用初始化包环境yarn init安装依赖包yarn add webpack we原创 2021-06-23 16:32:46 · 163 阅读 · 0 评论