vue - 随笔分类 - 曲奇酸奶

路由的query参数（传参）

摘要：路由组件不会在组件里面放自己组件标签。案例使用嵌套组件的，但是在Message组件下新增了组件Detail.vue index.html //引入bootstrap.css <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrp.css"> 阅读全文

posted @ 2021-10-31 14:23 曲奇酸奶阅读(945) 评论(0) 推荐(0)

嵌套路由

摘要：Home组件和About组件是兄弟关系；给Home组件新增两个组件分别是News.vue、Message.vue。紧接着之前做的路由主题实现嵌套路由 index.html //引入bootstrap.css <link rel="stylesheet" href="<%= BASE_URL %>cs 阅读全文

posted @ 2021-10-31 13:53 曲奇酸奶阅读(120) 评论(0) 推荐(0)

路由

摘要：什么是路由？路由就是一组key-value的对应关系。多个路由需要经过路由器管理。 vue-router是vue的一个插件库，专门用来实现SPA应用备注：执行npm i vue-router安装 SPA理解 1.单页Web应用（single page web application） 2.整个应阅读全文

posted @ 2021-10-29 14:01 曲奇酸奶阅读(200) 评论(0) 推荐(0)

Vuex

摘要：Vuex是什么概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件【比如将想学习的学生集中到一起，只讲授一次课】，对vue应用中多个组件的共享状态进行集中式的管理（读/写）,也是一种组件间通信的方式，且适用于任意组件间通信。备注：执行npm i vuex main.js //引入Vue 阅读全文

posted @ 2021-10-29 09:44 曲奇酸奶阅读(48) 评论(0) 推荐(0)

集成第三方动画

摘要：第三方库地址：https://animate.style/ 首先安装库 npm install animate.css Test.vue <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <!--transition包阅读全文

posted @ 2021-10-27 17:07 曲奇酸奶阅读(65) 评论(0) 推荐(0)

动画效果、过渡效果(了解)

摘要：Test使用的是动画效果、Test1使用的是过渡效果实现点击按钮会让文字“你好啊！”显示或隐藏 Test.vue <template> <div> <button @click="isShow = !isShow">显示/隐藏</button><!--transition包裹的h1应用动画效果；a 阅读全文

posted @ 2021-10-27 15:05 曲奇酸奶阅读(162) 评论(0) 推荐(0)

组件自定义事件——绑定

摘要：子组件给父组件传数据 App.vue  <template> <div>  <School :getSchoolName="getSchoolName"></School> <!--通过父组件给子阅读全文

posted @ 2021-10-27 10:10 曲奇酸奶阅读(104) 评论(0) 推荐(0)

scoped样式

摘要：scoped样式作用∶让样式在局部生效防止冲突写法∶<style scoped> 比如School组件和Student组件的样式名一样，当组件汇总到一起时样式会冲突。所以加上scoped可以让各个样式在所在的组件发挥作用，而不在其它组件。阅读全文

posted @ 2021-10-26 10:25 曲奇酸奶阅读(68) 评论(0) 推荐(0)

插件

摘要：插件功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。一般不会自己写，要会用 main.js //引入vue import Vue from 'vue' //引入App import App from './ 阅读全文

posted @ 2021-10-26 09:23 曲奇酸奶阅读(66) 评论(0) 推荐(0)

mixin混入

摘要：mixin(混入) 功能：可以把多个组件共用的配置提取成一个混入对象使用方式：第一步定义混合，例如： { data(){.........}, methods:{.........} ..............} 第二步使用混入。例如（1）全局混入Vue.mixin(xx) （2）局部混入m 阅读全文

posted @ 2021-10-25 20:51 曲奇酸奶阅读(54) 评论(0) 推荐(0)

props配置

摘要：配置项props 功能：让组件接收外部传过来的数据【相当于微信转账：有一个转账人转钱给接收者，接收者需要确认接收】（1）传递数据： <Demo name="xxx"> （2）接收数据：第一种方式（只接收） props:['name'] 第二种方式（限制类型） props:{ name:{ typ 阅读全文

posted @ 2021-10-24 17:01 曲奇酸奶阅读(151) 评论(0) 推荐(0)

分析vue脚手架

摘要：执行流程：执行npm run serve。找到了main.js文件，之后引入Vue、App等等。后来找到App组件，发现里面用到了组件School，于是执行School组件，最终汇总到App组件。通过main.js的render函数将App组件放入容器。然后找到index.html就放到里面创建的阅读全文

posted @ 2021-10-23 10:51 曲奇酸奶阅读(82) 评论(0) 推荐(0)

ref属性

摘要：ref属性 1.被用来给元素或组件注册引用信息（id的替代者） 2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） 3.使用方式：打标识：<h1 ref="xxx">........</h1> 或 <School ref='xxx'></School> 获取：t 阅读全文

posted @ 2021-10-23 10:01 曲奇酸奶阅读(261) 评论(0) 推荐(0)

创建vue脚手架步骤

摘要：一、在cmd配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org 二、仅第一次执行安装，安装好后关掉cmd后再开，这个时候vue不报错 npm install -g @vue/cli 注意：安装过程中会有warning，这阅读全文

posted @ 2021-10-21 16:42 曲奇酸奶阅读(188) 评论(0) 推荐(0)

曲奇酸奶

随笔分类 - vue

公告