vue
前端老司机带你光速入门vue
前端爆米花
快乐代码,快乐生活。
展开
-
app架构及技术选型
app架构及技术选型前端nvue后端及服务器数据库前端nvue采用native vue技术,将编写的vue代码编译为原生的android和iOS,性能与原生开发一致。后端及服务器数据库原创 2020-11-08 10:31:38 · 726 阅读 · 0 评论 -
uniapp开发app
uniapp开发app项目配置多段调试方法nvue配置css配置项目配置多段调试方法链接nvue配置在manifest.json中的app-plus添加"app-plus": { "renderer": "native", //App端纯原生渲染模式 "nvueCompiler": "uni-app", //启用 uni-app 模式 // ................}css配置在app.vue中配置引入全局样式<style> /*每个页面公共css */原创 2020-11-07 19:38:31 · 865 阅读 · 0 评论 -
vue-cli4中webpack配置
创建与package.json同级的vue.config.js文件。publicPath:项目在子路径运行一般运行在根路径https://www.my-app.com/,如果想运行在子路径https://www.my-app.com/my-app/。设置 publicPath 为 /my-app/。有些场景不适用当使用基于 HTML5 history.pushState 的路由时;当使用 pages 选项构建多页面应用时。// 生产环境设在子路径,开发环境设在根路径module.expo原创 2020-07-11 06:55:47 · 5089 阅读 · 0 评论 -
vue核心原理解析
1. MVVM原理vue的精髓在于组件化和数据驱动视图。组件化之前就有,比如php等语言,vue使用了组件化思想。进行了数据驱动视图的创新。之前的前端操作是静态渲染,要操作dom修改视图。数据劫持的优势无需显示调用,直接通知变化并驱动视图,react需要显示调用setState。可精确得知变化数据,减少diff的额外开销。data监听原理Vue2核心api:Object.defineProperty无法原生监听数组变化,vue对数组常用的8种方法进行hack,不过其他方法无法监原创 2020-07-11 06:54:58 · 8015 阅读 · 0 评论 -
vue基础及高级用法(二)
6. Vue.nextTickVue.nextTick 会在dom渲染之后出发,以获取最新dom节点Vue 异步队列使用 Promise.then、MutationObserver 和 setImmediate,如果不支持会采用 setTimeout(fn, 0) 代替。this.$nextTick( () => {// code})使用 Vue.nextTick 异步渲染的好处汇总data的修改,一次性更新视图。减少dom操作次数,提高性能。7. ref属性在DOM原创 2020-07-11 06:53:55 · 224 阅读 · 0 评论 -
vue基础及高级用法(一)
1. 插值表达式{{xxx}}的形式,可以是值,也可以是表达式(不能是 js 语句,比如if、for)<div id="app"> <p>{{msg}}</p> <p>{{ok? '1':'2'}}</p></div>var app = new Vue({ el: '#app', data: { msg: 'Hello Vue!', ok: true }})展示效果2. 指原创 2020-07-11 06:52:09 · 790 阅读 · 0 评论 -
移动端项目常见适配
vue视口设置在vue项目的index.html中设置,index.html一般在根目录或public下解决click事件0.3秒延迟问题安装fastclicknpm i fastclick --save在main.js中引入和使用import fastClick from ‘fastclick’fastClick.attach(document.body)...原创 2020-03-20 09:31:55 · 357 阅读 · 2 评论 -
vue非父子组件间的传值
vue非父子组件传值的基本语法创建一个新的vue对象var newvue = new Vue()触发事件newvue.$emit('自定义事件名', 参数)监听事件newvue.on('自定义事件名', 触发方法名)销毁事件newvue.off('自定义事件名')案例放在html页面上即可显示,注意要引入vue<!DOCTYPE html><htm...原创 2020-03-17 13:17:54 · 3185 阅读 · 0 评论 -
vue父组件向子组件传值
非常简单,相信大家一看就懂复制到浏览器即可使用,注意别忘了引入vue哦<div id="app"> <div>{{pmsg}}</div> <menu-item :title='ptitle' :content='ptitle'></menu-item></div><script type="te...原创 2020-03-16 21:26:47 · 2183 阅读 · 2 评论 -
vue子组件给父组件传值
子组件写法this.$emit(‘fa’, this.num)父组件写法<button-add @fa=“getNum”><div id="app"> <div>{{sonNum}}</div> <!-- vue定义好的组件,可以重复使用·--> <button-add @fa="getNum"...原创 2020-03-16 21:19:51 · 2241 阅读 · 0 评论 -
vue全局组件与局部组件
今天带领大家敲一个vue组件小案例vue对组件的定义:组件是可复用的 Vue 实例组件之间是互不影响的,一个组件的崩溃,并不会影响整个项目的运行。<div id="app"><!-- vue定义好的组件,可以重复使用·--> <button-add></button-add> <button-add><...原创 2020-03-15 17:14:27 · 3002 阅读 · 0 评论 -
vue基础语法小案例
本节课带着大家做个vue小案例,包含很多vue常用语法,简单实用完成效果如下图,当在input框输入值之后,点击submit按钮,即可添加一个 li标签<div id="app"><!-- v-model 表示双向绑定--> <input type="text" v-model="ivalue"><!-- @click 表示点...原创 2020-03-13 10:29:19 · 1602 阅读 · 0 评论 -
vue编写hello woeld
课程介绍此教程面向的是广大想了解和入门vue的朋友,让你用最快的时间,光速入门vue。话不多说,接下来带着大家用vue敲一个hello world首先打开vue的 官方文档,下载vue的开发版本<div id="app">{{content}}</div><!--引入vue--><script src="vue.js"></scr...原创 2020-03-12 10:31:34 · 3272 阅读 · 1 评论