复习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">& ...
随机推荐
- Spring Data MongoDB 环境搭建
一.开发环境 spring版本:4.0.6.RELEASE spring-data-mongodb版本:1.4.1.RELEASE junit版本 4.11 maven版本:3.0.5 二.pom.x ...
- <Android 基础(二十四)> EditText
介绍 A text field allows the user to type text into your app. It can be either single line or multi-li ...
- GIS 地理坐标分类
wgs84 GPS系统直接通过卫星定位获得的坐标.(最基础的坐标.) gcj02 兲朝已安全原因为由,要求在中国使用的地图产品使用的都必须是加密后的坐标.这套加密后的坐标就是gcj02 google的 ...
- Selenium对浏览器的支持
1.火狐浏览器 优点:FireFox Dirver对页面的自动化测试支持得比较好,很直观地模拟页面的操作,对JavaScript的支持也非常完善,基本上页面上做的所有操作FireFox Driver都 ...
- d3js shape深入理解
本文将视图了解d3js提供的帮助我们创建矢量图形的helper函数,比如下面的: http://d3indepth.com/shapes/ lines curves pie chart segment ...
- Python3.x urlib包
在Python3.x中,我们可以使用urlib这个组件抓取网页,urllib是一个URL处理包,这个包中集合了一些处理URL的模块,如下: 1.urllib.request模块是用来打开和读取URLs ...
- Python学习---面向对象的学习[深入]
类的深入学习 a. Python中一切事物都是对象 b. class Foo: pass obj = Foo() # ...
- Linux traceroute命令详解
traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一样, ...
- [EffectiveC++]item23:Prefer non-member non-friend functions to member functions
99页 导致较大封装性的是non-member non-friend函数,因为它并不增加“能否访问class内之private成分”的函数数量.
- Eclipse和JDK的安装配置
工欲善其事,必先利其器.最近开始学习Java语言,必不可少的要先安装一个IDE,我选择了eclipse,下面我们讲讲如何来安装及配置. Step1:工具的下载 这里我们需要用到三个工具安装包,JDK. ...