复习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">& ...
随机推荐
- Keras 自适应Learning Rate (LearningRateScheduler)
When training deep neural networks, it is often useful to reduce learning rate as the training progr ...
- github连接提示
解决办法: 1,将连接方式从http更换为ssh.注意,github.com后面一定有(冒号): git remote rm origin git remote add origingit@githu ...
- 一次spring aop 切面的问题
最新项目有个新需求,要在已经写好的controller里面 加上传入参数的验证,由于有多个 controller而且验证每个都要调用其他的服务,故决定采用spring的aop方式. 1.添加aop的验 ...
- zabbix共享内存报错cannot create semaphore set
zabbix共享内存报错 cannot open log: cannot create semaphore set: [28] No space left on device 报错原因: kernel ...
- MyBatis基本配置和实践(四)
一.Mybatis整合spring 1.整合思路 SqlSessionFactory对象应该放到spring容器中作为单例存在. 传统dao的开发方式中,应该从spring容器中获得sqlsessio ...
- vs2015新建web应用程序空模板和添加webapi的模板生成文件的比较
文件名为全红色的,是使用webapi模板生成的新文件夹或文件
- iOS设计模式 - 适配器
iOS设计模式 - 适配器 效果 说明 1. 为了让客户端尽可能的通用,我们使用适配器模式来隔离客户端与外部参数的联系,只让客户端与适配器通信. 2. 本教程实现了适配器模式的类适配器与对象适配器两种 ...
- Nginx学习---企业级nginx环境搭建
1.1. nginx安装环境 1.系统要求 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. 1-1 安装 GCC 源码安装nginx需要依赖gcc环境,需要 ...
- Android App性能优化(一)之布局优化
当创建复杂布局的时候,我们会在xml 文件中添加大量的ViewGroup和View.伴随着每次迭代,View树的层次越来越深,界面加载速度越来越慢,消耗的内存也越来越多.当您的程序出现加载时短暂黑屏或 ...
- TFS使用笔记
TFS是用来存储文件的服务器,放置不同版本的文件.因此文件的数量和内容因版本不同而不同. 在Fig-00中,服务器和本地的对应文件夹Common下的因版本不一致,所以文件数量是不一致的. Fig-00 ...