复习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">& ...
随机推荐
- Creating dynamic/configurable parameterized queries in Entity Framework
https://dillieodigital.wordpress.com/2013/05/09/creating-dynamicconfigurable-parameterized-queries-i ...
- MySQL order null 0 - 把null和0(零)排在最后
1.一般的order by 语句其返回的结果为 SELECT `vcenter_ip`, `status`, `sla_id` FROM vm_list ORDER BY sla_id ASC; 2. ...
- 1 python使用networkx或者graphviz,pygraphviz可视化RNN(recursive)中的二叉树
代码地址https://github.com/vijayvee/Recursive-neural-networks-TensorFlow 代码实现的是结构递归神经网络(Recursive NN,注意, ...
- Sqlserver 游标&存储过程&临时表混合使用实例
通过嵌套,根据表中记录的表名与列名到指定位置取值. --声明存储过程 ProPIMS if (exists (select * from sys.objects where name = 'ProPI ...
- resin下发布项目报错java.lang.NoSuchMethodError: javax.persistence.Table.indexes()[Ljavax/persistence/Index
我的resin版本为4.0.56; 项目在tomcat下启动正常,打包在resin下发布时报错:java.lang.NoSuchMethodError: javax.persistence.Table ...
- jQuery 小案例
用jquery实现 百度换肤的模式; <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- mysql那些招
show table status mysql官方文档在 http://dev.mysql.com/doc/refman/5.1/en/show-table-status.html 这里的rows行是 ...
- 骑士周游问题跳马问题C#实现(附带WPF工程代码)
骑士周游问题,也叫跳马问题. 问题描述: 将马随机放在国际象棋的8×8棋盘的某个方格中,马按走棋规则进行移动.要求每个方格只进入一次,走遍棋盘上全部64个方格. 代码要求: 1,可以任意选定马在棋盘上 ...
- TCP/IP 协议图
- 13、Node.js 全局对象
主要用于调试,显示信息,重点看例子在浏览器 JavaScript 中,通常 window 是全局对象, Node.js 中的全局对象是 global ####__filename__filename ...