vue

大家可能知道常规组件传值，父传子使用子组件定义好的props值，子传父可以使用子组件里面定义的时间this.$emit(); 然后很多层的情况，一层一层慢慢传太慢，vue提供了依赖注入的钩子：provide/inject provide() { return { isTrue: true }; }, inject: { isTrue: { type: Boolean, default: false } }, 在某些情况下可以很好的传值； 顺便记录一下 两个缓存的钩子 activated /deactivated 进入页面和离开页面触发，提前keep-alive为true； ps：多写博客，坚持 来源： https://www.cnblogs.com/wangxiaoer5200/p/11763699.html

问题描述： Vue不允许js直接操作他的dom对象中的属性， 解决：通过js直接操作Vue还没赋值时的元素。即原先我们是直接把我们想要的值赋值给标签，现在我们需要先把值赋值给Vue,然后通过Vue再把值赋值给标签，这样，就避免了直接操作dom元素 代码： 第一步：在外面创建一个变量，并把值赋值给Vue 第二步：把返回来的值赋值给Vue的info,同时赋值给myModel(一定要赋值，因为我们要操作里面的元素，如果不赋值，会报空指针异常) 第三步：把我们想要改变的值赋值给myModel即可， 来源： https://www.cnblogs.com/xiaofengshan/p/12622883.html

安装vue脚手架 npm install @vue/cli 基于命令行创建：创建项目 vue create +项目名 基于可视化创建：vue ui 创建项目 打开浏览器选择配置创建（推荐） 项目结构： node_modules： 依赖包 public :静态资源 （首页，图标。。） src：源码 assets （样式，图片。。） component组件 view视图组件 package.json 包管理 postcss.config配置前缀等 babel.config.js：是项目中的babel配置文件 安装Element-UI 1.项目中运行vue ui 2.在面板中选择添加插件 3.安装vue-cli-plugin-element 来源： https://www.cnblogs.com/litiane/p/12622592.html

首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd 输入node -v 检查是否已经安装成功.如果会显示版本信息,说明安装成功! 现在就可以使用node中的npm包管理器来构建vue项目 第一步,由于npm直接下载资源网速会比较慢,可以用淘宝镜像来代替,运行命令 npm install -g cnpm --registry= https://registry.npm.taobao.org 之后就可以用cnpm 代替npm了 好了,到这开始下载安装vue-cli脚手架 运行命令cnpm install vue-cli -g //全局安装 这时候可以新建一个项目目录文件夹,然后进入该文件夹,shift+右击,可以直接选择运行命令行 然后就是初始化项目了 运行命令vue init webpack 项目名称(vuetest) 回车后可以看到下图 有关项目的基本信息填写,也可以直接回车不填. 到了install vue-router就要开始选择性的了,这里肯定要用到vue-router所以选择y 然后接下来JS语法检测,是否需要.在这里我提醒大家,刚开始我们尽量不要安装它,因为他会给你带来特别多的麻烦.我曾经2秒坑一次,所以选择N 之后默认就行! 接下来看到已经安装成功了

感谢参考原文- http://bjbsair.com/2020-03-27/tech-info/7202/ 前言 在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入 效果实例 Demo 简单了解Grid布局（网格布局） 什么是网格布局 CSS网格布局（又称“网格”），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来出了flexbox(盒子布局)，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们（flexbox与grid）能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块. grid 简单说说网格布局的属性 display: grid: 生成块级网格 inline-grid: 生成行内网格 subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。 grid-template-columns 设置网格列大小 grid-template-rows 设置网格行大小 grid-template-areas 设置网格区域 grid

换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化，如小写转大小，日期格式化等操作。官方对这个功能介绍也很简单，不过确实很简单，就一个函数而已。但最近在做两款APP时，遇到一些特殊的需求。然后就对vue中的filter一些用法结合源码好好的梳理了下。下边我们以一个日期格式化展开讨论。本文配套的demo可以微信关注公众号【小院不小】回复vuefilter获得。 1. 定义一个日期格式化函数 都9012了，我们就采用 ES Module的写法，在vue初始化的项目src的文件中新建一个filters文件夹，并在其中添加DateFmt.js文件，代码如下 // wx:46488492 export function DateFmt(date, fmt) { if (date == null) return null; var o = { "M+": date.getMonth() + 1, // 月份 "d+": date.getDate(), // 日 "h+": date.getHours(), // 小时 "m+": date.getMinutes(), // 分 "s+": date.getSeconds(), // 秒 "q+": Math.floor((date.getMonth() + 3) / 3), // 季度 "S": date

Vue单文件组件 webpack中配置vue组件的加载器 npm i vue-loader vue-template-compiler -D webpack.config中添加vue-loader的配置 const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ //...其他规则 {test:/\.vue/, loader:'vue-loader'} } ] } plugins: [new VueLoaderPlugin()] 2.Webpack项目中使用vue 3.打包发布 packge.json中配置 "build": "webpack -p" //打包指令 来源： https://www.cnblogs.com/-constructor/p/12617259.html

//html <div id="app"> 　　　　<input type="text"v-model="msg" style="width:100%"> </div> //script <script> 　　var vm = new Vue({ 　　　　el:'app', 　　　　data:{ 　　　　　　msg:'点击一下' 　　　　} 　　}) </script> 说明： v-bind只能实现数据的单向绑定 从model 自动绑定到 view中，无法实现数据的双向绑定 v-model指令可以实现 表单元素和model中数据的双向绑定 v-model只能运用在表单元素中，即除了能够实现数据从model渲染到到view，也能实现从view中道model中去 效果： 页面渲染完成之后，会有一个点击一下 和一个input，input的内容是点击一下 修改input中的值，页面上的点击一下 会随着input内容的变化而变化 来源： https://www.cnblogs.com/xuchao0506/p/10805269.html

数据监听用于监听内存变量值的变化，当值变化时做一些处理。 比如将搜索框绑定一个双向绑定一个变量，搜索框的内容改变时，提供对应的预选项； 比如选择地区，省份双向绑定一个板顶当选择的省份变化时，列出的该省下辖的地区也要对应发生改变。 watch是监听单个单个变量值的变化，computed是同时监听多个变量值的变化。 watch 监听单个变量值的变化 　　 <div id="app"> <input type="text" name="" v-model="content" /><br /> <!--双向绑定一个变量--> </div> <script> new Vue({ el:'#app', data(){ return { content:'' //需要给变量赋初值 } }, watch:{ //注意写法，watch后面直接冒号，{}表示一个对象 // 定义一个变量监听，watch中也只能顶一个 content(newVal,oldVal){ //要监听的变量(新值,旧值){ },参数名任意，但依次是新值、旧值，顺序是固定的 console.log(newVal,oldVal); if(newVal=='love'){ alert("the content is love"); } } } }); </script> watch的深度监听 如果监听的是对象、数组这种复杂类型的变量

当前前端三大框架(vue、react和angular)，除了vue之外，国内用得最多的就是react了，之前一直对其实现原理比较好奇，在花了很多时间深入研究了其源码实现后，本篇开始记录一下 同样的功能,用vue和react都能实现，相比较vue,react的学习门槛比较高，但是好处是它非常灵活，执行的效率更高(用到了很多新的技术)，我个人觉得react的代码和vue的代码就像linux和windows，前者很注重javascript功底(类似linux的shell命令)，后者有很多现成的html扩展标签指令( v-for、v-if等，类似windows的图形界面)，所以如果一个人的js语言研究得比较深入，和一个刚刚入门js语言的程序员来说，用React实现了同样的需求，敲出来的代码质量会差很多的 react更加的纯粹，这里的纯粹指的是什么的，在react内部，jsx模板经babel转化后是一个对象，所有的操作都是基于这个对象和其对应的fiber结构来操作的。 vue和react有许多共同点，比如: 都使用了虚拟DOM 更新时都使用了diff算法进行了优化 react和vue的不同之处如下 writer by:大沙漠 QQ:22969969 vue框架 react框架 实现原理 将模板转化成一个render函数来执行 将每个节点转化为fiber对象,最终形成一个fiber树结构