（26）打鸡儿教你Vue.js
weex框架的使用
weex介绍 安装开发环境
Weex样式，内建组件，模块和事件
html，JavaScript，Css的概念
weex开发环境的搭建
安装依赖 node.js
npm install -g weex-toolkitweex -vnpm install -g weex-toolkit
Weex init project
安装依赖，目录项目文件中
npm install
npm run serve
npm run devnpm run serve
npm run devweex通用样式和文本样式
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 initvar vm = new Vue({
el: '#app',
data: {
title: 'hello Vue'
},
// 过滤器
filters: {
},
// 实例化创建完成以后
mounted: function () {
this.cartView();
},
methods: {
cartView: function () {
this.title = "Vue Hello"
}
}
});
// 全局过滤器
Vue.filter();举报
腾讯云开发者
