复习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(输出字符串不解析html)与插值表达式一致{{ }}
v-html(输出html解析html)
v-bind (绑定属性)
v-if (条件渲染)
v-show (display:none)
.push(加数据)
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
Vue.component() vue创建全局组件
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。(原生JS)
$destroy() 销毁Vue的实例
2.生命周期
生命周期函数就是Vue实例在某一时间点会自动执行的函数
3.组件的使用
props:[] 子组件接收父组件数据 子组件不能直接更改父组件的值
is 使用组件的时候渲染顺序问题解决的方式
子组件的数据必须是函数
声明时用ref DOM操作是取的引用名字 获取时用$refs
$emit(事件名,参数) 父组件传事件的方法 接收参数的值step
watch:{} (监听器)
props:{} 用对象来校验父组件穿过了的参数
4.前端路由
路由就是根据网站的不同,展现出不同的内容
<router-view/> 显示的是当前路由地址所对应的内容
5.其他补充
npm install fastclick --save 安装点击时间2秒延迟去除插件
npm run star 和npm run dev 启动项目
npm install vue-awesome-swiper@2.6.7 --save 轮播图插件2.6.7版本
npm install -g vue-cli 安装vue cli 脚手架
子组件中的data要写成方法 data: function(){} ES6 简写为data(){}
npm install axios --save ajax插件
npm install better-scroll --save 类似APP原生滚动条插件
ref属性 可以帮我么获取DOM
Console.log(e.target.innerText)
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
@touchstart //手指触碰屏幕
@touchmove //手指在屏幕上滑动
@touchend //手指离开屏幕
DOM 元素上加key 区别DOM
数组.splice(1,1 {id:"33" ,text:"dell"}) 删除下标1的数组删除1条 同时加入2条数据
添加对象和数组 Vue.set(xx.xxxx,"键值","值")或xx.$set
split() 方法用于把一个字符串分割成字符串数组。(原生JS)
reverse()方法用于翻转数组。(原生JS)
join()方法用于数组转换成字符串。(原生JS)
6.axios
7.VueX
Store 创建仓库 VueX
State 所有的公用数据存在State 中 State: { }
actions 组件调用做异步处理或者批量操作
mutations
commit
main.js 创建实例的时候把Store 传递进去所以每个组件都可以用
组件中可以this.$store.state.参数名 使用
改变actions 用this.$Store .dispatch (actions,传递的参数)
组件调用actions 在调用mutations 去改变State 的数据
localStorage H5本地存储
import { mapState } from 'vuex'
在计算属性 中用展开运算符...mapState([ ]) 也可以是对象 mapState等于把VUEX的数据映射到计算属性中
7.git 简单使用
git --version 查看版本 (git CMD上面输入)
git clone 加地址 线上仓库的代码放在指定的位置(git bash上面输入)
git status 命令用于显示工作目录和暂存区的状态
git add. 先把文件放在暂存区
git commit -m '说明' 放在本地仓库
git push 本地上传到服务器
git pull 把分支拉到本地来
git checkout 分支名 本地切换分支
git status 查看当前所在分支
git 分支名 origin/分支名 合并分支 最后在git push
git merge 分支名 新分支融合分支
复习Vue的更多相关文章
- (13)打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- vue,react,angular三大web前端流行框架简单对比
常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...
- vue指令及组件
复习 """ vue: 为什么选择vue - 综合其他框架优点,轻量级,中文API,数据驱动,组件化开发,数据的双向绑定,虚拟DO 渐进式js框架 - 选择性控制 - 创 ...
- vue项目创建与使用
目录 复习 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 vue项目启动生命 ...
- vue 指令,成员,组件
目录 复习 v-once指令 v-cloak指令(了解) 条件指令 v-pre指令(了解) 循环指令 todolist留言板案例 实例成员 - 插值表达式符号(了解) 计算属性 属性监听 组件 局部组 ...
- vue 3
目录 复习 Vue项目需要自建服务器:node npm:包管理器 - 为node拓展功能的 vue cli环境:脚手架 - 命令行快速创建项目 创建Vue项目 启动项目 项目目录 组件 在根组件中渲染 ...
- vue one
目录 复习 Vue框架 Vue的优点 Vue的使用 vue完成简单的事件 vue操作简单样式 小结 指令 文本指令 事件指令 属性指令 条件指令 复习 """ 1.BBS ...
- GearCase UI v0.2 版本
12 月闲暇的时间一直在更新 GearCase.通过不懈的努力,GearCase 今天迎来了一次中间版本的更新,这次的更新主要加入了 Springs 动画组件,部分组件也添加了此组件的动画效果. &g ...
- 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法
最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...
随机推荐
- ArcGIS农村土地承包经营权辅助建库软件说明书
软件作者:闫磊 电话:18987281928 或13108507190 QQ:853740877,QQ交流群:236352926 1. 软件安装... 4 2. 系统整体界 ...
- Visual Studio Code 保存时自动格式化的问题
烦人的说,保存的时候自动格式化, 格式话后,代码就失效了 纳尼!!!! 网上其他人都说 JS-CSS-HTML Formatter这个插件在捣蛋! 试了,的确如此. 找到他,给禁用,就不会 ...
- 微服务架构之spring cloud 介绍
在当前的软件开发行业中,尤其是互联网,微服务是非常炽热的一个词语,市面上已经有一些成型的微服务框架来帮助开发者简化开发工作量,但spring cloud 绝对占有一席之地,不管你是否为java开发,大 ...
- Android GridView显示SD卡的图片
GridView的XML布局: main.xml: <GridViewxmlns:android="http://schemas.android.com/apk/res/android ...
- SSM 框架-03-MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建
SSM 框架-03-MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建 如果你是使用 Eclipse 你需要先安装 MyEclipse,请参考:SSM 框架-02-MyEclipse ...
- 【Yii系列】错误处理和日志系统
缘起 跟随上一章的脚步,上一章中,我们主要讲解了在用户发起请求,解析请求,服务器反馈请求以及session的一些知识点,这过程中,难免会遇到一些问题,比方说数据库查询失败,用户输入导致脚本出错,网络问 ...
- MySQL在线加字段实现原理
博客已转移到腾讯DBA博客 http://tencentdba.com/ 腾讯互娱内部维护了一个MySQL分支,基于官方5.5.24,实现了类似于Oracle 11g的快速加字段功能,这个分支我们内部 ...
- 利用.NET Core类库System.Reflection.DispatchProxy实现简易Aop
背景 Aop即是面向切面编程,众多Aop框架里Castle是最为人所知的,另外还有死去的Spring.NET,当然,.NET Core社区新秀AspectCore在性能与功能上都非常优秀,已经逐渐被社 ...
- js构建类的方法
Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class.(不过,ES6引入了Class这个概念,作为对 ...
- 自动化测试基础篇--Selenium unittest生成测试报告(HTMLTestRunner)
如何生成HTMLTestRunner测试报告.接上篇文章,对于unittest框架,运行后,测试结果不便于查看,同时多个case存在的时候,可能会导致case result记录不正确的情况. 为此,引 ...