vue
关注
分享
扫一扫
vue
miller.zc
记录和分享一些工作和学习中的笔记
展开
-
vue基础
1、核心概念:vueJs的核心理念是数据驱动DOM,一般情况下最好不要直接操作DOM。2、实例和数据:代码:<body> <div id="app"> {{masseg}} </div></body><script type="text/javascript"> var app=new Vue({ el:"#...原创 2019-03-31 15:12:57 · 260 阅读 · 0 评论 -
Vuejs表单与v-model
1、v-model的理解:v-model指令实际是一个语法糖,当使用v-model指令双向绑定的时候,做了两件事情：一件是v-bing(绑定了DATA数据),一件是v-on(声明了表单事件,每个表单的事件可能不同,但是本质都是把当前表单的值赋给data里面的变量(绑定的这个对象))...原创 2019-04-01 21:52:42 · 261 阅读 · 0 评论 -
vue组件(父传子，子传父、父子双向绑定、非父子关系值传递)
1、概念:组件是vuejs最核心的功能,主要是为了复用和相互传值。分为父传子，子传父、父子双向绑定、非父子关系值传递。2、父传子:例子: <div id="app"> <button @click="add"></button> <my-component :input-text="total"></my-c...原创 2019-04-05 14:00:12 · 2421 阅读 · 0 评论 -
vuejs的插槽(slot)
1、概念:我的理解是slot就是一个插槽,将父组件的html混入到子组件里面。普通的slot，数据和数据的展现形式(html和样式),都由父组件决定,子组件只能决定出现的地方.作用域slot,数据由子组件提供,展现形式有父组件决定,我感觉就是父组件把数据加工样式后,再替换掉子组件的slot标签元素。2、普通slot例子:<div id="app"> <my...原创 2019-04-06 22:21:21 · 492 阅读 · 0 评论 -
组件总练习（bootstrap+vuejs）,商品增删改查(主要知识点,组件\slot)
1、功能:列表的增删改查和标签页转换,下拉框,单选框。2、代码css: .tabs-tab{ display: inline-block; padding: 4px 16px; margin-right: 6px; margin-bottom: 10px; background: #fff; border: 1px s...原创 2019-04-21 20:04:42 · 414 阅读 · 0 评论 -
vue组件练习(调查问卷),主要运用到slot和组件知识
vuejs实战,问卷调查练习.一、要求:1、实现上下翻页,提交等功能2、验证选择框的选择数量等3、按钮做成组件二、思路:1、三个页面,表现形式是相同的,只是内容不同,这种情况选择用作用域插槽比较好,作用域插槽,数据来自于子组件2、按钮要根据当前页,用v-if或者v-show来控制置灰或者显示,做出组件三、CSS<style type="text/css"> ...原创 2019-05-07 10:05:08 · 1656 阅读 · 0 评论 -
Render函数(基础一)
一、概念:Vue当状态更新的时候并非直接更新dom,而是通过diff比较,更新需要更新的虚拟dom,用以提高效率。Render函数就是用来创建虚拟dom的。Render函数通过createElement参数(此参数也是一个function),来创建Virtual Dom(虚拟节点),我感觉当可以用参数来判断显示或者要生成某个元素的时候,用render比较方便。二、createEleme...原创 2019-05-08 22:43:55 · 2360 阅读 · 0 评论 -
关于webPack
一、什么是webPack：webPack是自动打包静态资源的工具二、为什么要用webPack我感觉主要是三点:(1)将js和css等静态资源打包成一个文件,减少HTTP请求量。(2)可预处理一些中间语言,编译成js或者css(3)方便模块化开发和前后端分离三、webPack的运行环境1、webpack通过npm(管理nodejs包的工具)安装,所以先安装nodejs2、nod...原创 2019-06-01 12:40:38 · 122 阅读 · 0 评论 -
Router和Vuex
一、前端路由是什么：我感觉前端路由就相当于后台的action一样,负责转发页面.配置了前端路由,页面跳转不需要请求后台,更好的实现前后端分离。主要用于SPA（单页面应用）,路由转发不跳转到另外一个页面,只是动态挂载另外的一个组件。二、怎样实现前端路由：1、main.js里面引入vue-router插件并使用：import VueRouter from 'vue-router';Vue...原创 2019-06-08 19:02:24 · 334 阅读 · 0 评论 -
Vuejs实战基础篇和进阶篇(前12章)学完之后,做的小练习(表格curd和tab页切换)
一、项目结构说明:用vue-cli搭建项目,components目录放组件,router目录放路由页面,Vuex目录里面放各个模块的vuex信息(共享的数据和操作数据的方法)二、最终效果:说明:最终效果是多个tab页切换,表格tab也可以操作表格数据(增删改查和排序,筛选),考卷页面可以上下翻页和提交答案还有答案验证。三、各个页面说明:(1)、Vuex目录:<1&...原创 2019-06-15 19:56:20 · 555 阅读 · 0 评论 -
Vue.js实战知乎日报-------前期准备(配置nodejs跨域代理)
一、为什么要配置跨域代理：浏览器发送请求,如果域名、协议、端口号不同,就会返回不了数据,这个时候就需要处理跨域问题。二、跨域代理的原理:因为服务器端是不受域限制的,所以可以通过本地服务器的代理来绕过浏览器，先请求服务器端,由服务器转发请求到指定的接口,然后由服务器端返回指定的数据。三、实现:(1)、配置nodeJs跨域服务proxy.js文件:const http=requir...原创 2019-06-19 22:32:38 · 261 阅读 · 0 评论 -
vue.js实战,知乎日报项目(重点在于代理服务)
1、项目结构2、请求工具类unti.js//引入axiosimport axios from 'axios';//设置api接口和imgPath根路径const Util={ apiPath:'/apis', imgPath:''}//声明axios发送请求的方法ajax,设置发送请求的根路径为apiPath,// 也就是说不管什么地方调用Util.ajax方法// 路...原创 2019-07-19 22:01:26 · 381 阅读 · 0 评论 -
vue.js实战,最后一个项目(电商系统),总结
一、项目目录:二、基础配置:(1)、项目全局引入jq和bootstrap<1>、npm/cnpm install jQuery 安装jq<2>、修改webpack.base.conf.js文件:在头部加上var webpack = require('webpack');在node属性的plugins属性里加上plugins: [ new webpac...原创 2019-07-19 23:14:03 · 8033 阅读 · 1 评论 -
npm和代理服务以及引入各种外部资源的配置
1、 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ npm install -g cnpm --registry=https://registry.npm.taobao.org2、安装vue-lic工具 npm install -g vue-cli 3、安装webpacknpm install --save-dev webpack 4、初始化vue-cli...原创 2019-07-20 10:54:06 · 464 阅读 · 0 评论 -
Vue.js结合element-ui(电商项目&&考试问卷)
一、项目结构二、基础配置(引入js框架\样式\vuex\router\axios等):和上一个博客中的一样,不同的是需要多一个element-ui配置:（1）、安装npm install element-ui -S（2）、main.js里面引入: import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chal...原创 2019-07-30 17:00:07 · 3362 阅读 · 0 评论