Vue尚硅谷学习旅程
vue的知识学习
不许人间见秃头xbw
学到了知识,不做笔记,难道做饭?
展开
-
43-vuex-组件中共享状态的更新与读取、计算属性与高级计算属性get()的对比
一.dispatch():更新共享状态时需要用到。mapState、mapGetter:单纯地引入显示共享状态or其计算属性时需要用到。二.使用vuex时,组件中去引入计算属性(图片中红色标记)和计算属性get()方法(图片中蓝色标记)有少许的不同,举例:...原创 2021-03-11 08:40:11 · 261 阅读 · 0 评论 -
42-vuex中-实现异步请求(读写)数据(actions对象和backend的数据交互)的步骤
①父组件中app.vue中,mounted生命勾子中使用dispatch()向actions对象发送给命令②actions中将数据提交给mutations对象 (还需要在mutations-type中收集commit()方法的消息名)③mutations对象中显示state共享状态的方法、...原创 2021-03-11 08:12:00 · 407 阅读 · 0 评论 -
41-vue中-接口main.js中-render渲染函数(简化了映射组件为标签、使用标签的写法)
1.使用render渲染函数之前的写法new Vue({ el:"#app", components:{ App }, template:"<App/>"})2.使用render渲染函数之后的写法render渲染函数,相当于将component属性和template属性二者的代码换作了简化写法new Vue({ el:"#app", render:h => h(App)//传入的参数h是一个函数createElement()函数的对象})3原创 2021-03-10 11:10:50 · 291 阅读 · 0 评论 -
40-vue-在根据每个组件中的数据写成vuex时,注意的小点(mapActions、mapGetters、mapState、dispatch()、高级计算属性中的set、get)
1.vuex是全局的,所有组件都可以和它通信。2.getters对象中没有this,应该用getters来取代this图片示例3.高级计算属性(包含get、set) 组件中get方法对应vuex中的getters对象。 组件中set方法写成了vuex中的actions。4.mapState、mapGetters mapState:组件中获得state对象中的共享状态。 mapGetters:组件中获得vuex中的和共享状态有关的计算属性(例如:假若数组是共享的状态,那数组的长度这原创 2021-03-07 16:55:36 · 585 阅读 · 0 评论 -
39-vuex-多组共享的状态及其更新方法的写法
1.首先,要明确两个方法的传参使用 ①dispatch(“消息名”,参数) ②commit(函数名,{参数})/形参要用对象的形式包裹起来,不论形参是什么形式 2.将 多组共享的状态(数据) 写入state.js,作为初始化状态 对于各个组件中自己使用的状态就不需要再写入初始状态的state.js文件中了。3.紧接着就进行 更新多组共享数据的方法 的vuex式的编写①子组件中:组件中使用dispatch()向actions对象发送消息。this.$store.dispatch原创 2021-03-05 22:10:30 · 268 阅读 · 0 评论 -
38-vuex-基本文件的的写法
1.大项目里面使用vuex时,state、actions、mutations和getters对象是单独作为一个文件来写的。图片示例如下:store对象中四个属性的单独文件里面的写法:export default {} 2.可以设置设置一个index.js,它里面有最核心的管理对象store,示例如下:/** vue最核心的管理对象store* */import Vue from "vue"import Vuex from "vuex"import state from ".原创 2021-03-05 22:12:41 · 183 阅读 · 0 评论 -
37-vuex的结构图(可以检验自己对vuex的理解程度)
vuex的使用,体现了 封装性。vue components 相对于vuex功能更能接近用户,vuex则将vue components中的复杂逻辑操作的代码封装在vuex中,这样使得vue components的代码得到了大大的简化。原创 2021-03-03 17:19:48 · 194 阅读 · 1 评论 -
36-使用vuex对组件代码的优化(使用了mapState、mapActions、mapMutations、mapGetters)
作用: 简化代码方法: 只在app.vue文件中进行修改优化。 vuex中的map取代了 this.$ store为前缀的代码,例如:this.$ store.dispatch(消息名) 、this.$ store.getters.消息名。代码示例:本篇是在 链接: 35-vue中vuex(实现组件的集中管理)的介绍和使用.代码的基础上进行了优化。...原创 2021-03-03 11:34:38 · 139 阅读 · 0 评论 -
35-vue中vuex(实现组件的集中管理)的介绍和使用
一.vuex的介绍vuex是什么? (精简)对vue中多个组件的共享状态进行集中式管理vuex的作用(优点)? vuex可以优化解决的问题: ①将数据及其操作数据的行为都定义在父组件里面 ②还需要将数据及其数据操作的行为传递给各个子组件当中(有可能需要多级传递)起到了优化代码的作用。vuex的单向数据流(图解) 二.vuex的使用相关&nb原创 2021-03-01 21:24:19 · 257 阅读 · 0 评论 -
34-vue中的编程式路由导航
理解 编程式路由导航:用js代码来实现页面跳转 (例如点击按钮,添加事件监听使得页面来跳转)window.location.href = urlwindow.location = url //简洁写法组件对象this的两个属性 组件对象有两个属性:$route $router. 。 $route代表当前组件,存储着一些数据; $router代表路由器,有一些功能性的方法$router属性中的三个原创 2021-02-28 20:50:06 · 156 阅读 · 0 评论 -
33-vue项目用到的js数组方法
①filter() 等待中…以后遇见了再补充吧 ②map(): 理解:从一个数组中的每个对象元素中抽取个别属性,作为一个对象放在相同的下标位置,要用数组的map方法。 括号里要写抽取元素,结果返回的是新数组代码示例const users = result.items.map(item => ({ //item是数组中对象元素 name:item.login, //将items 数组中每个对象的item.login属性值赋给新数组users中每个对象元素的name属性。(下同)原创 2021-02-21 22:02:03 · 436 阅读 · 0 评论 -
尚硅谷的vue旅程03-vue的模板语法
一.使用Vue时的一些js语法代码:1.双方大括号表示2.指令(以v-开头的自定义属性标签)二.双大括号表达式1.语法:{{exp}}2.功能:向页面输出数据3.可以调用内置对象的方法。例如:字符串对象的toUpperCase()、toLowerCase()三. 指令一: 强制绑定数据1.作用:指定变化的属性值2.完整写法: v-bind:xxx="qqq" //qqq会作为表达式解析执行3.简介写法: :xxx="qqq"四.指令二:绑定监听数据1.作用:绑定监听事件的回调函原创 2021-02-01 11:15:23 · 129 阅读 · 0 评论 -
尚硅谷的vue旅程02-vue的基本使用
vue的基本使用步骤1.引入Vue.js2.创建 Vue 对象3.el:指定根 element (选择器)4.data:初始化数据(页面可以访问)5.双向数据绑定:v-model6.显示数据:{{xxx}}7.理解 vue 的 mvvm 实现 代码示例<!-- view:视图(模板页面)--><div id="app"> <input type="text" v-model="message"><br> <p>原创 2021-02-01 11:23:10 · 101 阅读 · 0 评论 -
32-vue中,向路由组件传递数据的两种方式
向路由组件传递数据的两种方式: 1. 组件链接 2. router-view props1.组件链接1.1 大致步骤 定义组件(存放消息的组件) --> 注册此组件的路由(在路由器里,相应的父组件路由下注册) --> 在父组件路由中写相应标签(router-link router-view) --> 在存放消息的组件中进行ajax请求(若需模拟ajax请求,可用setTimeout定时器) 详情查看:链接: 路由器项目.1.2 页面图示1原创 2021-02-21 21:54:51 · 293 阅读 · 0 评论 -
Vue的引入-(Vue学习-01)
Vue的引入 可以在<head>标签中引入vue.js的文件。示例<head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script></head>vue.js文件的来源 链接: Vue.js. 进入连接中的网页后,往下滚动页面找到下图中所示,“开发版本”和“生产版本”都可以下载使用。其他引原创 2021-01-26 22:07:18 · 352 阅读 · 0 评论 -
尚硅谷的vue旅程04-vue的计算属性(computed)和监听(watch)
简介1.计算属性 (将数据在computed对象中“加工”后,再显示出来) 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2.监视属性: (注意:要对变化的对象进行监视.监视有两种方式) 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时,回调函数自动调用,在函数内部进行计算3.计算属性高级:(getter实现对数据的展示;setter是实现对数据的监视) 通过getter/setter实现对属性数据的显示和监视原创 2021-02-01 21:28:21 · 163 阅读 · 0 评论 -
尚硅谷的vue旅程05-vue的计算属性高级(setter和getter方法的重写,实现了数据的双向交互)
简介计算属性高级:(getter实现对数据的展示;setter是实现对数据的监视)通过gettertter实现对属性数据的显示和监视(计算属性存在缓存,多次读取只执行一-次getter计算)代码示例<div id="demo"> 姓: <input type= "text" placeholder="FirstName" v-model="firstName"><br> 名: <input type="text" placeholder="La原创 2021-02-01 22:37:00 · 276 阅读 · 0 评论 -
尚硅谷的vue旅程06-vue中强制绑定class和style属性
简介1.理解 在应用界面中,某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术2. cLass绑定: class="xxx" xxx是字符串 xxx是对象(用得较多,键:类名;值:布尔类型) xxx是数组 (用得较少)3.style绑定 (style只能是以键值对的形式进行绑定) :style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中activeColor/fontSize是da原创 2021-02-02 10:28:06 · 224 阅读 · 1 评论 -
尚硅谷的vue旅程07-vue中的条件渲染(v-if和v-show)
v-if和v-show的比较对比项指令本质区别v-ifv-if 与 v-else搭配使用通过 新建/移除 标签元素 来达到显示/隐藏的效果v-showv-show通过更新display属性来达到显示/隐藏的效果代码示例<div id="app"> <!-- v-if --> <p v-if="isOK">成功了</p> <p v-else>失败了</p> <!-- v-sho原创 2021-02-02 17:24:55 · 205 阅读 · 0 评论 -
尚硅谷的vue旅程08-vue中的列表渲染(v-for)
简介列表渲染指令:(要强行绑定key属性,列表渲染的每一次的key的值都应该不一样) 数组:v-for/index 对象:v-for/key !!vue数组变更方法: vue重写了数组中一系列改变数组内部数据的方法(实现逻辑:先调用原生,再更新界面)---》数组内部改变,界面自 动变化 (vue数组变更方法可以参考 vue.js文档)代码示例<div id="demo"> <h2>测试 v-for 数组测试(常用)</h2> <原创 2021-02-03 10:37:03 · 108 阅读 · 0 评论 -
尚硅谷的vue旅程09-vue中的列表搜索和排序
简介sort(setNumber) 数组排序filter() 过滤方法setNumber函数的使用逻辑代码示例<div id="test"> <!-- 模糊查询搜索 --> <input type="text" v-model="searchName"> <ul> <li v-for="(item,index) in filterPersons" :key="index"> {{index}}--{{item.name}原创 2021-02-04 21:01:20 · 174 阅读 · 0 评论 -
尚硅谷的vue旅程10-vue中的事件处理(绑定监听、事件修饰符、按键修饰符)
1.绑定监听 1) v-on:xxx="fun" 2) @xxx="fun" 3) @xxx="fun(参数)" 4) 默认事件形参: event, 隐含属性对象:$event 就是当前触发事件的元素,即使不传 $event,在回调函数中也可以使用 event 这个参数。2.事件修饰符 事件修饰符用来控制事件的冒泡和默认行为。 1) .prevent : 阻止事件的默认行为event.preventDefault() 2) .stop : 停止事件冒泡event.stopPropag.原创 2021-02-04 21:08:53 · 153 阅读 · 0 评论 -
尚硅谷的vue旅程11-vue中表单数据的自动收集(v-model)
简介一.使用v-model(双向绑定数据)自动收集数据,数据收集到vue中的data里面 radio checkbox text/textarea select二. 1.radio单选框中 设置v-model绑定的默认值时,要填写相应value属性值 2.checkbox多选框中, 设置v-model绑定的默认值时,要填写相应value属性值,并用数组包起来 3.多选框的选项,由v-for列表渲染,以数组包含对象的形式来储存 代码示例<div id="demo"> &原创 2021-02-04 21:14:31 · 195 阅读 · 0 评论 -
尚硅谷的vue旅程12-vue中的生命周期(部分原理、常用勾子和完整的生命周期展示)
简介一. 1.vue对象的生命周期 1).初始化显示 (只执行一次) * beforeCreate() * created() * beforeMount() * mounted() 2).更新显示 this.xxx = value (执行n次) * beforeUpdate() * updated() 3).销毁死亡 this.$destroy() (只执行一次) * beforeDestroy() * destro原创 2021-02-04 21:22:26 · 307 阅读 · 0 评论 -
尚硅谷的vue旅程13-vue中的过渡与动画(transition等)
简介一. 指定过渡动画的步骤: 1.在目标元素外面包裹<transition name="xxx"> 2.为name名指定CSS样式 指定过度样式transition(css3的属性) 指定隐藏时的样式:opacity/或者其他(width等等)二. 1.操作 css 的 transition 或 animation 2.vue 会给目标元素添加/移除特定的 class 3.过渡的相关类名: xxx-enter-active:指定显示的 t原创 2021-02-07 20:45:36 · 193 阅读 · 0 评论 -
尚硅谷的vue旅程13-02-vue中的过渡与动画02
代码示例<style> .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { /* reverse:反着来 */ animation: bounce-in .5s reverse; } @keyframes bounce-in { /* 时间的位置 */ 0% { /* scale: 字体到特定时间时所呈现的规模 */ transform: scal原创 2021-02-07 20:53:28 · 137 阅读 · 0 评论 -
尚硅谷的vue旅程14-vue中的过滤器filter()--格式化时间
用过滤器格式化时间: 理解Vue.filter()函数的使用方法 可以在bootCDN中引入 moment.js的库 参考moment.js文档中 解析部分 来指定格式化数据的格式<div id="demo"> <p>未格式化的完整版时间: {{date}}</p> <!-- 格式化数据时,要注意此处的格式 下一行中{{需要格式化的数据 | 过滤器名称 }}--> <P>完整版时间: {{date | dateFormat}原创 2021-02-07 20:57:19 · 141 阅读 · 0 评论 -
尚硅谷的vue旅程15-vue中的指令 v-cloak与ref
简介常用内置指令 1) v-text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页面 4) v-else: 如果为 false, 当前标签才会输出到页面 5) v-show : 通过控制 display 样式来控制显示/隐藏 6) v-for : 遍历数组/对象 7) v-on : 绑定事件监听, 一般简写为@ 8) v-bind : 强制绑定解析表达原创 2021-02-07 21:01:51 · 187 阅读 · 0 评论 -
尚硅谷的vue旅程16-vue中的指令 v-cloak与ref
简介 1) 注册全局指令 : Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase() }) 2) 注册局部指令 : directives: { 'my-directive'(el, binding) { el.innerHTML = binding.value.toupperCase原创 2021-02-07 21:06:11 · 235 阅读 · 0 评论 -
尚硅谷的vue旅程17-vue中的自定义插件以及插件的使用
简介 掌握: 1.自定义插件,参考vuejs文档中的模板 2.(自定义)插件的使用 注意:实例方法和函数对象方法两者是有些区别的: ①方法名字上面,前者加$符号。 ②调用上面,前者通过vue示例来调用方法。后者通过Vue.xxx()来调用代码示例1.html文件代码:<div id="app"> <!-- 使用(自定义)插件中的 自定义指令 --> <p v-my-directive="msg"></p> </d原创 2021-02-07 21:12:33 · 247 阅读 · 0 评论 -
18-vue 快速安装脚手架vue-cli,并搭建vue项目
首先,打开cmd,输入命令:npm install -g vue-cli 点击回车,即可安装。 输入 vue -V,点击回车键后,若出现类似途中的版本号2.9.6,就证明是证明vue-cli安装成功了原创 2021-02-07 09:42:27 · 173 阅读 · 0 评论 -
19-vue eslint编码规范检查
eslint作用 检查代码是否规范 修改eslint规则图片示例: 设置要忽略的检查项错误等级——可以应用到修改 eslint的规则中原创 2021-02-07 22:17:55 · 137 阅读 · 0 评论 -
20-vue中 组件化 、组件之间的引用使用步骤、组件之间的通信(props)
一.组件化思想: ①对网页进行组件拆分 ②静态化组件 ③动态化组件:初始化数据 和 数据交互 二.1.组件之间的引用使用步骤 ①引入子组件 ②映射组件标签 ③使用组件标签2.组件之间的通信 组件间通信时,props接收数据 (①可以指定属性名和属性值的类型:用键值对形式;②只指定属性名:用数组形式)3.代码示例 组件:<template> <div> <div class="container"&g原创 2021-02-08 21:14:42 · 294 阅读 · 0 评论 -
21-vue项目的技巧经验和所学
props 都是子组件接受父组件数据,并使用props methods methods 里面:定义方法时,应该要考虑 是否要定义形参(根据有无需要改变的变量,若有,则应该定义形参) -->进一步考虑,不需要参数,能否实现方法的功能 --> 需传参时,要明白参数的数量、名称、作用。 {{xxx}} {{xxx}},xxx可以是函数、变量。若是函数,则为计算属性computed(回调函数), 例如“反选框(读取每个数据项的状态,监听自己是否被勾选原创 2021-02-10 20:49:07 · 152 阅读 · 0 评论 -
22-vue 组件通信的五种方式(总结):props、自定义事件、ref\refs 、消息的订阅与发布(pubsub-js库)、slot插槽法
第一种 props 父组件用 :(v-bind的简写)传递,子组件用 props 来接收,并注明类型代码示例父组件代码:<template> <TodoHeader :addTodo="addTodo"/></template>子组件代码:export default{ props:{ addTodo:Function }}this.$emit(“方法名”,方法中参数)第二种 自定义事件 父组件用@(v-on的简写)来绑定事件,原创 2021-02-13 10:16:55 · 461 阅读 · 0 评论 -
23-vue中 localStorage--存储信息的使用
数据存储的简介: 为了让用户操作的数据在下次打开网页时,依然能够显示,需要用到localStorage 来将数据储存到 文件中。使用localStorage应该考虑的问题: 使用localstorage, 需要考虑到 存和读 : 存的时机 存的东西 存的地方 读的时机代码示例:export default { data() { return { //localStorage 中的 键值对 总是 转化为字符串的形式存来进行存储原创 2021-02-13 11:31:37 · 246 阅读 · 1 评论 -
24-vue中组件的通信方式之一:消息的订阅与发布的使用pubsub、 pubsub-js库的安装
1.pubsub-js库的安装使用 消息订阅与发布,先在对应的项目中Terminal里安装pubsub-js库1、查看pubsub-js 库是否已经存在该库命令:npm info pubsub-js2、若不存在,则先安装pubsub-js 库,命令如下:npm install --save pubsub-js**注意:**上面两条命令,在vue项目的终端Terminal中输入2.消息的订阅与发布的使用优点: 消息订阅与发布 优点: 父子通信 、逐层通信、兄弟组件通信 等等都可以,没有原创 2021-02-13 16:24:09 · 695 阅读 · 2 评论 -
25-vue-ajax-常用的两个库:vue-resource库和axios库(推荐使用axios库)
1. 两个库的安装命令 1.1 vue-resource库:npm install vue-resource --save 1.2 axios库 非官方库npm install axios --save2. vue-resource库的使用 ①在main.js 入口中,引入VueResource,并声明使用 ②在App.vue中写发送请求的代码,下面以 get 请求方式为例3.axios库的使用 需要在App.vue文件中导入 axios库测试接口 接口原创 2021-02-15 07:44:04 · 274 阅读 · 0 评论 -
26-vue-users_page项目的自我心得
项目展示图片心得 1.通信方式的确定–消息的订阅与发布 分析:搜索区(search组件)和展示区(main组件),属于_兄弟组件_,通信方式就使用 消息的订阅与发布,这样可以实直接传输信息。(若使用props方法的话,就需要通过他们的父组件进行逐层传递,麻烦)。 2.谁来进行消息的发布?谁来进行消息的发布? 分析:search组件要将用户输入信息,点击搜索,再将其输入的信息传给main组件,main组件在进行ajax请求数据,并在展示区(main组件)展示。 结论:sear原创 2021-02-16 11:38:46 · 134 阅读 · 0 评论 -
27-vue中 UI组件库的使用
参照网站链接: vue插件(移动端).链接: vue插件库(PC端).提示以vue插件(移动端)为例: 安装mini-ui库的命令:npm install --save mint-ui 要实现按需打包,也要执行命令并修改.babelrc文件:npm install --save-dev babel-plugin-component 将.babelrc文件修改为:{ "presets": [ ["env", { "modules": false,原创 2021-02-16 18:23:11 · 185 阅读 · 0 评论