![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
天天爱学Vue
itboy7
以梦为马,莫负韶华。
展开
-
Vue学习第五天:20选择何种模式的路由及底层原理
总结:Hash模式无法使用锚点定位(默认)。History模式需要后端配合,IE9不兼容(可使用强制刷新处理)。History模式浏览器路径没有#,并且可以使用锚点定位。通过Vue.util.defineReactive这个API将_route设置为响应式的。router-link、$router.push等等都会触发updateRoute,updateRoute会去改变_route,router-view根据不同的链接渲染不同的组件。...原创 2020-11-07 15:19:13 · 80 阅读 · 0 评论 -
Vue学习第五天:19Vue Router的使用场景
总结:路由其实说的就是路径。中后台都在使用vue-router。之前每访问一个路径都要刷新页面,很影响用户体验。单页面(SPA)开发模式,只需要访问一个页面就可以跳转不同的路径。监听URL的变化,并在变化前后执行相应的逻辑。不同的URL对应不同的组件。提供多种方式改变URL的API(URL的改变并不能导致页面的更新)。...原创 2020-11-07 15:00:51 · 206 阅读 · 0 评论 -
Vue学习第五天:18Vuex最佳实践
使用常量替代mutation事件类型。(有利于团队协作,常量语法高亮)Module(1)开启命名空间namespaced:true。(2)嵌套模块不要过深,尽量扁平化。(3)灵活应用createdNamespacedHelpers。(辅助函数)(4)import store from ‘./store’ 会自动引入store文件夹下的index.js。(5)将modules写成了module,半天找不到原因????。(6)actions中写ajax请求和业务逻辑。(每一个逻辑都是一个原创 2020-11-07 12:58:52 · 139 阅读 · 0 评论 -
Vue学习第四天:17Vuex核心概念及底层原理
min-vuex.js文件import Vue from 'vue'//默认参数function Store(option = {}) { //解构赋值 var { state = {}, mutations = {} } = option; //通过Vue将state设置为响应式数据 this._vm = new Vue({ data() { return { $$sta原创 2020-11-05 19:57:45 · 226 阅读 · 1 评论 -
Vue学习第四天:16如何在Vue中使用Vuex
main.js文件import Vue from 'vue'import Vuex from 'vuex'import App from './App.vue'Vue.use(Vuex)Vue.config.productionTip = falseconst store = new Vuex.Store({ state: { count: 0 }, mutations: { addCount2(state, n) {原创 2020-11-05 17:42:34 · 87 阅读 · 0 评论 -
Vue学习第四天:15为什么需要Vuex
总结:小型项目的状态管理可以使用provide和inject,但它们只能提供响应式数据。大型项目就需要系统的一个状态管理,并且对这个状态管理的要求不仅仅只是提供一个响应式数据就可以了,因此,学习使用vuex是很有必要的。...原创 2020-11-05 16:41:50 · 258 阅读 · 1 评论 -
Vue学习第四天:12常用高级特性provide和inject
跨组件通信总结:开发通用组件频率用的相当高。F组件若想和I组件进行通信,普通方式下需要通过$emit事件往父组件进行层层传递,A组件再通过属性往子组件进行层层传递,这种方式是很脆弱的,基于此,有了provide和inject。provide提供数据,inject注入数据。通过provide和inject,E组件通过层层冒泡的形式从A组件中取数据。E组件和F组件都从A组件取相同的数据,可以通过from的方式给数据起别名。provide直接提供this,this中的数据都是响应式的。若C组件原创 2020-11-05 09:02:46 · 305 阅读 · 0 评论 -
Vue学习第三天:11指令的本质是什么
总结:不建议使用v-html指令,有风险。使用v-pre指令的元素,该元素文本节点内的{{message}}不会被浏览器编译,原样输出{{message}}。使用v-once指令的元素,该元素文本节点内的{{message}}只会被浏览器编译一次,后续不会再改变。这个有利于性能优化,主要应用于论坛文章之类的静态页面。v-cloak指令只能在HTML文件中使用。(很少用)指令的本质其实就是js的语法糖,指令从template编译到render函数时,会把这些语法糖编译成js代码。通过自定义指令可原创 2020-11-04 20:40:02 · 266 阅读 · 0 评论 -
Vue学习第三天:10生命周期的应用场景和函数式组件
总结:钩子函数指的是Vue实例的创建、挂载、更新和销毁过程。创建、挂载和销毁过程只会执行一次,而更新过程会执行多次。mounted阶段主要进行异步请求、操作DOM、定时器等操作。beforeDestroy阶段主要进行定时器销毁等操作。函数式组件可以认为是一个简单的方法。借助函数式组件可以去做临时变量。遗留问题:函数式组件还是不太懂。...原创 2020-11-04 19:59:31 · 109 阅读 · 0 评论 -
Vue学习第三天:09合理应用计算属性和侦听器
<template> <div> 计算属性:{{fullName2}}<br /> <label>firstName:<input v-model="firstName"></label><br /> <label>lastName:<input v-model="lastName"></label><br />原创 2020-11-04 16:46:17 · 113 阅读 · 0 评论 -
Vue学习第二天:08如何触发组件的更新
Vue的响应式更新总结:绝对不要直接更改DOM。状态(data)是组件自身的数据。属性(props)是来自父组件的数据。原创 2020-11-03 19:06:52 · 342 阅读 · 0 评论 -
Vue学习第二天:07理解虚拟DOM及key属性的作用
总结:jQuery是通过事件直接操作DOM的,由于项目越来越大,事件和DOM的耦合度越来越大,项目维护和扩展不便,基于此,才诞生了Vue和React。Vue和React都是引入了一个数据中间层(State),通过事件操作数据,Vue底层将数据映射到DOM上,避免了事件直接操作DOM。Vue中数据的变化会影响DOM的更新,而DOM的更新是非常耗性能的,影响用户体验。数据的变化如何减少DOM的更新?基于此,有了虚拟DOM的概念。数据不会直接映射到DOM上,而是通过data+template形成一个DO原创 2020-11-03 18:07:39 · 181 阅读 · 0 评论 -
Vue学习第二天:06双向绑定和单向数据流不冲突
<template> <div :class="name"> {{message}}<br /> <label>测试1:<input v-model="message" /></label><br /> <label>测试2:<input :value="message" @input="currentFun" /></label>原创 2020-11-03 16:54:41 · 195 阅读 · 0 评论 -
Vue学习第二天:05理解单文件组件
App.vue<template> <ly-product-list class="ly-u-ul"> <!-- 不写 v-slot默认就是默认插槽 --> <template v-slot> <ly-product v-for="(item,index) in productList" :key="index" :name="item.name" :specification="item原创 2020-11-03 16:13:55 · 112 阅读 · 0 评论 -
Vue学习第二天:04Vue组件的核心概念“插槽”
总结:插槽实际是一种父组件往子组件传递复杂数据的一种方式(比如传递组件或者元素)。当只需要传递一个组件或元素时,使用默认插槽即可。当需要传递多个组件或元素时,就需要使用具名插槽。...原创 2020-11-03 14:56:57 · 106 阅读 · 0 评论 -
Vue学习第一天:03Vue组件的核心概念“事件”
<body> <div id="app"> <ly-product-list class="ly-u-ul"></ly-product-list> </div> <script src="./vue.js"></script> <script type="text/javascript"> Vue.component('ly-product', {原创 2020-11-02 19:28:21 · 127 阅读 · 0 评论 -
Vue学习第一天:02组件基础及组件注册
<body> <div id="app"> <ly-product-list class="ly-u-ul"></ly-product-list> </div> <script src="./vue.js"></script> <script type="text/javascript"> Vue.component('ly-product', {原创 2020-11-02 18:17:02 · 142 阅读 · 2 评论 -
Vue学习第一天:01插值和指令
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>第一个Vue程序</title> </head> <body> <div id="app"> <ul> <li v-for="(item,原创 2020-11-02 17:28:03 · 763 阅读 · 0 评论