（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_Wokspacecd checkout-Vue2npm 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();