专栏首页达达前端(26)打鸡儿教你Vue.js

(26)打鸡儿教你Vue.js

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2019年最好的JavaScript图表库

    随着数据收集和使用持续呈指数级增长,对这些数据进行可视化的需求变得越来越重要。开发人员寻求将数百万个数据库记录整合到美丽的图表和仪表板中,人类可以快速直观地解释...

    代码医生工作室
  • 小程序自定义单页面、全局导航栏

    产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的。

    Fundebug
  • UI debug mode

    launch pad line 91行有当前UI 运行mode的判断. 如果当前运行在non debug mode下,则line 110 动态加载core-mi...

    Jerry Wang
  • when and where is getControllerName called

    在开发js view时,需要实现一个方法getControllerName,并且正确返回该js view对应的controller name.

    Jerry Wang
  • 爬虫神器!比selenium更高效!

    介绍Pyppeteer之前先说一下Puppeteer,Puppeteer是谷歌出品的一款基于Node.js开发的一款工具,主要是用来操纵Chrome浏览器的 A...

    小小詹同学
  • 是时候开始学小程序开发了

    在去年2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线 。时至今日,小程序已经有整整一年时间了 。在2017年12月28日,微信更新的...

    架构师修行之路
  • 可视化流式地理空间数据

    最近参与了一个涉及流媒体信用卡交易数据并根据风险概率对其进行分类的项目。在此基础上,想探索可视化数据的选项。决定专注于地理方面,因为它是尝试识别欺诈性交易时的关...

    代码医生工作室
  • 周期性取count请求是如何在前台setup的 - Tile count

    在Chrome network tab里能够观测到每隔一个固定的时间间隔,前台会发起到后台的请求,读取最新的某transaction document的个数: ...

    Jerry Wang
  • UI5 navigation logic

    UI5 view之间navigation的核心代码在folder resources/sap/ui/thirdparty里的js实现。

    Jerry Wang
  • 如何系统的学习web前端开发?

    因为许多前端新人自学一段时间之后,就迷茫了,不知道学到了什么阶段,也不清楚接下来该往哪个方向学习。要知道前端开发的方向非常的多,相互之间的知识分叉也非常的多。

    web前端教室

扫码关注云+社区

领取腾讯云代金券