（26）打鸡儿教你Vue.js

weex框架的使用

1、weex开发入门
2、weex开发环境搭建
3、掌握部分weex组件模块
4、了解一些vue基本常见语法
5、制作一个接近原生应用体验的app

weex介绍
安装开发环境

Weex样式，内建组件，模块和事件

html，JavaScript，Css的概念

image.png

image.png

image.png

weex开发环境的搭建

安装依赖 node.js

image.png

npm install -g weex-toolkit

weex -v

image.png

npm install -g weex-toolkit
Weex init project
安装依赖，目录项目文件中
npm install
npm run serve
npm run dev

image.png

npm run serve
npm run dev

weex通用样式和文本样式

weex支持的通用样式
weex中文本样式

image.png

image.png

组件：
组件用于在页面中嵌入一张网页，src用以指定资源地址。

不支持如何子组件。

pagestart, 组件开始加载时执行

pagefinsh, 组件完成加载时执行

error, 组件加载错误时执行

组件

image.png

image.png

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

image.png

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

吹逼交流群