vue
关注
分享
扫一扫
文章平均质量分 63
11adaacc
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue-cli3.0 最新项目创建
1.全局安装vue-clinpm install -g @vue/cli2.创建项目vue create demo demo是项目名可以随意替换默认（default）vue2默认（default）vue3手动（Manually）3.手动选择配置空格键是选中与取消，A键是全选Choose Vue version 选择视图版本Babel 支持es6TypeScript 支持使用 TypeScript 书写源码Progressive Web App (PWA) Support PW原创 2021-06-04 22:50:11 · 398 阅读 · 1 评论 -
Vue生命周期和webpack
文章目录01.原创 2021-03-10 19:02:06 · 421 阅读 · 0 评论 -
axios
文章目录01.使用axios02.使用axios请求本地文件01.使用axios1.下载包 npm i axios -S2.引入包 import axios from 'axios';3.配置使用axios Vue.prototype.$http=axios;02.使用axios请求本地文件list.json使用get方法请求json文件拿到数据2021.02.08 21:42...原创 2021-02-08 21:42:46 · 149 阅读 · 0 评论 -
Vuex
文章目录01.vuex02.使用vuex03.使用vuex进行数据管理04.使用vuex注意事项01.vuexvuex是一个全局的共享数据存储区域，就相当于是一个数据的仓库只有共享的数据，才有权利放到vuex中；组件内部私有的数据，只要放到组件的data中即可02.使用vuex1.下载包 npm i vuex -S2.引入vuex import Vuex from 'vuex'3.配置使用vuex Vue.use(Vuex)4.创建公共数据仓库const store=new Vue原创 2021-02-08 21:24:29 · 190 阅读 · 0 评论 -
Vue脚手架
文章目录01.vue-cil创建基本项目结构02.项目文件03.运行代码测试01.vue-cil创建基本项目结构npm install vue-cli -g 全局安装vue-cil验证是否安装成功 vue --version生成项目模板 vue init 模板名 项目目录名称simple 基本没用webpack 可以使用(大型项目)Eslint 检查代码规范，单元测试webpack-simple 个人推荐使用, 没有代码检查 √进入到项目目录里面下载包 cd原创 2021-02-04 23:42:24 · 209 阅读 · 0 评论 -
Vue路由实现页面跳转
要求：默认加载猜你喜欢页面猜你喜欢和购物车在一个页面，我的在另一个页面点击商品可以进入商品详情页点击返回可以返回之前的页面<body> <div id="app"> <router-view></router-view> </div> <!-- 默认渲染此模板 --> <template id="first"> <main>原创 2021-02-02 22:26:54 · 378 阅读 · 0 评论 -
Vue路由
文章目录01.路由02.路由嵌套(内容渲染到固定位置)03.路由嵌套(内容渲染到指定位置)04.路由传参05.路由方法01.路由spa:单页面开发。只有一个页面。其余页面通过路由跳转单页面开发的时候，不可能有a标签。页面跳转通过路由实现vue实现页面跳转要通过router-linkrouter-link最终会被渲染成a标签，不能自己书写a标签(不规范)router-view存储是最终渲染的内容定义路由 var router=new VueRouter({})在路由中配置路线 route原创 2021-02-02 22:15:32 · 260 阅读 · 0 评论 -
Vue组件的嵌套和通信
文章目录01.组件嵌套02.组件通信03.父组件传参给子组件01.组件嵌套<body> <div id="app"> <login></login> </div> <template id="login"> <div> <ul> <li @click="aaa='account'">3原创 2021-01-31 23:20:44 · 251 阅读 · 0 评论 -
Vue传参后父组件的值跟随子组件改变
实现方法：引用数据类型是以地址的形式存在的，将父组件的值做成对象，然后传递给子组件，地址相同，子组件的值改变父组件的值也一同改变<body> <div id="app"> {{fmsg.con}}<br> <button @click='change()'>点击修改父组件的数据</button> <!-- 将fmsg赋值给a --> <v-header :a原创 2021-01-31 23:02:32 · 288 阅读 · 0 评论 -
Vue动态组件实现移动端分类功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2021-01-31 21:11:50 · 645 阅读 · 0 评论 -
Vue组件
文章目录01.组件的基本使用02.slot03.动态组件01.组件的基本使用组件：前端模块化、工程化的基础。把前端页面分成一个一个的小模块。这些小模块就称为组件组件使用：使用占位符 英文即可。不能和标签名字一致，一般需要有语义定义组件 let 组件名=Vue.extend({})定义模板 书写所要渲染的标签挂载组件 相当于把模板和组件联系起来 <body> <div id="app"> <!-- 占位符 --> <v-he原创 2021-01-29 22:05:36 · 207 阅读 · 0 评论 -
Vue实现切换导航栏
原理：导航栏对应子页面，index一样的话子页面就显示<body> <div id="app"> <ul> <li v-for="(top,index) in top" v-bind:class="{current:num==index}" v-on:click="change(index)">{{top}}</li> </ul> <div id="原创 2021-01-27 00:25:53 · 2670 阅读 · 0 评论 -
Vue实现微博发布和删除功能
原理：利用数据的双向绑定，点击发布按钮获取文本域的数据，然后向data中添加<body> <div id="app"> <div> <ul> <li v-for="(blogs,index) in list"> {{blogs.content}} <button v-on:click原创 2021-01-27 00:23:53 · 727 阅读 · 0 评论 -
Vue指令
文章目录01.v-if和v-show02.v-for03.v-model04.v-bind05.v-cloak06.v-once和v-pre07 .prevent和.stop08.watch和computed01.v-if和v-showv-if控制的是标签是否存在 true存在 false的时候是不存在v-show控制的是标签的显示隐藏 true显示 false的时候隐藏如果变量作为的值的时候，不用加{{}}如果只是单纯显示隐藏最好使用show 。效率高<body> <d原创 2021-01-27 00:21:30 · 414 阅读 · 0 评论 -
Vue插值表达式和事件
文章目录01.Vue声明式渲染02.MVVM03.Vue使用相关问题04.插值表达式05.事件06.操作标签内容01.Vue声明式渲染<body> <div id="#app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"Hello!Vue" }原创 2021-01-25 00:28:06 · 679 阅读 · 0 评论