vueJS+ES6开发移动端APP实战项目笔记
一、什么是MVVM框架
MV*包括MVC、MVP、MVVM
MVVM框架由Model、View、ViewModel构成。
Model指的是数据,在前端对应的是JavaScript对象。
View指的是视图,在前端对应的是DOM
ViewModel观察Model和View的变化来做更新,实现了数据的双向绑定。
前端MVVM框架主要包括:angularJS、reactJS、VueJS
二、Vuejs的核心思想(数据驱动、组件化)
1、数据驱动:数据双向绑定
2、组件化:
页面任何部分都可以作为一个组件,页面只是组件的容器,一个组件对应一个vue文件,组件之间可以传递参数,例如:某个页面分为菜单、内容、底部,可以将菜单作为一个组件。
三、Vue-cli
帮助写好Vuejs代码的工具,帮助我们做目录结构、本地调试、代码部署、热加载、单元测试等工作,它是vuejs的脚手架
安装:
全局安装:npm install -g vue-cli
新建项目(这里使用webpack模板):vue init webpack
接着:
cd 进入项目
npm install 安装依赖代码库
npm run dev 启动服务
四、vue组件
<template><div @click="showDetail">Hellodiv><OtherComponent>OtherComponent>template><style lang="stylus" type="text/stylus">/*样式*/style><script type="text/ecmascript-6">
import OtherComponent from './components/other.vue'//导入其它组件 export default{
//props对象是引用当前组件可能需要传的参数,以便后续的计算操作,这里是一个数字类型的参数 props: {
argu: {
type: Number
}
},
//data函数,返回一个对象,里面是能进行双向绑定的数据 data(){
return{
detailShow:false
}
},
//computed计算属性 处理复杂的逻辑 computed: {
count () {
returnthis.argu +1
}
},
//事件方法 methods: {
showDetail: function () {
this.detailShow =true
}
},
//注册组件 components:{
'other-component':OtherComponent,
}
}
script>
五、vue-router基础用法(2.x版本)
文档:http://router.vuejs.org/zh-cn/ 最详细的用法还需要多看文档
安装:
在package.json文件的依赖添加vue-router值
执行npm install 命令,它能根据package.json里列举的npm模块来安装所有模块
使用:
比如说页面常见的tab切换,通过点击,在一个区域内切换相应的组件
切换按钮:router-link组件作为单页某个路由组件的链接,它会渲染成a链接,to属性指定链接地址
切换区域:router-view组件,路由匹配的组件在这块区域渲染
导入需要的组件
vueJS+ES6开发移动端APP实战项目笔记的更多相关文章
- vue.js移动端app实战1:初始配置
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述 ...
- vue.js移动端app实战3:从一个购物车入门vuex
什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...
- vue.js移动端app实战1
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述 ...
- vue.js移动端app实战2:首页
貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...
- vue.js移动端app实战2
貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects,简单 ...
- 智普教育Python培训之Python开发视频教程网络爬虫实战项目
网络爬虫项目实训:看我如何下载韩寒博客文章Python视频 01.mp4 网络爬虫项目实训:看我如何下载韩寒博客文章Python视频 02.mp4 网络爬虫项目实训:看我如何下载韩寒博客文章Pytho ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- Anyoffice -HTML5大赛 悦心(基于H5开发安卓音乐app)-项目总结
项目在线演示地址:http://rose111.applinzi.com/ github 地址:欢迎star https://github.com/midoxinxin/YueX-Music 悦心,一 ...
- Flutter开发移动端APP的入门教程及简单介绍
Dart&Flutter环境搭建 安装 dart SDK 如果只开发移动应用,那么您不需要Dart SDK; 只需安装Flutter. 这里就直接安装 Flutter (dart SDK已经集 ...
随机推荐
- Apache Hudi 0.7.0版本重磅发布
重点特性 1. Clustering 0.7.0版本中支持了对Hudi表数据进行Clustering(对数据按照数据特征进行聚簇,以便优化文件大小和数据布局),Clustering提供了更灵活地方式增 ...
- flutter环境部署
一,xcode开发环境配置问题记录 1,Signing for "Runner" requires a development team xcode需要配置AppleID: 1,X ...
- Excel 一张表最多能装下多少行多少列数据?
一个工作簿可以装下255张,那么每张工作表可以装下多少行多少列数据呢? 1.任意打开或新建一个Excel文档. 2.在文档中,找到其左上角的"文件"按钮,点击选择"选项& ...
- cnpm安装依赖时报Error: Cannot find module 'core-js/modules/es6.regexp.constructor'
解决方案:npm install core-js@2 大致猜测:cnpm掉包所致...
- 19.损坏磁盘阵列及修复&磁盘阵列+备份盘
1.在确认有一块物理硬盘设备出现损坏而不能继续正常使用后,应该使用mdadm 命令将其移除,然后查看RAID 磁盘阵列的状态,可以发现状态已经改变. [root@Centos ~]# mdadm /d ...
- Splits CodeForces - 964A
题意: 我们定义一个不上升的且和为 n 的正整数序列,叫做 n 的分解. 比如, 下面是8的分解: [4, 4], [3, 3, 2], [2, 2, 1, 1, 1, 1], [5, 2, 1]. ...
- 二、Python基础(input、变量名、条件语句、循环语句、注释)
一.input用法 input在Python中的含义为永远等待,直到用户输入了值,从而将所输入的值赋值另外的一个东西. n=input('请输入......') 接下来用一个例子学习input的用法 ...
- HTTP的传输编码(Transfer-Encoding:chunked) / net::ERR_INVALID_CHUNKED_ENCODING
https://blog.csdn.net/m0_37668842/article/details/89138733 https://www.cnblogs.com/jamesvoid/p/11297 ...
- [整理] LRU 算法的实现方式
目录 概念 方法选择 实现方案(基于LinkedHashMap) 改进方案 1.LRU-K 2.Two queue 3.Multi Queue(MQ) LRU类算法对比 LRU 在 Redis 中的应 ...
- K8S(02)管理核心资源的三种基本方法
系列文章说明 本系列文章,可以基本算是 老男孩2019年王硕的K8S周末班课程 笔记,根据视频来看本笔记最好,否则有些地方会看不明白 需要视频可以联系我 管理k8s核心资源的三种基本方法: 目录 系列 ...