第1章 课程介绍简单回顾前端近几年的框架模式，了解不同时期下的框架特点。其次介绍Vue框架的背景和核心思想，以及同其它MV*框架的对比。1-1 课程-导学1-2 前端框架回顾1-3 vue概况以及核心思想1-4 vue框架优缺点对比第2章 Vue基础从0到1，如何搭建一个简单的Vue项目；本章节主要讲解Node和Npm环境的搭建，其次介绍vue-cli脚手架的使用，以及通过详细拆解介绍脚手架生成的配置文件信息，最后给大家介绍了Vue涵盖的基础语法。2-1 no...
1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key="index" :class="{‘active‘:currentSort==index}" @click="active(index)"><span>{{item.name}}</span><i v-if="item.icon" :class="‘fa fa-‘+item.icon"></i></div>2.在循环的代码那里添加 :class="{‘active‘:currentSort==index}"3.添加样式.active {color: #009eef; }4.初始化数据 data() {return {currentSort:0,}},5.调用方法 meth...
<html> <meta charset="utf-8"> <head> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> </head> <body> <div id="app"> <ul v-show="flag==1"> <li v-for="item in lists.slice(0,3)">{{item.name}}</li> </ul> <ul v-show="flag==2"> <li v-for="item in lists.slice(3,7)">{{item.name}}</li> </ul> <ul v-show="flag==3"> <li v-for="item in lists.slice(7)">{{item.na...
vue-cli 2.0在webpack.prod.conf.js代码配置 最顶层 增加 const version = new Date().getTime()cosnt webpackConfig = merge(baseWebpackConfig, {..., // 此处省略// 增加outputoutput: {path: config.build.assetsRoot,filename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),chunkFilename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),}...,// 在 new HtmlWebpackPlugin new HtmlWebpackPlugin({...
Node.js 的安装和环境变量的配置参考：Node.js安装及环境配置之Windows篇配置国内数据源注意：在安装好了 npm 以后，修改数据源为淘宝的，因为使用官方的镜像源太慢了。查看当前数据源：npm config get registry设置淘宝镜像源：npm config set registry https://registry.npm.taobao.org配置缓存目录和模块安装目录参考：Node.js安装及环境配置之Windows篇npm 和 cnpm 的区别： cnpm 是国内的版本，其实在设置了淘宝源以后，根本不...
state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components：state里面的数据可以方便的映射到组件上 然后渲染组件 Actions：当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互 然后它可以取commit一个mutations 注意：我们也可以在组件中直接commit一个mutations Mutations：是唯一可以修改State的途径 其他任何方式修改都是不...
Vue 项目发布流程 linux版一、通过node创建 Web 服务器创建node项目，并安装express，通过express快速创建web服务器，并将vue打包生成dist文件夹，托管为静态资源主要代码如下：const express = require(‘express‘)//创建web服务器 const app = express()//托管静态资源 app.use(express.static(‘./dist‘))//启动web服务器 app.listen(80,()=>{console.log(‘web server running at http://127.0.0.1‘) }) 1）新建 发布文件夹...
vue图片、背景图片路径问题vue中引入图片经常会出现路径问题，在此记录一下：1.组件中 <img> 引用图片<img src="../assets/img/logo.png" > 2.app.vue <style>中引入图片 body {background: url(‘../static/img/back5.jpg‘);} 3.组件行间样式引入背景图片 <div style="background-image:url(’static/img/1.jpg‘)"> 行间动态引入背景图片 <div :style="‘background-image:url(\‘static/img/‘+btnscard.back+‘\‘)‘"> 原...
子组件<template> <div> <slot name="icon" :text="text"></slot> </div> </template> <script> export default{ name: ‘YtIcon‘, data(){ return { text:"我是子组件" } } } </script>父组件<template> <div id="app"> <yt-icon> <!-- 通过slot-scope --> <template slot="icon" slot-scope="data"> {{data.text}} </template> </yt-icon> </div> </template> 原文：https://www.cnblogs.com/jiorence/p/14715584.html
1.前段代码<el-form-item label="证件照片" prop="idImage"><input @change=‘ss‘ type="file"> </el-form-item>2.script代码 ss(event){var reader =new FileReader();//创建读取文件的方法var img1=event.target.files[0];reader.readAsDataURL(img1);//将文件已url的形式读入页面var that=this;reader.onload=function(e){ that.ruleForm.idImage= reader.result; //把图片的二进制流付给表单ruleForm里面的idImage }// ...
ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。本文主要目的是总结一些开发过程中比较耗时间去查找，文档中没有具体说明的常见问题，同时希望能给新上手此框架的同学提供一些参考作用。 1.Table对接后台返回数据针对Table数据格式与...
前端真是日新月异了，前不久的教程就很多不一样了。搭环境搭了几小时，终于搭好了。首先奉上别人的老版教程，可以先按这个来：点击查看老版可以先跟这个来，按照教程开始打包后会报错。现在好好说说其中跟现在不一样的坑。 报错一：现在webpack已不支持自定义属性了，故 webpack.config.js 中的 Favlist 的键值对要删掉。报错二：config.resolve.extensions[0] 不能为空，故要删去相对应的数组中第一项的空字符串，只留 ‘.js‘ 和...
由于公司需要，需要把项目拆分，前端使用vue框架。最近面试vue总结的试题 1：mvvm框架是什么？它和其他框架的区别是什么？mvvm 全称model view viewModel,model数据模型，view视图层，viewModel就是链接两者区别的话，其实就是vue是数据驱动，通过数据来显示视图层而不是节点操作，这也是减少DOM操作，提高了性能下面来个图加强一下关系：2：v-model是什么？vue中标签怎么绑定事件？v-model可以实现双向绑定，v-class、v-for、v-if...
1、 页面代码：设置高度变量 :height="banH +‘px‘"<template> <div class="home"> <div class="slider"> <el-carousel :interval="5000" arrow="always" :height="banH +‘px‘"> <el-carousel-item v-for="img in banImgList" :key="img.id"> <img :src="img.image" class="picImg"/> </el-carousel-item> </el-carousel> </div> </div></template>2、引入静态图片数据，初始化高度，...
vue.js最强大的，应该是自动更新DOM了。只要把变量包裹在{{ }}里面，就会在处理完毕后，直接显示处理后的结果。貌似所有变量都可以放在一个vue对象的data属性里面，然后就可以在储存函数的computed , methods 属性里面通过this关键字来使用这些变量。this 就是vue对象了。至于绑定属性，可以:link=“varHref” :style=“{height: varHeight +px}” 这种简单的操作来做。其实是v-bind的简写。甚至可以@click 代替 v-on:click 。可以...