vue

箭头函数的this总是指向词法作用域，也就是外层调用者obj。 外层调用者的全局变量必须为 var，否则会出错。 <script> let num = 100; // let 声明的全局变量，Vue对象里面的箭头函数无法通过this来获取 var num2 = 200; let vue = new Vue({ el:"#app", data:{ num:0 }, methods:{ add: ()=>{ //这里本想拿 data:{num:0},里面的 num 0 // 但是得到的是NAN，即也拿不到 let num = 100 this.num++; // 200，可以拿到 var num2 = 200; this.num2++; } } }); </script> 来源： CSDN 作者： 91奔跑的蜗牛 链接： https://blog.csdn.net/xldmx/article/details/104648169

先来个最终效果 代码： 　　template代码： <template> <div class="main"> <div class="title">评论</div> <div class="comment-form"> <div class="avatar-box"><el-avatar class="header-img" :src="defaultAvatar"></el-avatar></div> <div class="form-box"> <div class="input-box" > <div tabindex="0" contenteditable="true" id="replyInput" spellcheck="false" placeholder="输入评论..." class="reply-input replyInput" @focus="showReplyBtn" @input="onDivInput($event)"></div> </div> <div class="action-box"> <div class="emoji emoji-btn"> <div class="emoji-box"> <span class="replyInput" @click="showEmoji($event)" v-clickoutside=

页面中有弹框的时候就会出现对弹框中的内容进行操作的情况，但是在操作之后关闭弹框后再次打开，弹框中还是之前的操作过的页面，我们希望弹框是进行了重新初始化的， elementui的form组件中提供了一个resetFields的方法可以重置form表单的内容 但是当弹框中含有我们自己封装的组件的时候就没有类似的方法去进行重置了，所以需要对弹框进行新的初始化 在点击修改的时候设置组件的v-if值为true，并在$nextTick中进行初始化后要进行的变化，在关闭弹框的时候将v-if的值设置为false， 这样就能实现组件的重置了 来源： https://www.cnblogs.com/wyongz/p/12407850.html

学还是要学的，用的多了，也就有更多的认识了，开发中遇到选择的时候也就简单起来了。 本文作者也做了总结： 如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue 如果你喜欢简单和“能用就行”的东西，请使用Vue 如果你的应用需要尽可能的小和快，请使用Vue 如果你计划构建一个大型应用程序，请使用React 如果你想要一个同时适用于Web端和原生App的框架，请选择React 如果你想要最大的生态圈，请使用React 如果你已经对其中一个用得满意了，就没有必要换了 2016年，React在Web端和移动端都实现了迅速的成长，稳稳地领先于其主要竞争对手Augular，巩固了其作为前端框架之王的地位。 但是Vue在这一年里的表现也可谓同样的耀眼。Vue.js 2.0 的发布在整个 JavaScript 社区都引起了巨大反响，这一点仅从它在Github中涨了25,000颗star，就足以得到证明。 不得不说React和Vue的使用范围是相似的：都是基于组件化的轻量级框架，都专注于构建用户界面的视图层；都既可以用于简单的项目，也适用于使用前沿技术的大规模复杂项目。 因此，很多Web开发者都难免纠结到底要从中选择哪一个框架。这两者中能否分出个高下好坏？或者它们各自有哪些优缺点是需要我们注意的？还是说它们实际上差不多，用谁都一样？ 两种框架，两个拥护者 在这篇文章中我想用尽可能公平

文章目录 表格中使用switch 侧边导航设置成路由 表格中使用switch 侧边导航设置成路由 来源： CSDN 作者： 一个爬坑的Coder 链接： https://blog.csdn.net/qq_39583550/article/details/104631015

什么是Vue 前端框架的三大马车（按时间顺序）： angular 谷歌公司 m(数据) v(视图) c(控制器) 双向数据绑定 react facebook 视图层的框架view 虚拟dom vue 尤玉溪 双向数据绑定+虚拟dom 是一套用于构建用户界面的渐进式框架 入门难度最低 为什么要学习Vue 高效 运行效率高 采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高 开发效率高 采用了组件化开发 将开发者的精力从dom操作解放出来，转移到数据操作上 dom操作极其影响效率，是制约效率的关键，要减少dom 修改内存中的数据（变量）消耗的资源远远小于dom操作 虚拟dom 就是一个内存中的一个对象 该对象有一个特点和dom有相同的结构 爱上Vue 一旦熟悉，就情不自禁的用Vue,会抛弃原来二阶段的写法（直接操作dom） Vue的实例化 ① /*1、下载引入 2、找到一个dom元素 这个dom元素要被vue控制 3、在js中实例化Vue*/ < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > 1 vue的实例化 < / title > < script src = '../vue

Vue的安装 一下内容都是来自乐优商城笔记 安装node环境：: link . node自带npm，在控制台输入 npm -v查看版本号 npm install nrm -g 安装nrm nrm ls 查看npm 的仓库列表，带*的就是当前选中的镜像仓库 nrm use taobao 指定要使用的镜像源 nrm test npm 测试速度 下载vue https://github.com/vuejs/vue 在idea中点开Terminal控制台，进入到要编写的项目 npm init -y 初始化 npm install vue --save 安装vue < body > < div id = "app" > < h2 > { { name } } < / h2 > < div > < / body > < script scr = "node_modules/vue/dist/vue.js" > < / script > < script > var app = new Vue ( { el : "#app" , //el就是该vue实例要渲染的页面元素 data : { name : "乐优商城" //要渲染的数据 } } v-model=“name” 这个是数据绑定 @click="" 点击事件 钩子函数 beforeCreated:Vue实例化的时候调用 created

一、从 数据 到 虚拟dom vue和react都是数据决定虚拟dom，进而决定ui。但是二者的实现思路不一样。 1.vue的思路 捕获变量的赋值和取值操作，在赋值和取值操作中，利用发布--订阅模式更新虚拟dom，进而更新ui。 捕获变量的赋值和取值操作，又叫作 数据劫持 。 如何捕获变量的赋值和取值操作呢？ let person = { name: "lrx" }; Object.defineProperty(person,'name',{ set:function(value){ name = value; console.log('每次执行对name的赋值操作，我都会执行'); }, get:function(){ console.log('每次执行对name的取值操作，我都会执行'); return name; } }) person.name = '良纵'; 2.react的思路 react的数据更新是用setState来做的，利用setState对数据进行赋值的时候，会触发domdiff，在根据 shouldComponentUpdate 返回值是true/false来决定要不要更新虚拟dom。 所以，vue的更新是添加监控的方式，性能优化是由框架源码去做的；react的性能优化交给了开发者（shouldComponentUpdate），所以在开发大型应用时

v-model:在表单控或组件中创建双向绑定 v-for(简单理解就是数据循环)基于元数据多次渲染元素或模板块。 基础模式： <div v-for="item in items" :key="item.id"> {{ item.txt }} </div> 注：必须要有唯一的key，当和v-if一起使用时，v-for的优先级比v-if的高，但是不建议在同一标签上是有。 v-show与v-if区别： v-show：在元素中添加display，隐藏DOM元素。 v-if：直接删除DOM元素。DOM元素中有接口时，当v-if的值为true时，会请求接口。 v-bind绑定属性：绑定方式：v-bind:class或:class 来源： CSDN 作者： JKING_ 链接： https://blog.csdn.net/JKING_/article/details/104641606

参数： -g 表示全局安装。不加的话，就是当前目录安装。 1. 安装了可以略过 yum install gcc gcc-c++ 2.别的博客说yum安装的版本会和开发版不统一，下载node.js https://nodejs.org/dist/可以看到如下列表选择版本链接 我新建的文件夹下载到/home/download .命令 mkdir home mkdir download wget https://nodejs.org/dist/v11.10.0/node-v11.10.0-linux-x64.tar.gz 3、解压tar -zxvf node-v11.10.0-linux-x64.tar.gz 重新命名 mv node-v11.10.0-linux-x64 node-v11 并将文件移到了外面地址是 /home/node/node-v11 建立软链接 3.1 不建立软链接也可以修改/ext/profile,两个取其一就可以了不用都改 # 修改环境变量 vi /etc/profile #set for nodejs export NODE_HOME=/home/node/node-v11 # node所在路径,你自己解压在哪写哪 export PATH=$NODE_HOME/bin:$PATH 保存退出，然后让命令生效输入 source /etc/profile 4