15-2 Vue_qf
千峰Vue学习
一角残叶
人生如逆旅,我亦是行人
展开
-
Vue_qf (24) - 组件库
1 组件库1.1 第三方插件https://github.com/vuejs/awesome-vue#components--libraries1.2 第三方 UI 框架PC框架:(element UI , iview)移动端框架:(mint UI)2 案例安装 element-ui原创 2020-09-02 18:20:42 · 160 阅读 · 0 评论 -
Vue_qf (23) - 状态管理 vuex - getters
1 vuex -getters把原数据加工一下再返回2 mutation 常量风格3 actionsAction 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作。this.$store.dispatch("type","payload")可以做同步原创 2020-09-02 16:33:10 · 142 阅读 · 0 评论 -
Vue_qf (22) - 状态管理 vuex - 异步处理
1 异步处理import Vue from "vue"import Vuex from "vuex"import axios from "axios"Vue.use(Vuex)export default new Vuex.Store({ state: { // 自定义的共享状态 isTabbarShow: true, comingList: [], }, mutations: { // 唯一修改状原创 2020-09-02 15:51:25 · 202 阅读 · 0 评论 -
Vue_qf (21) - 状态管理 vuex
1 Vuex如果一个项目中,需要非父子通信的地方很多,这时候使用事件总线就会不方便,由此引入状态管理 Vuex。Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化Mutation 是唯一修改状态的地方1.1 statestate:单一状态树 ,每个应用将仅仅包含一个 store 实例。*this.$store.state.状态名字*...mapState(["title"])原创 2020-09-01 19:20:36 · 366 阅读 · 0 评论 -
Vue_qf (20) - 事件总线
1 事件总线实现非父子通信–进入详情页后,隐藏最下面的菜单1.1 新建总线原创 2020-09-01 18:04:00 · 135 阅读 · 0 评论 -
Vue_qf (19) - 影院页面-better scroll
1 影院页面下载 better-scroll 库Cinema.vue<template> <div class="cinema" style="height:300px"> <li v-for="data in datalist" :key="data.cinemaId"> {{ data.name }} </li> </div></template原创 2020-09-01 16:23:34 · 165 阅读 · 0 评论 -
Vue_qf (18) - 详情页面-轮播组件
1 详情页面的轮播DetailSwiper.vue<template> <div class="swiper-container filmswiper"> <div class="swiper-wrapper"> <slot></slot> </div> <!-- 如果需要分页器 --> <div class="s原创 2020-09-01 15:50:23 · 197 阅读 · 0 评论 -
Vue_qf (17) - 详情页面
1 详情页面Nowplaying.vue<template> <div> nowplaying <ul> <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)"原创 2020-09-01 14:58:21 · 152 阅读 · 0 评论 -
Vue_qf (16) - 项目吸顶效果
1 项目吸顶效果1.1 FilmHeader.vue<template> <div> <ul> <router-link to="/film/nowplaying" tag="li" activeClass="active" >正在热映</router-link > <router-link to="/film原创 2020-09-01 14:07:40 · 147 阅读 · 0 评论 -
Vue_qf (15) - 项目轮播
1 项目轮播Swiper.vue<template> <div class="swiper-container filmswiper"> <div class="swiper-wrapper"> <slot></slot> </div> <!-- 如果需要分页器 --> <div class="swiper-pag原创 2020-09-01 11:05:30 · 133 阅读 · 0 评论 -
Vue_qf (14) - project - (2)
1 iconfont定位图标1.1 添加自定义的图标文件被加载主演是数组Nowplaying.vue<template> <div> nowplaying <ul> <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data)"> <img :src="data.p原创 2020-08-31 23:17:13 · 145 阅读 · 0 评论 -
Vue_qf (13) - project
1 项目轮播安装 swiperSwiper.vue<template> <div class="swiper-container filmswiper"> <div class="swiper-wrapper"> <slot></slot> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination f原创 2020-08-31 14:05:27 · 132 阅读 · 0 评论 -
Vue_qf (12) - Vue Router
1 路由import Vue from "vue";import VueRouter from "vue-router";import Film from "@/views/Film" // @表示 srcimport Cinema from "@/views/Cinema"import Center from "@/views/Center"Vue.use(VueRouter);const routes = [ { path: "/film", compone原创 2020-08-31 10:34:28 · 152 阅读 · 0 评论 -
Vue_qf (11) - Vue-cli
1 Vue-cli安装 Vue 脚手架,创建 Vue 项目启动项目2 单文件组件删除 App.vue 的内容,自己编写<template> <div id="app"> 落霞与孤鹜起 <input type="text" ref="mytext" /> <button @click="handleAdd()">添加</button> <ul> &原创 2020-08-30 18:20:50 · 175 阅读 · 0 评论 -
Vue_qf (11) - 指令
1 自定义指令操作底层 dom<body><div id="app"> <div v-hello="'yellow'">自定义指令</div></div><script type="text/javascript"> Vue.directive("hello",{ inserted(el,bind){ // 指令-生命周期-创建,el获取当前组件的完整 dom c原创 2020-08-28 15:54:37 · 146 阅读 · 0 评论 -
Vue_qf (10) - 过渡效果
Vue 在插入、更新或者移除 DOM 时,提供多种不同的应用过渡效果1 单个元素过渡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .kerwinfade-enter-active, .kerwinfade-leave-active {原创 2020-08-28 14:19:28 · 270 阅读 · 0 评论 -
Vue_qf (9) - slot
1 slot原创 2020-08-28 11:01:58 · 139 阅读 · 0 评论 -
Vue_qf (9)- 动态组件
1 动态组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&原创 2020-08-27 16:48:38 · 191 阅读 · 1 评论 -
Vue_qf (8)- 组件通信
1 父传子<body><div id="app"> <navbar myname="home" myshow="false"></navbar> <navbar myname="list" myshow="false"></navbar> <!--动态绑定--> <navbar :myname="parentName" :myshow="false"></navbar&原创 2020-08-27 16:26:39 · 392 阅读 · 0 评论 -
Vue_qf (7)- 组件
1 虚拟 dom_diff把树按照层级分解同 key 值对比同组件对比2 组件扩展 html 元素,封装可重用的代码2.1 组件注册方式全局组件:Vue.component局部组件2.2 组件编写方式和 Vue 实例的区别自定义组件需要有一个root element父子组件的data是无法共享组件可以有data,methods,computed…,但是data 必须是一个函数2.2.1 全局组件<body><div id="a原创 2020-08-26 17:02:11 · 228 阅读 · 0 评论 -
Vue_qf (6)- 计算属性
1 计算属性性能比普通方法高<body><div id="app"> <p>计算属性:{{getName}}</p> <p>普通方法:{{getNameMethod()}}</p></div><script> var vm = new Vue({ el: "#app", // vue 开始渲染的地方 data: {原创 2020-08-26 16:09:12 · 166 阅读 · 0 评论 -
Vue_qf (5)- axios 和 fetch
1 购物车案例<body><div id="app"> <input type="checkbox" @change="handleChange" v-model="isAllChecked">全选 <ul> <li v-for="data in dataList"> <!-- :value 动态绑定--> <input type="che原创 2020-08-26 15:39:17 · 228 阅读 · 0 评论 -
Vue_qf (4)- 表单控件绑定
1 表单控件绑定1.1 v-model双向数据绑定<div id="app"> <input type="text" v-model="mytext"> {{mytext}} <br> <input type="checkbox" v-model="isChecked"/> 记住密码</div><script> var vm = new Vue({ el: "#a原创 2020-08-26 10:12:57 · 199 阅读 · 0 评论 -
Vue_qf (3)- 事件处理
1原创 2020-08-26 09:49:47 · 208 阅读 · 0 评论 -
Vue_qf (2)
1 列表渲染<body><div id="app"> <ul> <li v-for="(data,index) in dataList"> {{data}}--{{index}} </li> </ul> <!--遍历对象--> <ul> <li v-for="(data,key) in obj"&g原创 2020-08-25 22:28:09 · 382 阅读 · 0 评论 -
Vue_qf (1)
1 插值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>原创 2020-08-25 15:35:05 · 834 阅读 · 0 评论