(26)打鸡儿教你Vue.js
weex框架的使用
1、weex开发入门
2、weex开发环境搭建
3、掌握部分weex组件模块
4、了解一些vue基本常见语法
5、制作一个接近原生应用体验的app
weex介绍
安装开发环境
Weex样式,内建组件,模块和事件
html,JavaScript,Css的概念
weex开发环境的搭建
安装依赖 node.js
npm install -g weex-toolkit
weex -v
npm install -g weex-toolkit
Weex init project
安装依赖,目录项目文件中
npm install
npm run serve
npm run dev
npm run serve
npm run dev
weex通用样式和文本样式
weex支持的通用样式
weex中文本样式
<web>
组件:
<web>
组件用于在页面中嵌入一张网页,src用以指定资源地址。
不支持如何子组件。
pagestart, <web>组件开始加载时执行
pagefinsh, <web>组件完成加载时执行
error, <web>组件加载错误时执行
<template>
<div class="content">
<web class="web" :src="src" v-on:pagestart="start" @pagefinish="finissh" @error="error"></web>
</div>
</template>
<script>
export default {
data: {
src: "http://imooc.com"
},
methods: {
start: function(e) {
console.log('start');
},
finish(e){
console.log(‘finish’);
},
error(e){
console.log('error')
}
}
}
</script>
<style>
.content {
width: 750px;
height: 600px;
}
.web {
height: 600px;
width: 750px;
}
</style>
<webview>组件
Weex是一个使用现代Web技术构建高性能移动应用程序的框架。
高性能
Weex使用本机组件和本机模块来利用本机渲染性能和平台功能。组件和模块都是可插拔的。
跨平台
您可以使用单个代码库生成不同的捆绑文件,以便在Web,Android和iOS平台上运行。本机组件和模块在每个平台上都有不同的实现,但它们都暴露了相同的API。
前端友好
Weex拥抱现有的Web生态系统,您可以使用现代前端技术来开发您的移动应用程序。Weex支持最常用的CSS属性和最流行的前端框架,例如Vue和Rax,将来可能更多。
vue-router介绍:
vue-router针对vue.js开发的一个前端路由工具,可以快速的开发单页面应用。
vue-router是以vue.js插件的形式存在的
创建Vue实例
v-for指令渲染商品列表
过滤器的使用
Vue过滤器的使用
购物车综合案例
单击商品金额计算和单选全选功能
商品总金额计算,删除功能
地址列表综合案例:
地址列表过滤和展开所有功能实现
卡片选中,设置默认
创建一个Vue实例
v-for指令渲染产品数据
Filter对金额和图片进行格式化
使用v-on实现产品金额的动态计算
cd /Private_Wokspace
cd checkout-Vue2
npm init
var vm = new Vue({
el: '#app',
data: {
title: 'hello Vue'
},
// 过滤器
filters: {
},
// 实例化创建完成以后
mounted: function () {
this.cartView();
},
methods: {
cartView: function () {
this.title = "Vue Hello"
}
}
});
// 全局过滤器
Vue.filter();
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
(26)打鸡儿教你Vue.js的更多相关文章
- (29)打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- (22)打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- (21)打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- (19)打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- (18)打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- (17)打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
- (15)打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- (13)打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- (12)打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- [高清] SpringBoot揭秘快速构建微服务体系
------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...
- PKPM BIMViewer的使用
模型的使用,目前有两个方案, 一个是使用全局组件,在单页面的主页面中进行嵌套 <template> <div id="model"> <!-- 这样的 ...
- Hibernate中Session.get()/load()之区别
原文链接http://sunxin1001.iteye.com/blog/292090 Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象.其区 ...
- FreeRTOS任务运行时间信息统计
相关宏的设置 configGENERATE_RUN_TIME_STATS //使能 portCONFIGURE_TIMER_FOR_RUN_TIME_STATS() //配置一个高精度定时器/计数器提 ...
- uboot使用脚本
使用mkimage命令 # mkimage -A ARM -O linux -T script -C none -n "script" -d *.sh *.img # tftp x ...
- SAP云平台里的三叉戟应用
大家第一次看到SAP MTA这个词组,会联想到什么? Jerry第一次看到的时候,联想到的是那一个个足坛著名的三叉戟攻击组合. 海皇波塞冬(Poseidon),奥林匹斯十二神中地位仅次于宙斯的大神,海 ...
- https和证书小结
https://www.cnblogs.com/andy9468/p/10484598.html https://www.cnblogs.com/andy9468/p/10414371.html ht ...
- 【转】常见的tcp/ip协议的知识
1.tcp/ip协议的层数 左图是osi 7层模型,右图是tcp/ip 4层模型.二者对应关系如上. 2.socket中TCP的三次握手建立连接详解 我们知道tcp建立连接要进行“三次握手”,即交换三 ...
- Linux命令——df
参考:12 Useful “df” Commands to Check Disk Space in Linux 简介 df用于查看文件系统磁盘空间使用情况. df 读取的数据几乎都是针对一整个文件系统 ...
- 迷你商城后台管理系统————stage3项目部署测试汇总
系统测试 在项目部署到云服务器之前,已通过本机启动springboot程序,访问localhost:8080,输入登陆的账户等一系列操作测试:功能测试.健壮性测试,系统已满足用户规定的需求. 系统部署 ...