当前分类

vue教程

vue教程

Vue学习之路1-集成环境安装

1.前言Vue 是一款友好的、多用途且高性能的javascript框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,它能够帮你创建可维护性和可测试性更强的代码库,Vue是渐进式的javascript框架库。2.安装简介Vue集成环境三大核心组件:node.js,npm,...

vue教程

Vue学习之路2-项目初搭建

 1、检查环境是否全部安装成功2、创建项目2.1.打开dos命令窗口,使用dos命令转到项目文件夹下:2.2.输入创建项目命令:vue init webpack myproject1 创建不同的打包方式第一种情况:创建不同的打包方式第二种情况:2.3.启动项目,在项目目录下输入启动命令:...

vue教程

Vue学习之路3-浅析Vue-cli搭建项目后的目录结构

1.前言Vue并不限制你的代码结构。但是,它规定了一些需要遵守的规则:1、应用层级的状态应该集中到单个store对象中。2、提交mutation是更改状态的唯一方法,并且这个过程是同步的。3、异步逻辑都应该封装到action里面。2.项目文件目录显示如下3.项目文件解析3...

vue教程

Vue学习之路4-v-bind指令

1. 定义1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外)。2. 语法2.1 完整语法:<span v-bind:class="classProperty"></span >,解释:v-bind 是指令,: 后面的 class 是参数...

vue教程

Vue学习之路5-v-model指令

1. 指令释义v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据,并对一些极端场景进行一些特殊处理。2. 表单输入绑定方式和方法2.1 input框实现...

vue教程

Vue学习之路6-条件渲染

条件指令所谓条件指令是指满足某个条件时执行哪部分代码,不满足条件时执行哪部分条件代码。vue条件指令有v-if,v-else-if,v-else三个,v-if条件渲染用来指示元素是否移除或者插入,根据表达式的值的真假条件渲染元素。v-if示例方式一使用v-if显示标签,当初...

vue教程

Vue学习之路7-v-on指令学习之简单事件绑定

前言在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态等。事件通常与函数结合使用,函数不会在事件发生前被执行。在JavaScript中常见的事件句柄(Eve...

vue教程

Vue学习之路8-v-on指令学习简单事件绑定之属性

 前言上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法。v-on绑定指令属性      .stop属性阻止单击事件继续向上传播(简单点说就是不让父节点及父节点以上的节点事件触发),本示例如果没...

vue教程

Vue收藏资料

组件库的全局引用和按需引用:http://www.cnblogs.com/zhuanzhuanfe/p/7516745.html

vue教程

Vue简介以及基本使用

Vue 是一套构建用户界面的渐进式 框架 框架和库? 框架(基于自身的特点向用户提供一套完整的解决方案,控制权在框架本身,需要使用者按照框架所规定的某种规范进行开发) Vue Angular Reac

vue教程

vue移动端使用video标签

<div v-on:click="playVideo()"><video :src="videoSrc" id="videoPlay" v-show="false" class="video">您的浏览器不支持 video 视屏播放。</video> //隐藏video标签,因为移动端点击视频播放...

vue教程

实时监控文本框输入字数

需求:实时监控文本输入框的字数,并加以限制1、实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度。如:<div><textarea id="txt" maxlength="10"></textarea><p><span id="t...

vue教程

vue组件之间的传值

组件传参:组件实例的作用域是孤立的。这意味着不能在子组件的模块中直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递。如在父组件中向子组件传值:<headerBar message = “hello” />在子组件中需要使用props获取到父组件的传值:...

vue教程

vuex store的运用

vuex用来管理vue的所有组件状态。首先下载vuex,”vuex”:”^3.0.1”,运用”vuex-persistedstate”来对数据进行缓存。下载”vuex-persistedstate”在文件中引入:(新建一个store文件夹,在文件夹下的index.js文件进行如下编写)import Vue from 'vue...

vue教程

vue中引用高德地图API

调用高德地图的API,首先注册高德开发平台的账号,称为高德地图开发者,创建应用后申请key(步骤如下):进入高德开发平台——进入右上角控制台——进入做上角应用管理——创建key安装高德地图组件: vue-amap引入组件:import AMap from 'vue-amap'V...

vue教程

用vue实现各类弹出框组件

简单介绍一下vue中常用dialog组件的封装:实现动态传入内容,实现取消,确认等回调函数。首先写一个基本的弹窗样式,如上图所示。在需要用到弹窗的地方中引入组件:import dialogBar from './dialog.vue'components:{'dialog-bar': dialogBar...

vue教程

vue项目中的elementui的表格中画甘特图

最近的项目要求甘特图在elementui中实现,在此做出总结。性能限制,不能传入太多的数据。条件(时间):计划开始时间、计划结束时间、开始时间、结束时间、最大时间和最小时间。思维:渲染表格头、渲染天数、填充色块。实现简单的表格<el-table:data = ...

vue教程

基于Elementui的日期选择器时间范围限制

一般在实际开发场景中我们需要对时间选择做一些限制,如不能选择今天之前的时间、不能选择今天以后的日期、限制日期不能大于开始日期等等。日期组件<el-date-pickerv-model="value1"type="date"placeholder="选择日期":picker-opt...

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部