Vue
关注
分享
扫一扫
洪布斯
桃李不言，下自成蹊。
展开
-
Vue回顾篇
vue指令：v-bind 简写 : 属性绑定 v-if v-else 条件渲染 v-for 列表渲染 v-on 简写 @ 事件绑定 v-model 双向数据绑定 v-cloak 防止闪烁 v-show 条件渲染 v-html 渲染一段html字符串 v-text 绑定一个普通的文本 v-once ...原创 2020-02-03 18:59:09 · 220 阅读 · 0 评论 -
touch事件
touch事件<template> <div class="scrollview" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @touchcancel="touchcancel" > <div class="c...原创 2019-12-27 20:20:02 · 177 阅读 · 0 评论 -
npm run build
使用npm run build命令进行打包，直接打开index.html是无法看到内容的1.全局安装express-generator生成器。express-generator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖。npm install express-generator -g //也可使用cnpm比较快2.创建一个expres...原创 2019-12-27 09:41:04 · 2180 阅读 · 0 评论 -
axios、rem设置、服务器代理
axios、rem设置：main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios'// 把axios添加到Vue的原型中，所有的组件（页面）（其实都是一个Vue对...原创 2019-12-26 19:16:31 · 201 阅读 · 0 评论 -
Vuex
详情使用移步官网文档：https://vuex.vuejs.org/zh/./src/store.jsimport Vue from 'vue'import Vuex from 'vuex'// 在vue单文件项目开发中使用vuex必须先注册这个插件Vue.use(Vuex)// Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组...原创 2019-12-25 19:40:05 · 140 阅读 · 0 评论 -
Vux配置
详细使用方法翻阅官网：https://vux.li/配置vux： 在网上搜了会，发现几乎都是vue-cli旧版的配置方法，有一些已经不能用了，在这里整理下正确的配置方法 安装各插件 1、在项目里面安装vuxnpm install vux --save 2、安装vux-loader（必须安装）npm install vux-loader --save-dev 3、安装less...原创 2019-12-25 19:34:56 · 494 阅读 · 0 评论 -
Vue：二级路由，导航守卫（导航钩子）
二级路由，导航守卫（导航钩子）：import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{ path: '/', name: 'home', component:...原创 2019-12-24 19:50:22 · 555 阅读 · 0 评论 -
Vue：动态组件、事件的发射、自定义指令、过滤器
动态组件：<body> <div id="app"> <button @click="btnClick('com1')">首页</button> <button @click="btnClick('com2')">动态</button> <!-- 在模板中使用...原创 2019-12-24 19:45:48 · 802 阅读 · 1 评论 -
Vue小知识点、Ajax
设置非父子通信：bus.js文件（和main.js同级）import Vue from 'vue';export default new Vue();需要在哪使用就在那导入：import bus from "./bus";main.js文件 ：// main.js所导入的资源，任何vue文件都可以直接使用// 导入css样式 样式覆盖import './as...原创 2019-12-18 21:40:36 · 147 阅读 · 0 评论 -
Vue项目简单介绍
项目文件结构展示：pages>HomePage.vue<template> <div> <!-- 菜鸟教程布局举例 --> <first-content></first-content> <!--<second-content></second-content>...原创 2019-12-16 21:36:25 · 1096 阅读 · 0 评论 -
创建一个Vue项目步骤
保证一个前提：当前的运行环境中，必须先全局安装webpacknpm install webpack -gnpm install webpack-cli -gvue-cli 是依赖于webpack全局安装模块之后，任意一个文件位置都可以使用这个命令1.全局安装vue-cli模块 和 vue/cli-init模块 cli：commond-line interface 命令行...原创 2019-12-16 21:25:21 · 235 阅读 · 0 评论 -
Vue路由
vue路由：<body> <div id="demo"> <ul> <li> <a href="#/"> 首页 </a> </li> <li> ...原创 2019-12-16 21:21:38 · 142 阅读 · 0 评论 -
Vue响应式原理
vue响应式原理：<body> <input type="text" id="input"> <p> </p> <button> 点击 </button> <script> // v-model // input标签时界面中的输入内容 ...原创 2019-12-16 21:17:43 · 122 阅读 · 0 评论 -
Vue：webpack
导出模块:var a = 10;// exportexport default a;导入模块：import a from './a.js';console.log(a)index.jsimport b from './b.js';import './style.css';import style from './style.css';console.lo...原创 2019-12-12 20:13:52 · 152 阅读 · 0 评论 -
Vue：过度效果、动画效果、key值、插槽、动态组件、实例的属性
vue过渡效果：transition标签对，用来放置即将要发生动画或过渡效果的标签默认使用六个类名，设置效果，类名以v-开头如果需要设置多个效果，需要给transition添加name属性，那么六个类名一律nameValue-开头 /* 设置标签即将显示时的初始位置 */ .v-enter { left: -100%; ...原创 2019-12-11 20:19:25 · 397 阅读 · 0 评论 -
Vue：生命周期函数
<body> <div id="demo"> <my-com></my-com> </div> <script id="myCom" type="text/html"> <div class="myCom"> <h1> ...原创 2019-12-10 19:35:05 · 119 阅读 · 0 评论 -
Vue组件：组件通信（父往子、子往父、非父子）
组件通信（父往子）：组件的作用域是独立的自定义标签对开始标签中设置的属性，会自动被组件模板的根元素继承父往子通信的步骤：1.将要传递的数据，作为属性放置在自定义标签对的开始标签中2.子组件通过特殊的props属性接收要传递的数据(通过属性名)3.在子组件中设置一个变量，将传递的数据作为初始值接收注：如果只执行前两步，子组件会受父组件影响三步都执行时...原创 2019-12-09 21:25:35 · 230 阅读 · 0 评论 -
Vue组件：创建、template模板、data、父子组件
1、创建注册全局组件 ：任意vue实例均可使用，本质是个自定义标签对，组件可以重复调用；Vue.component(arg1,arg2);arg1:组件名称，即自定义标签名，命名方式有三种：my-com,myCom,MyCom；arg2:是个对象，描述组件的相关信息；template:模板内容，即组件内部的内容，也是自定义标签对中的内容； ...原创 2019-12-05 17:41:54 · 2809 阅读 · 0 评论 -
Vue基础语法：属性绑定、事件绑定、表单控件、计算属性
1、属性绑定 <style> .color { color: red; } .ftred { color: red; font-size: 22px; } </style>属性绑定指令v-bind，可以简写为...原创 2019-12-03 17:18:10 · 1331 阅读 · 0 评论 -
Vue基础语法：条件判断、循环遍历、内容绑定
vue中包含有大量的指令，指令具有固定的功能或作用指令即属性，v-开头1. 条件判断1）v-show2）v-if,v-else指令所在的标签必须连贯写，否则语法错误3）v-if,v-else-if,v-else注：值为true时，指令所在的标签在页面中显示值为false时，v-if指令所在的标签，在DOM树上不存在的v-show指令所在的标签，在DOM树...原创 2019-12-02 20:16:20 · 405 阅读 · 0 评论 -
Vue简介
vue:view构建视图层(用户界面，等价于html页面)的渐进式框架；框架和库的理解:库：jquery.js / underscore.js / moment.js(日期处理库) / echarts.js本质是一堆函数的集合，每次调用一个函数，实现一个特定的功能框架：vue.js / react.js / angular.js...原创 2019-12-02 19:43:45 · 229 阅读 · 0 评论