（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

<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>组件

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

吹逼交流群