vue使用（二） - 相关文章

【vue使用（二）】的更多相关文章

一天带你入门到放弃vue.js(二)

接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if="user=='admin' && chmod == 777">欢迎管理员</p> <p v-else-if="user != 'admin' && user !='' ">欢迎用户登录</p> &…

day 82 Vue学习二之vue结合项目简单使用、this指向问题

Vue学习二之vue结合项目简单使用.this指向问题本节目录一阶段性项目流程梳理二 vue切换图片三 vue中使用ajax 四 vue实现音乐播放器五 vue的计算属性和监听器六 chorme浏览器添加vue扩展程序七 xxx 八 xxx 一阶段性项目流程梳理直接上图吧: 1.首页: 2.免费课程页还有比如全部里面有个django框架学习,点击进去,具体的信息展示和课程套餐选择等功能 3.登陆页还有购物车添加成功提示,更新成功提示,当然这些都是前端根据后端的代码逻辑…

day 81 Vue学习二之vue结合项目简单使用、this指向问题

Vue学习二之vue结合项目简单使用.this指向问题本节目录一阶段性项目流程梳理二 vue切换图片三 vue中使用ajax 四 vue实现音乐播放器五 vue的计算属性和监听器六 chorme浏览器添加vue扩展程序七 xxx 八 xxx 一阶段性项目流程梳理直接上图吧: 1.首页: 2.免费课程页还有比如全部里面有个django框架学习,点击进去,具体的信息展示和课程套餐选择等功能 3.登陆页还有购物车添加成功提示,更新成功提示,当然这些都是前端根据后端的代码逻辑…

JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博主都没什么太大的关系,博主还是老老实实研究自己的技术吧.技术之路还很长,且行且研究吧. 本文原创地址:http://www.cnblogs.com/landeanfen/p/6518679.html 一.为什么组件很重要前两天,看到一篇关于汇总vue开源项目的…

前端笔记之Vue（二）组件&案例&props&计算属性

一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. 说白了,就是HTML.CSS.JS行为的一个封装. Vue中组件的实例化…

Vue（二十七）当前GitHub上排名前十的热门Vue项目（转载）

原文地址:https://my.oschina.net/liuyuantao/blog/1510726 1. ElemeFE/element tag:vue javascript components star:15.8k link:https://github.com/ElemeFE/element 简介 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型.通过基础的 24 分栏,迅速简便地创建布局. 官网地址:http…

vue.js 二维码生成组件

安装通过NPM安装 npm install vue-qart --save 插件应用将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ components: {VueQArt} }) 在你的应用中这样使用vue-qart <vue-q-art :config="config" :downloadButton="downloadButton"></vue-q-art> data…

vue(基础二)_组件，过滤器，具名插槽

一.前言主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 4.过滤器二.主要内容 1.组件 (1)组件在mvc中充当的角色 (1)局部组件三个步骤:1.创建局部主键,2.挂载局部组件,3.使用局部组件 <!DOCTYPE html> <html lang="e…

VUE 生成二维码(qrcodejs)

1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 1.2 引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.$qrCode = QRCode; ,页面中调用可直接使用 this.$qrCode 1.3 页面展示与配置 1.3.1 html代码 <div…

Vue（二十三）vuex + axios + 缓存运用（以登陆功能为例）

(一)axios 封装 (1)axios拦截器可以在axios中加入加载的代码... (2)封装请求后期每个请求接口都可以写在这个里面... (二)vuex user.js import { login } from '@/api/login' const state = { userInfo: null, } const getters = { get_userInfo (state) { let userInfo = state.userInfo if (!userInfo) { use…

vue的二维码生成器

vue项目开发的时候经常会遇到需要将一个网址链接转化为二维码的需求,方便用户扫描观看,以下就是我在寻找vue二维码生成器的时候踩过的坑. 不能用的二维码生成器 qrcode node-qrcode vue-qrcode qrcodejs2 建议使用 xkeshi/vue-qrcode,感谢知乎-vue二维码生成器 npm install xkeshi/vue-qrcode --save 组件中使用 <div v-show="qrcodeUrl" class…

自学vue笔记 (二) : 实例与生命周期

一: 什么是实例我们说了,Vue 应用都应该从构建一个 Vue 实例开始.它管理着挂载在它身上的所有内容,因此实例是一个根实例, 所有的组件都应该挂载在根实例上面.创建一个 Vue 实例,需要通过 new 一个构造函数的方式,同时传入一个对象. 该对象可以传入很多内容,驱动页面的数据,模板,挂载的元素节点,方法,生命周期函数,子组件等. 二:属性和方法每个 Vue 实例都会代理其 data 对象里的所有属性,并且让其作为驱动页面的数据.当 data 中的数据改变时,页面也会响应式的发生改变…

VUE系列二：vue基础

一.组件嵌套 1. 新建一个组件Users.vue <template> <div class="users"> <ul> <li v-for="user in users"> {{user}} </li> </ul> </div> </template> <script> export default { name: 'users', data () { r…

vue复习(二)

一.组件介绍每一个组件都是一个vue实例每个组件均具有自身的模板template,根组件的模板就是挂载点每个组件模板只能拥有一个根标签子组件的数据具有作用域,以达到组件的复用二.局部组件 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>局部组件</title> <script type=&…

vue 画二维码

首先安装一下相关的插件 qrcode2 npm install --save qrcode2 然后在需要画二维码的页面引入一下 import QRCode from 'qrcode2' 最后在methos里面定义一个方法去调用一下就行了在对应的vue文件里定义一个二维码的容器 <div id="qrcode" ref="qrcode"></div> 这样就大功告成了. 效果图如下…

从后端到前端之Vue（二）写个tab试试水

上一篇写了一下table,然后要写什么呢?当然是tab了.动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了. 好吧,这里其实只是试试水,感受一下vue的数据驱动可以怎么玩,通过一个个实例学习一下vue的各个知识点.这里要看看方法和css如何设置. 一.目标 1. 可以动态创建tab. 2. 可以切换(废话).可以关闭tab. 3. Css的设置. 4. 方法的处理方式. 5. 效果图二.思路应该有好多种方式可以实现,这里先试一个,其他的以后再说.…

Vue项目二、vue环境搭建以及Vue-cli使用及详解

一.Vue多页面应用的环境搭建每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用. 环境的搭建如下,在页面中引入如下框架 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 二.Vue单页面应用(SPA) 第一次进入页面的时候会请求一个html文件,刷新清除一下.切换到其他组件,此时路径也相应变化,但是并…

element el-table表格的vue组件二次封装（附表格高度自适应）

基于vue的el-table表格二次封装组件方法前言在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多个页面使用相同的功能,就要多次重复写逻辑上差不多的代码,所以打算对表格这个组件进行封装,将相同的代码和逻辑封装在一起,把不同的业务逻辑抽离出来.话不多说,下面就来实现一下吧. 一.原生el-tbale代码--简单の封装这里直接引用官方的基础使用模板,直接抄过来(✪ω✪),下面代码中主要是抽离htm…

7.vue组件(二)--双向绑定,父子组件访问

本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等一. 如何实现父子组件之间的双向绑定案例描述: 父子组件双向绑定父组件有一个message, 子组件有一个文本框让他们两个同步变化实现思路: 1. 子组件接收父组件传递过来的参数 2. 先实现子组件的双向绑定 3. 子组件将数据传给父组件实现步骤: 第一步: 子组件接收父组件的data <!DOCTYPE html> <h…

Vue学习(二)-Vue中组件间传值常用的几种方式

版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值父组件向子组件传值第一种方式: props 父组件嵌套的子组件中,使用v-bind:msg='xxxx'进行对象的绑定,子组件中通过定义props接收对应的msg对象如图父组件代码 <template> <div>  <!-- <m-chil…

Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）

本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mixins.组件中渲染函数的使用.…

vue生成二维码插件qrcodejs2

1.页面 <div id="qrCode" ref="qrCodeDiv"></div> 2.导入插件 import QRCode from 'qrcodejs2' 3.使用生成: 注意定时器得要,避免dom未生成报错 document.getElementById("qrCode").innerHTML = ""; setTimeout(() => { new QRCode(this.$ref…

Vue（二）简单入门

根据上一节搭建的hello-world工程(包含Router),用Webstorm打开,我们先运行一下工程. 界面如下 .. 我将在About里面介绍一下Vue的相关内容. 打开About.vue,修改内容为: <template> <div class="about"> <h1>{{msg}}</h1> </div> </template> <script> export default { data…

Vue（二十六）父子组件通信

今天写了一个分页公共组件,就出现了父子组件通信的问题,今天来总结下我遇到的父子组件通信问题一.子组件调取父组件的数据或方法 (1)props 想要把父组件的值,传到子组件中,使用props 比如你在父组件中定义的一个data,你想在子组件中使用父组件: 子组件: 这样子组件中的这几个值,都是由父组件传递过来的 (2)$parent 我一般使用this.$parent来获取父组件的data和method,但是今天却出现了一个问题因为我是写的公共组件,在多个页面中使用,发现有些页面可以,而有些…

vue（二）-父子组件语法

语法: 子组件: 给子组件弄个名字,name.props用来声明从父组件传来的数据.其他html和css部分正常写. 父组件: HTML部分:使用子组件name作为标签来显示子组件.:items=“item”,是将数据传给子组件.items是在子组件声明的,item是父组件中data返回的. js部分:使用import 将子组件导入: 给父组件命名(在router中会用到),data中返回子组件声明需要的items数据. components中写入子组件名字. css部分: 建议使用scoped…

如何入门vue之二

学习完指令之后我们需要学习的就是组件. 在学习组件前我们要了解一下 methods 用来处理事件的. computed用来计算属性他就是类似于data一样只不过是动态的处理数据里面写的方法当成属性直接使用注意的是它不能传参数. data用来存放需要展示的数据.组件内的data 需要使用return 的形式. 好了接下来说说什么是组件. component 组件. 定义全局组件 Vue.component('组件名',{tempalte:'要写的模板'}): Vue.component('…

Vue（二十二）vuex小案例（官网计数案例整合）

1.使用 vue-cli 创建项目(具体操作可以参考前面的文章) ... 2.下载 vuex - npm install vuex -S 3.将 vuex 添加到项目中 (1)在项目中创建store文件夹 (2)在main.js中引入store的入口文件 (3)在 store -> index.js 中引入vuex 和 counter.js (4)在 store -> module -> counter.js 中操作初始 state 对象 store -> getters.…

Vue（二十一）使用express模拟接口数据

1.下载express ... 2.使用vue-cli下载好项目文件 ... 3.找到文件 build - webpack.dev.conf.js 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require…

Vue（二十）项目初始化步骤

提:需要安装 node.js / npm淘宝镜像 / webpack / vue-cli脚手架构建工具 1.创建项目 - vue init webpack framework https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md (ESLint规范) 2.切换到项目文件目录下,安装项目依赖 - cd framework - cnpm install 3.启动项目 - npm run dev 4.添加css初始化文件…

Vue（二）vue-devtools插件

安装vue-devtools插件,便于在chrome中调试vue https://github.com/vuejs/vue-devtools 因为chrome要FQ,打不开,所以不能直接进去安装拓展程序,只能选择手动安装这里面是上述操作过后的文件 https://pan.baidu.com/s/1kUUagBl 密码:4xfg 直接下载我这个文件后解压打开谷歌更多工具 - 拓展程序直接把这个文件夹丢进去成功, 重新启动这个页面便可以了... ... ... ... 页面调试中,会一直显…