前端重学之路
文章平均质量分 52
在具有3年的前端工作经验之后,对学过的前端内容总结归纳,对未知内容深度学习
kuke_kuke
想要成为一名优秀的、卓越的攻城狮
展开
-
Vue正式篇(四)理解Vue设计思想(二)
Vue中的数据响应化目标代码kvue.html<div id="app"> <p>{{counter}}</p></div><script>const app = new Vue({ el: '#app', data: { counter: 1 },})setInterval(() => { app.counter++}, 1000)</script>原创 2021-02-08 08:38:16 · 394 阅读 · 0 评论 -
Vue正式篇(四)理解Vue设计思想(一)
理解Vue的设计思想MVVM模式MVVM框架的三要素:数据响应式、模板引擎及其渲染数据响应式: 监听数据变化并在视图中更新Object.defineProperty()Proxy模板引擎: 提供描述视图的模板语法插值:{{}}指令:v-bind, v-on, v-model, v-for, v-if渲染: 如何将模板转换为html模板=> vdom => dom数据响应式原理数据变更能够响应在视图中,就是数据响应式。vue2中利用Object.definePr原创 2021-02-08 08:36:01 · 447 阅读 · 0 评论 -
Vue正式篇(三)全家桶Vuex
Vuexvuex集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以可预测的方式发生变化。vue add vuex核心概念state状态、数据mutations更改状态的函数actions异步操作store包含以上概念的容器状态-statestate保存应用状态export default new Vuex.Store({ state: { counter: 0 }})状态变更-mutationsmutations用于修改状态,store.jsexport def原创 2020-09-20 20:22:42 · 478 阅读 · 0 评论 -
Vue正式篇(二)全家桶vue-router
vue-routerVue Router是Vue.js官方的路由管理器。它是Vue.js的核心深度集成,让构建单页面应用变得易如反掌。安装:vue add router核心步骤:步骤一:使用vue-router插件,router.jsimport Router from 'vue-router'Vue.use(Router)步骤二:创建Router实例,router.jsexport default new Router({...})步骤三:在根组件上添加该实例,main.jsimp原创 2020-09-20 18:43:56 · 219 阅读 · 0 评论 -
Vue正式篇(一)组件化
组件化Vue组件系统提供了一种抽象,让我们可以使用独立可复用的组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率,利于复用,简化调试步骤,提升项目可维护性,便于多人协同开发。组件通信常用方式propseventbusvuex自定义事件:边界情况– $parent– $children– $root– $refs– provide/inject非prop特性– $attrs– $listeners注:事件的派发和监听是同一个。props父原创 2020-09-20 18:43:02 · 369 阅读 · 0 评论 -
Vue正式篇(一)番外 v-model和:model的区别?
v-model和:model的区别?v-model通常用于input的双向数据绑定<input v-model="parentMsg">,也可以实现子组件到父组件数据的双向数据绑定。父组件:<div> <input type="text" v-model="msg"> <child v-model='msg'></child></div>子组件:Vue.component('child', { props: ['va原创 2020-08-30 18:32:31 · 311 阅读 · 0 评论 -
Vue预习篇(十)vuex
Vuex安装vue add vuex起始State将应用全局状态定义在state中state: { isLogin: false}Mutation修改state只能通过mutationmutations: { login(state) { state.isLogin = true }, logout(state) { state.isLogin = false }}获取和修改状态使用store.state获取状态<button @click="logi原创 2020-08-30 15:17:42 · 314 阅读 · 0 评论 -
Vue预习篇(九)路由vue-router
7、路由安装vue add router起步路由规划、配置,router/index.js商品列表(home) - 商品管理(about)路由出口、导航,App.vue<nav> <router-link to="/">首页</router-link> <router-link to="/about">管理</router-link></nav><router-view></router-view原创 2020-08-30 13:25:58 · 207 阅读 · 0 评论 -
Vue预习篇(八)Vue Cli
Vue Cli快速原型开发你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发。原创 2020-08-30 13:24:11 · 252 阅读 · 0 评论 -
Vue预习篇(七)5、插件
5、插件插件通常用来为Vue添加全局功能。插件的功能范围一般由下面几种:添加全局方法或属性。添加全局资源:指令/过滤器/过渡等。通过全局混入来添加一些组件选项。添加Vue实例方法,通过把它们添加到Vue.prototype上实现。一个库,提供自己的API,同时提供上面提到的一个或多个功能。插件声明Vue.js的插件应该是暴露一个install方法。这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象:MyPlugin.install = function(Vue, opt原创 2020-08-30 13:22:08 · 246 阅读 · 0 评论 -
Vue预习篇(七)4、混入
4、混入混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function() { this.hello() }, methods: { hello: function() { console.log('hello f原创 2020-08-30 13:21:25 · 132 阅读 · 0 评论 -
Vue预习篇(七)3、渲染函数
3、渲染函数Vue推荐在绝大多数情况下使用模板来创建你的HTML。然而在一些场景中,你真的需要JavaScript的完成编程的能力。这时你可以用渲染函数,它比模板更接近编译器。原创 2020-08-30 13:21:05 · 415 阅读 · 0 评论 -
Vue预习篇(七)2、自定义指令
2、自定义指令除了核心功能默认内置的指令(v-model和v-show),Vue也允许注册自定义指令。注意,在Vue2.0中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通DOM元素进行底层操作,这时候就会用到自定义指令。范例:输入框获取焦点Vue.directive('focus', { inserted(el) { el.focus() }})使用,cource-add<input v-focus>范例:按钮权限控制const role = '原创 2020-08-30 13:19:55 · 148 阅读 · 0 评论 -
Vue预习篇(七)1、过滤器
1、过滤器Vue.js允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和b-bind表达式(后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:<!-- 在花括号中 -->{{ message | capitalize }}<!-- 在`v-bind`中 --><div v-bind:id="rawId | formatId"></div>范例:course原创 2020-08-30 13:19:05 · 141 阅读 · 0 评论 -
Vue预习篇(六)过渡及动画
1原创 2020-08-30 13:18:29 · 170 阅读 · 0 评论 -
Vue预习篇(五)Vue必会API
1、数据相关APIVue.set向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。使用方法:Vue.set(target, propertyName/index, value)范例:批量设置商品价格<template> <!-- 添加批量价格更新 --> <p> <input v-model.number="price"> <button @click="batchUpd原创 2020-08-27 21:15:53 · 275 阅读 · 0 评论 -
Vue预习篇(四—番外篇).sync修饰符
理解vue中的 .sync 修饰符.sync是vue中用于实现简单的“双向绑定”的语法糖。vue的prop是单向下行绑定:父级的prop的更新会向下流动到子组件中,但是反过来不行(vue的单向数据流)。可是有些情况,我们需要对prop进行“双向绑定”。这个时候,就可以用.sync来解决。.sync用法<text-document :title.sync="doc.title"></text-document>// 当子组件需要更新 title 的值时,它需要显式的触发一个原创 2020-08-27 21:03:50 · 162 阅读 · 0 评论 -
Vue预习篇(四)组件化
组件化Vue组件化的理解组件化是Vue的精髓,Vue应用就是由一个个组件构成的。Vue的组件化涉及到的内容非常多,当面试时被问到:谈一下你对Vue组件化的理解。这时候有可能无从下手,可以从以下几点进行阐述:定义:组件是可复用的Vue实例,准确讲它们是Vue Component的实例,继承自Vue。优点:复用性、可维护性和可测试性。使用场景:什么时候使用组件?以下分类可作为参考:通用组件:实现最基本的功能,具有通用性、复用性,例如按钮组件、输入框组件、布局组件等。业务组件:它们完成具体业务,具原创 2020-08-27 20:58:25 · 161 阅读 · 0 评论 -
Vue预习篇(三)生命周期
生命周期图使用场景分析beforeCreate(){} // 执行时组件实力还未创建,通常用于插件开发中执行一些初始化任务created(){} // 组件初始化完毕,各种数据可以使用,常用于异步数据获取beforeMounted(){} // 未执行渲染、更新,dom未创建mounted(){} // 初始化结束,dom已创建,可以用于获取访问数据和dom元素beforeUpdate(){} // 更新前,可用于获取更新前各种状态updated(){} // 更新后,所有状态已是最新原创 2020-08-27 20:51:07 · 281 阅读 · 0 评论 -
Vue预习篇(二)计算属性和监听器
2、计算属性和监听器const app = new Vue({ computed: { total() { return this.courses.length + '门' } }, // 下面这种不能生效,因为初始化时不会触发 // watch: { // couses(newVal, oldVal) { // this.totalCount = newVal.length + '门' // } // } watch: { courses: { immedia原创 2020-08-27 20:47:08 · 195 阅读 · 0 评论 -
Vue预习篇(一)模板语法
预习1、模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。文本<p>{{ message }}</p>Html<div id="app"> <div v-html="message"></div></div> <script>new原创 2020-08-27 20:46:07 · 245 阅读 · 0 评论