复习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">& ...
随机推荐
- Recovering InnoDB table from an .ibd file.
Recovering an InnoDB table from only an .ibd file. Sometime you may need to recover a table when all ...
- c# 控制台定时程序
using System; using System.Timers; namespace DaoChuCore2 { class Program { static void Main(string[] ...
- Linux常用命令(二)————压缩+解压
tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...
- 下面有关css选择器的说法错误的是?
下面有关css选择器的说法错误的是? .intro --- 选择 class="intro" 的所有元素. #firstname --- 选择 id="firstname ...
- Visual studio 2015已经停止工作无限重启
今天遇到一个问题,某个文件在撤销的时候vs报错,然后提示到路径 “C:\Users\username\AppData\Roaming\Microsoft\VisualStudio\14.0\***.x ...
- HTML学习---HTTP基础学习详解
1.HTTP访问服务器原理 客户端输入IP->查找本地hosts缓存->有则直接用获取到的IP访问服务器->服务器响应后返回客户端->客户端页面显示 ...
- 类库文件引用web服务报错解决方法-在 ServiceModel 客户端配置部分中,找不到引用协定的默认终结点元素
由于需求,需要改造原有应用,因原有应用是写在console下面的,现在需要开放至web下, 想到BIZ层应用代码都是一样的,又不想在web下在添加引用,而重复写代码,故将原有的console下的服务和 ...
- Kendo UI 的 k-template
官网上的例子: 1. <span id="output"></span><script>var template = kendo.templat ...
- Xcode中模拟器慢
取消下图中框框打勾
- HDFS Namenode&Datanode
HDFS Namenode&Datanode HDFS 机制粗略示意图 客户端写入文件流程: NN && DN Namenode(NN)工作机制 NN是整个文件系统的管理节点. ...