打开Vue的正确姿势
文章平均质量分 89
Vue得中难度讨论
snakeZix
师大一码农
展开
-
vue-cli-v4.x从零开始
从零开始安装npm install @vue-cli -g初始化创建项目vue create 项目名//注意它会自动的创建对应的目录选择配置 按键盘的上下键选择 “Manually select features” 回车确定按空格键表示选择该插件,选择如图所示插件,并回车确定按照如图选择,回车安装cd 项目名 , npm run serve 运行项目看src下是主要编写代码的目录解析一下目录首先是最外层最为层目录解释原创 2020-07-29 20:11:53 · 208 阅读 · 0 评论 -
Vue环境搭建(node & npm )
如何快速搭建nodejs环境下载nodejs(最好去官网)下载稳定版, 安装完成后打开命令行 cmdnpm -v //查看当前npm 版本,并验证是否安装成功新建存储模块文件夹先在node安装目录下 新建 node_global 和 node_cache 文件夹node_global 是以后npm i -g [name] 安装的目录cache 是缓存配置npm config配置 :npm config set prefix ['node_global模块路径']npm confi原创 2020-07-27 18:34:16 · 127 阅读 · 0 评论 -
vue-cli-v4.x开发配置
Vue-cli4安装vue create pro-name => cd pro-name => npm install 按住空格键选择或者取消选择,回车确认配置vue ui使用首要任务就是先排坑根目录下新建一个配置文件vue.config.js(它是一个可选的文件,一般Vue UI创建的都自带,npm就默认没有,npm run serve会自动的加载该文件的配置)怎么做环境变量的配置const path = require('path')function resolv原创 2020-07-27 18:14:55 · 344 阅读 · 1 评论 -
vue-cli-v3.x开发配置
vue的初步配置及其扩展版本是@vue/cli => v2.x版本配置打包环境在build目录下的utils.js大约51行 (版本请参考vue-cli入门)if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' publicPath: '../../' // + })} else { return原创 2020-07-27 18:13:16 · 177 阅读 · 1 评论 -
Vue.js呼叫请回答
Vue.js呼叫请回答注意:该栏目全部一句Vue.js官网的教程2.x编写script引入<!-- 生产环境(上线) --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script><!-- 使用最新版本 开发版 供学习 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script原创 2020-07-27 18:08:01 · 181 阅读 · 0 评论 -
Vuex的介绍和使用
Vuex的介绍和使用本文按照Vuex官网参考编写,写的是自己对其的理解,当然官网已经写的很好了,只是有些东西还是不太好理解,希望用自己的话解释一遍Vue的单向数据流单向数据流:在每个Vue的实例里,(数据源) State => (数据源更新触发视图更新) view => (用户操作视图) Actions => (操作行为改变对应数据源) State什么是Vuex由于Vue的单项数据流在处理实例之间的通信比较复杂,比如多个组件依赖同一状态时,当某一个组件状态改变时关联的多个组原创 2021-01-28 14:35:07 · 210 阅读 · 0 评论 -
JSX in Vue
如果你写过React的JSX,那么对你来说,学的会非常快,但是由于所谓的JSX都是通过解析模板调用createElement函数,最好生成虚拟DOM。Vue的createElement和React的createElement显然不同,所有对于一些问题的需要特殊处理安装vue-cli-v4.x已经直接支持写JSX了,不需要配置官方文档,请仔细阅读vuejs/jsxCreateElemnet了解1. React中的createElemnet每个 JSX 元素只是调用React.creat.原创 2020-08-15 19:08:03 · 262 阅读 · 0 评论 -
打开Vue的正确姿势栏目总结篇
打开Vue的正确姿势栏目总结篇聊聊我学习Vue的故事第一次接触这个框架的时候觉得不是特别难,以前有过thinkphp5框架的基础(是一个优秀的框架奈何文档写的太简略了,新手不是特别好深入)。开始只是学点基础的吧,为了做项目学了三天直接上手,还好当时项目不难,基本是写静态的动画写,渲染数据层面少但是写完了就感觉没有用到Vue,或者真正用的的地方太少。后来慢慢的做,了解数据渲染的各种坑,自己写过各类的功能,什么分页,表格,还有一些小demo之类的。Vue官网文档香已经不知是多少遍从新看Vue文档了,V原创 2020-07-30 18:17:23 · 154 阅读 · 0 评论 -
Vue之插件和库(含loading插件实战)
插件和库(含loading插件实战)声明:这一节可能有点难理解,建议大家先了解$mount和extend的Vue静态属性也可以参考这篇文章插件和库几乎是开发大型Vue必备,小demo锻炼语法能力,大项目考究封装和可维护性等。集成插件和库几乎是必须的。开发插件怎么样的才叫插件开发,安装完插件表现为什么呢?你可以想象一些vue-router,在没有安装之前是没有route或者route或者route或者router这两个实例属性的,这其实就是注入绑定MyPlugin.install = fun原创 2020-07-30 17:04:49 · 396 阅读 · 1 评论 -
Vue挂载(mount)和继承(extend)
Vue.extend && Vue.$mountVue.$mount 挂载//index.html文件<body> <div id="app"></div></body>//index.js文件//1. 先看看普通的绑定new Vue({ el: '#app', // el: document.getElementById('app') template: `<div id="app"> 如原创 2020-07-30 11:48:20 · 2641 阅读 · 0 评论 -
Vue自定义指令 && 过滤器
自定义指令 && 过滤器这些东西都和component差不多过滤器Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示{ template: `<div> <!-- 在双花括号中 --> {{ message | capitalize }} <原创 2020-07-29 17:41:16 · 120 阅读 · 0 评论 -
Vue之动态事件绑定
动态事件绑定什么都有动态的,动态的值,动态的属性,动态响应数据,自然少不了动态的事件绑定什么是静态的呢?在模板语法中template的标签绑定v-on:eventName-“method”$onthis.$on(eventName, eventHandler) 绑定组件,动态侦听事件{ created() { this.$on('gg', this.gg) //注意这个this.gg 它只是一个函数,但是有意思的是,在$on的內部的回调里 this.gg.call(this)原创 2020-07-29 15:14:07 · 4316 阅读 · 1 评论 -
掌握vue核心概念之响应式数据
掌握vue核心概念之响应式数据本篇文章主要讲的是vue的数据更新,要怎么去做,但是我并不会涉及原理之类的去讲(也就数据代理,递归处理对象,绑定函数更新)只是告诉萌新如何去用,作为一个初学者,我仍然建议先了解一个大概,做到第一阶段的能用,第二阶段埋坑,第三阶段的了解原理,第四阶段的自己工具option.data为什么会响应,注意是将option的data函数调用或data值,遍历解析属性,代理挂载到vm上(挂载的是对应属性的getter和setter方法),在实质上,vm只是有一根通向option的原创 2020-07-29 14:24:45 · 228 阅读 · 1 评论 -
掌握vue核心概念之组件
掌握vue核心概念之组件注册组件//推荐驼峰命名 或者 使用 '-' 还是看个人看法习惯const GlobalComponent = { data: ()=>({ //注意data除了根组件,子组件都要函数返回对象 }), template: '<div>这是一个全局组件</div>'}const LocalComponent = { data: ()=>({ //注意data除了根组件,子组件都要函数返回对象 }), tem原创 2020-07-28 14:18:06 · 208 阅读 · 2 评论 -
Vue事件处理
事件处理在template中,直接通过attribute键值对方式就可绑定事件,不需要再去获取DOM,当然着其中真正绑定还是VM在做,最关键的在于,如果一个VM销毁,它会自动的解绑事件。如果你做过登入注册的登入和退出登入的切换,你一定能感受的vue的强大。监听事件v-on 事件监听围绕这一指令展开:可直接在绑定内容是个JS代码执行,该内容和模板语法一致,注意是一个沙箱,扫描到的变量都会去vm实例上找,或者内置函数(Date等)export default { data() {原创 2020-07-28 02:28:26 · 208 阅读 · 1 评论 -
vue之条件和列表渲染
条件和列表渲染极大的解放双手,如果你有用过纯粹的JS去写数据列表渲染(你可能会说,也不是特别麻烦啊),但是一定没有这么简单明了,更甚至容易懂,这也是为什么说Vue相对更加简单,它以屏蔽底层复杂的逻辑实现,以抽离通用,一旦抽离意味着简单化。如果你写过react一定会直呼内行,vue封装的完整性。v-for && v-idv-for 循环数组或者对象,这其实不用说太多,注意一些细节,key值的榜单,尽量不是index<!-- 1. 推荐遍历对象用in,遍历数组用of2. (it原创 2020-07-27 18:40:19 · 269 阅读 · 1 评论 -
vue之计算属性和侦听器
计算属性和侦听器为什么需要计算属性,在Vue的模板解析其实有相当多的不便,只能解析挂载到vm的属性,这些东西要吗是data通过代理实现,但是如果需要对数据进行复杂的处理,那么在模板语法用javascript是非常不便的。如果你学过react你就知道,其实计算属性相当于在rander函数内定义的变量,这个变量也是通过表达式计算的结果,可能包括state的属性,每次渲染(调用rander函数)的时候都肯定会重新计算其中的值。这其实也在一方面说明了为什么侦听属性和方法会有缓存的区别。说了这么多那,写原创 2020-07-27 18:39:25 · 115 阅读 · 1 评论 -
vue之模板语法
模板语法模板语法是 ViewModel将数据以何种形式渲染带View层的规则插值一、标签内容<!-- msg必须是vm的属性(绑定data就是响应数据),不然无法渲染 --><span>{{msg}}</span><span v-html="htmlData"></span>二、标签attribute如果 dynamicId 的值是 null、undefined 或 false,则 id attribute 甚至不会被包含在原创 2020-07-27 18:38:15 · 122 阅读 · 1 评论 -
Vue之MVVM
MVVMVue.js等前端框架,通过MVVM,解放了双手渲染更新DOM。以前的Jq或者原生的JS都是获取DOM和操作本文主要基于掘金的一篇 MVVM模式介绍 加之自己的理解M-V-MVM (数据模型)包含业务和验证逻辑的数据模型V (UI视图)定义屏幕中视图结构,布局,外观VM (VievModel)M <==> V 之间的使者,帮忙处理View的全部业务逻辑MVCview 在 controller的顶端,而model在controller的底部controll原创 2020-07-27 18:35:39 · 226 阅读 · 0 评论