【vue复习】的更多相关文章

vue复习

vue 复习   options的根属性 el:目的地(srting || DOM元素) template 模板 data 是一个函数 , return一个对象   对象中的key, 可以直接在页面中使用  在js中this.key名 data中的属性,在dom中直接用在js中 this.xxx compoents:key是组件名,value是组件对象 methods:一般用业配合 xxx 事件 prpos:子组件接收的参数设置['title'] 指令 v-if/v-show:if就是插入或移除…

vue复习(二)

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

vue复习(一)

一.认识Vue 定义:一个构建数据驱动的Web界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方面构建单页面应用程序(SPA) 二.引入Vue <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue导入</title> </head> <body&…

vue 复习（2）v-bind的应用 v-bind:classv-binf:style

dasdclass与style绑定v-bind 1. 绑定HTML Class 对象语法 有些时候我们想动态的切换class的类名.在原生的js或jq中我们就要通过事件来动态的改变class类名,但在vue中我们可以通过v-bind:class 来实现这一功能.列<div v-bind:class="{ active: isActive }"></div>data:{isActive:false,}这其中class类名是否存在active取绝于data 中isA…

vue 复习篇. 注册全局组件,和 组件库

初篇 ============================================================== 1. 编写loading组件(components/Loading/index.vue) <template> <div>loading</div> </template> <script> export default { name: 'loading' } </script> 2.注册为全局组件 (c…

[vue]vue基础复习项案例stepbystep

看本篇第二次复习内容即可. 还有一些 文档了这个如 https://www.cnblogs.com/iiiiiher/p/9508733.html https://www.cnblogs.com/iiiiiher/p/8973705.html vue复习项目 1.展示/搜索功能 tofixed 2.删除 filter() 3.全选反选 get checkAll的值, every set 各选项,forEach 4.总价格 reduce 5.选了多少本书 filter+length 6.选中后变灰…

温故vue对vue计算属性computed的分析

vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定义.对于任何复杂的逻辑运算都应该使用计算属性.例子在vue的date中声明一个变量;data:{message:'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例return…

vue项目创建与使用

目录 复习 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 vue项目启动生命周期(重点) 参与文件 main.js:该文件内容不变 App.vue views/RedPage.vue views/BluePage.vue 全局样式文件配置 assets/css/global.css 封装小组件 - Nav导航栏组件 components/Nav.vue views/Home…

复习Vue

以前学过vue,但是工作中一直没有用到都忘记了最近在复习下正好做个笔记偶尔看看,(目前常更新,2018年6月25日) 1.指令 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式.(原生JS)methods(放方法)computed:{} (放 计算属性:内置缓存)$data(获取data里的数据)v-for=“item in xxxx”(v的循环)v-on(v的绑定事件可简写为@) @chick(绑定点击事件)v-model(数据的双向绑定) v-text(输出字符串不解析…

Vue 知识复习(上)

Vue Vue实例 创建实例: var vm = new Vue({ //code }) 数据与方法: 只有当实例被创建时 data 中存在的属性才是响应式的; Vm.b = 'h1' 是不会触发视图的变化的; Object.freeze(),这会阻止修改现有的属性 生命周期: created:实例被创建后执行的代码 mounted:模板编译/挂在之后 update:组件更新之后 destoryed:组件销毁之后 不要在选项属性或回调上使用箭头函数 u 模板语法 文本:{{ }}双括号文本插值,…

vue快速复习手册

1.基本使用 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Vue的基本使用</title> <!-- 01.导包 --> <script src="./js/vue.js"></script> <script> // 03. 监听 window.onload = function () { // 0…

【Vue-01】基础Vue语法+JS复习

Vue学习疑问及总结_SZS 0.vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query.id 返回上一步:this.$router.go(-1) 1.变异方法 (重写:重新实现) Vue包含异族观察数组的变异方法,所以他们将会触发视图更新;这些方法如下: push()/pop()/shift()/unshift()/splice()/sort()/re…

前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目

流式布局思想 """ 页面的尺寸改变动态改变页面布局,或是通过父集标签控制多个子标签,这种布局思想就称之为 - 流式布局思想 1) 将标签宽高设置成 百分比,就可以随屏幕(父集)缩放而缩放 2) 将标签宽高设置成 视图百分比,就可以随屏幕缩放而缩放 3) 将子集字体设置成 继承值,就可以通过父集统一控制子集 """ 例子: <!DOCTYPE html> <html lang="zh"> <hea…

vue学习笔记

来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件.关于vue有一些点是文档中没有提及的,记录一下以便以后查询- 一.Vue的特点 新一代 Vue.js 框架非常关注如何用极少的外部特性来解决应用程序/视图状态同步问题. Vue.js 大部分是基于vue实例(var vm = new Vue({ ... }))完成的.Vue.js 负责给浏览器 DOM 中绑定数据. 1.特点 -- 这部分借鉴浅谈Vue.js的几个特点 (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5…

Vue组件之自定义表单组件

今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单控件绑定"章节却找不到关于这点的介绍了,今天复习的时候在"组件"章节的"使用自定义事件的表单输入组件"小节里发现了这个语法糖的详细描述,特在此记录. vue语法: <input v-model="message"> 实际相当于:…

vue.js+boostrap最佳实践

一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3…

vue.js+boostrap

vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.C…

vue入门 vue与react和Angular的关系和区别

一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上增量开发的设计 vue的核心库"只关注视图层",并…

从零开始学习Vue.js，学习笔记

一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上…

vue实现对表格数据的增删改查

在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注于对数据的操作和处理. 比如我们有一个这样的页面: 我们在这个页面里,就实现了增删改查4个功能,点击链接查看demo[http://www.xiabingbao.com/demo/vue-curd/index.html]. 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:…

vue小组件练习之文字居中对齐组件

时隔多月,继续学习Vue,这次是一个组件的制作过程 先让我们来看一下组件的预期效果 上图为公司自营的一个微信商城的某一部分截图,可以看到红框内部分的文字多行与单行是居中对齐的,我们现在要做的就是使用Vue把里边的文字模块制作成一个可以复用的组件. 首先我们先把css部分拿下来 css: .word-v-middle{ margin-bottom: 0; font-size: 12px; min-height: 31px; display: flex; align-items: center; j…

Vue.directive 自定义指令的问题

1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my…

Vue指令总结---小白同学必看

今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪吧. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值 v-html: string 用法:更新元素的innerHTML:注意:网站动态渲染任意HTML,容易导致XXS攻击 v-show:any 用法:根据…

Vue(day6)

一.webpack中常用的文件loader & 插件 由于版本存在变动,以下安装和配置都有可能发生变化,请以官方文档为准. 1.html-webpack-plugin插件 html-webpack-plugin是在内存中生成html模板的插件plugin 首先安装插件npm install html-webpack-plugin -D,然后在配置文件webpack.config.js中进行插件配置: const HtmlWebpackPlugin = require('html-webpack-…

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)

前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时不复习了,今天呢,咱们就说说用昨天创建的空项目来搭建一个简单的个人博客系统,首先先分析下整体工作流程,然后再动手写代码,主要涉及到 axios 和 vue-router 的相关概念,好啦,开始今天的讲解. 零.要完成的右下角褐色的部分 一.Vue 项目是如何运转的? 1.SPA的挂载页面 —— Index.h…

Vue 进阶之路（一）

vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码,但是在 vue 3.x 出来之前,还是想再复习一下 vue2.x ,好记性不如烂笔头,特此记录,与君共勉! vue 作为国人开发的框架,在很多使用习惯上使我们用起来十分顺手,又有中文官网加持,使我们在学习起来几乎没什么门槛,那接下来我们就开始一点点学习吧. vue 官网教程 https://cn.v…

Vue基础（环境配置、内部指令、全局API、选项、内置组件）

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信…

vue搭建多页面开发环境

自从习惯开发了单页面应用,对多页面的页面间的相互跳转间没有过渡效果.难维护极度反感.但是最近公司技术老大说,当一个应用越来越大的时候单页面模式应付不来,但是没讲怎么应付不来,所以还得自己去复习一遍这两者的区别: 这样对比的话,单页面的优势确实很大,但当我自己去打开某宝,某东的移动端页面时,确实它们都是多页面应用.为什么?我能想到的就几点: 1.单页面使用的技术对低版本的浏览器不友好,大公司还得兼顾使用低版本浏览器的用户啊 2.功能模块开发来说,比如说单页面的业务公用组件,有时候你都不知道分给谁开…

angular与vue的应用对比

因为各种笔试面试,最近都没时间做一些值得分享的东西,正好复习一下vue技术栈,与angular做一下对比. angular1就跟vue比略low了. 1.数据绑定 ng1 ng-bind,{{ scope }}   双向是ng-model ng2  {{scope}}  [scope] 双向是[(scope)]   (ng2的绑定拆分开来,而且支持函数返回是很棒的设计) vue v-bind , {{ scope }} ,:scope 双向是v-model 2.组件化 ng1的组件化就是每个指令…

Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置

整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口:   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密匙部分哦"></script> 2.在bulid/webpack.base.conf.js配置文件中配置BMap,在mod…