（26）打鸡儿教你Vue.js

达达前端

发布于 2019-07-08 18:35:25

8330

发布于 2019-07-08 18:35:25

文章被收录于专栏：达达前端达达前端达达前端

weex框架的使用

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();

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.07.04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js