(26)打鸡儿教你Vue.js
weex框架的使用
1、weex开发入门
2、weex开发环境搭建
3、掌握部分weex组件模块
4、了解一些vue基本常见语法
5、制作一个接近原生应用体验的app
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();
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
相关文章
- vue - webpack.dev.conf.js for FriendlyErrorsPlugin
- vue - webpack.dev.conf.js for CopyWebpackPlugin
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- vue - Vue介绍
- 【Vue】通守v-if加载div时,总是闪一下的解决方法(已解决,代码示例)
- 【Vue】Vue-cli(脚手架)中的main.js内容解读
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- Vue.js 使用cordova camera插件调取相机
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- Vue 项目中断点没有跳转到指定源码的问题
- (8)打鸡儿教你Vue.js
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- VUE-016-CSS 控制 div 层级显示为最顶层,CSS层级样式控制实例
- Vue.js 组件编码规范
- vue项目中两种回车键搜索功能实现
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- js 给json添加新的字段,或者添加一组数据,在JS数组指定位置删除、插入、替换元素
- Vue.JS 对比其他框架
- vue做一个多图片上传组件
- vue中引入awesomeswiper的方法以及编写轮播组件
- Vue学习第23天 —— Vuex中getters详细讲解及使用案例,与computed计算属性对比
- Vue开发实例(08)之Icon图标的使用
- Vue动态控制input的disabled属性的方法
- 剖析 Vue.js 内部运行机制 (1)
- Vue 强制刷新文档流
- 我们为什么以及是如何从 Angular.js 迁移到 Vue.js?
- VUE.JS组件化开发实践