![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
yyang_233
这个作者很懒,什么都没留下…
展开
-
vuex
如果想要在子组件中使用祖先组件中的数据,那么就必须一层一层的传递兄弟组件之间不能直接传递数据,如果兄弟组件之间想要传递数据,那么就必须借助父组件解决方案:使用vuex什么是vuex?vuex 是 vue配套的 公共数据管理工具,我们可以将共享的数据保存到vuex中,方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。...原创 2020-09-25 16:21:21 · 159 阅读 · 0 评论 -
axios
axios功能特点:在浏览器中发送 XMLHttpRequests 请求支持 Promise API拦截请求和响应转换请求和响应数据在 node.js 中发送 http请求支持多种请求方式:axios(config)axios.request(config)axios.get(url[, config])axios.post(url[, data[, config]])axios.delete(url[, config])axios.head(url[, config])axi原创 2020-09-25 16:29:24 · 117 阅读 · 0 评论 -
商城webpack配置
路径相关resolve:{ extensions:['.js','.vue','.json'], // 可以省略 // 别名 alias:{ '@':resolve('src'), }}在vue.config.js中module.exports = { configureWebpack: { // 解决路径相关的东西 resolve: { alias: { components: "@/components", conte原创 2020-09-14 16:00:18 · 79 阅读 · 0 评论 -
vue商城底部导航栏功能
底部导航栏TabBar的实现自定义TabBar组件,在APP中使用让TabBar处于底部,并设置相关样式。TabBar中显示的内容由外界决定定义插槽,flex布局平分TabBar。自定义TabBarItem,可以传入图片和文字定义props属性,存放路径link,实现路由动态跳转;定义TabBarItem,并且定义两个插槽,图片和文字;给两个插槽外层包装div,用于设置样式;填充插槽,实现底部TabBar的效果;TabBar的封装<template> <di原创 2020-09-13 15:15:24 · 722 阅读 · 0 评论 -
Vue商城——首页功能
Vue商城项目的前提工作首页功能的实现原创 2020-06-21 20:13:13 · 5187 阅读 · 0 评论 -
Vue商城——详情页功能
详情页实现思路点击商品进去详情页,根据点击请求更加详细的信息,要传过来goodsItem的iid,根据id去服务器请求更加详细的信息;配置路由映射关系,点击进行跳转,带参数传递跳转itemClick(){ this.$router.push('/detail/'+this.goodsItem.iid) /* this.$router.push({ ...原创 2020-06-21 20:12:49 · 9779 阅读 · 2 评论 -
Vue商城——购物车功能
一、导航栏实现原创 2020-05-21 16:03:49 · 1731 阅读 · 0 评论 -
vue-router
什么是vue-router和v-if/v-show一样,是用来切换组件的显示的。v-if/v-show 是标记来切换(true/false);vue-router 是通过哈希来切换(#/xxx),不仅能够切换组件的显示,还能在切换的时候传递参数。哈希:在url后面加上#abc,这个abc就是哈希vue-router使用1.导入import VueRouter from "vue-router";2. 安装插件Vue.use(VueRouter);3. 定义路由规则(定义切换规则)数组里原创 2020-09-13 15:23:52 · 156 阅读 · 0 评论 -
v-if,v-show,v-for的使用
v-if的使用Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本不会有对应的标签出现在DOM中。<div id="app"> <h2 v-if="score>=90">优秀</h2> <h2 v-else-if="score>=80">良好</h2> <h2 v-else-if="score>=60"&原创 2020-06-21 23:15:23 · 514 阅读 · 0 评论 -
v-bind使用
一、v-bind基本使用有时候属性也不是写死的,也是需要根据某些变量某些数据动态来决定的。比如动态绑定a元素的href属性比如动态绑定img元素的src属性比如动态绑定一些类、样式这个时候,我们可以使用v-bind指令。v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值<div id="app"> <!-- 不能使用mustache语法 把imgURL直接当成字符串 在内容里面才能使用--> <!-- <img src="{{i原创 2020-06-21 22:03:27 · 16541 阅读 · 1 评论 -
Vue响应式原理
不要认为数据发生改变,界面跟着更新,是理所当然的其实并不是理所当然的,内部其实做了很多封装<body> <div id="app"> {{message}} </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{原创 2020-06-21 20:12:00 · 341 阅读 · 0 评论