起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 12473|回复: 14

[分享] x5中使用vue初体验

  [复制链接]

1018

主题

4396

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
11202
QQ
发表于 2016-11-10 23:24:15 | 显示全部楼层 |阅读模式
本帖最后由 ecoolper 于 2017-1-12 22:57 编辑




    1.什么是 Vue.js
Vue(读作 /vju:/,跟 view 同音)是一个用于构建用户界面的渐进式框架。与其它庞大的框架不同,Vue 的设计完全就是为了让开发者可以增量式使用。Vue 的核心库专注于视图层,上手简单,开发者可以很容易地将它集成到其它库或者已有的项目中。另一方面,Vue 如果结合现代化的工具以及支持库一起使用,完全有能力支撑复杂的单页应用
2.和Knockout比较(X5集成的Knockout)
Knockout 是 MVVM 和依赖跟踪的先驱,它的响应式系统和 Vue 十分相似。考虑到它提供的功能,Knockout 的浏览器支持很的出色,支持 IE6!而 Vue 则只支持 IE9+。
和vue比较,它的组件系统缺少一整套生命周期钩子,传递子组件的接口相对于 Vue 来说也非常笨重,即使它经常会被用到。
在 API 设计上两者也有一些哲学上的差异,你可以在下面这个简单 todo 列表的示例代码里看到这些差异。虽然有点主观,但很多人都认为 Vue 的 API 要更简单优雅
3.Xmlns问题
Vue用有类似这样的写法:v-bind:title,需要在添加xmlns,可以这样添加xmlns:v-bind="http://vue.sike.io/"   xmlns:v-on="http://vue.sike.io/"

4.Vue.js 的核心系统,让你可以用直观的模版语法,声明式地渲染数据



    1.                 var app = new Vue({
    2.                         el : '#' + this.getIDByXID("app"),
    3.                         data : {
    4.                                 message : 'Hello Vue.js!'
    5.                         }
    6.                 });
    复制代码
    1. <div xid="app">{{ message }}</div>
    复制代码



      5.在 v-for 块里,我们可以访问父作用域的属性。v-for 也支持可选的第二参数,它的值是当前数组项的索引
      1. var example2 = new Vue({
      2.                         el : '#example-2',
      3.                         data : {
      4.                                 parentMessage : '父作用域',
      5.                                 items : [ {
      6.                                         message : '苹果'
      7.                                 }, {
      8.                                         message : '香蕉'
      9.                                 } ]
      10.                         }
      11.                 });
      复制代码
      1. <ul id="example-2">
      2.             <li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
      3.           </ul>
      复制代码



        6.除了通过文本插值的方式,我们也可以像这样绑定元素属性
        1. var app2 = new Vue({
        2.                         el : '#' + this.getIDByXID("app-2"),
        3.                         data : {
        4.                                 message : '加载这个页面的时间是:' + new Date()
        5.                         }
        6.                 });
        复制代码
        1. <span xid="span6"><![CDATA[除了通过文本插值的方式,我们也可以像这样绑定元素属性:]]></span>
        复制代码
        7.要显示或隐藏一个元素也是很简单的
        1. var app3 = new Vue({
        2.                         el : '#' + this.getIDByXID("app-3"),
        3.                         data : {
        4.                                 seen : true
        5.                         }
        6.                 });
        7.                 this.app3 = app3;
        复制代码
        1. <div xid="app-3">
        2.             <p v-if="seen">你现在能看到这个元素</p>
        3.           </div>
        复制代码

        8.还有好几个别的指令,每一个都有特殊的功能。例如,v-for 指令可以将数组显示成一个列表

        1. var app4 = new Vue({
        2.                         el : '#' + this.getIDByXID("app-4"),
        3.                         data : {
        4.                                 todos : [ {
        5.                                         text : '学习 JavaScript'
        6.                                 }, {
        7.                                         text : '学习 Vue'
        8.                                 }, {
        9.                                         text : '写一个很棒的应用'
        10.                                 } ]
        11.                         }
        12.                 })
        复制代码
        1. <div xid="app-4">
        2.             <ol>
        3.               <li v-for="todo in todos">{{ todo.text }}</li>
        4.             </ol>
        5.           </div>
        复制代码

        9.要让用户跟你的应用交互,我们可以使用 v-on 指令来添加事件侦听器,它们会调用 Vue 实例的方法

        1. var app5 = new Vue({
        2.                         el : '#' + this.getIDByXID("app-5"),
        3.                         data : {
        4.                                 message : 'Hello Vue.js!'
        5.                         },
        6.                         methods : {
        7.                                 reverseMessage : function() {
        8.                                         this.message = this.message.split('').reverse().join('')
        9.                                 }
        10.                         }
        11.                 });
        复制代码
        1. <div xid="app-5">
        2.             <p>{{ message }}</p>  
        3.             <button v-on:click="reverseMessage">将信息逆序打印</button>
        4.           </div>
        复制代码

        10.Vue 还提供了 v-model 指令,它可以轻松地在输入控件和应用状态之间创造一个双向绑定

    1. var app6 = new Vue({
    2.                         el : '#' + this.getIDByXID("app-6"),
    3.                         data : {
    4.                                 message : 'Hello Vue!'
    5.                         }
    6.                 });
    复制代码
    1. <div class="col" xid="app-6">
    2.             <p>{{ message }}</p>  
    3.             <input v-model="message"/>
    4.           </div>
    复制代码

    鼠标悬停.gif 双向绑定.gif 显示隐藏元素.gif 信息逆序打印.gif

    vue.zip (54.63 KB, 下载次数: 270)
孤舟蓑笠翁,独钓寒江雪。
X5牛刀交流民间第一群:30057529
提供有偿服务,联系WX:18332024
bex5疑难问题解决方案

718

主题

2841

帖子

5657

积分

论坛元老

Rank: 8Rank: 8

积分
5657
QQ
发表于 2016-11-11 00:00:39 | 显示全部楼层
不懂
WEX5初学者,欢迎初学者交流
QQ:597558229
tel:15857336322
回复

使用道具 举报

50

主题

215

帖子

625

积分

高级会员

Rank: 4

积分
625
QQ
发表于 2016-11-14 10:32:24 | 显示全部楼层
不错,源自angularJS, 全中文文档,轻便。前几天也看过相关文档。

感觉这种数据绑定  和 X5的 data 有些异曲同工之妙啊
回复 支持 反对

使用道具 举报

31

主题

138

帖子

584

积分

高级会员

Rank: 4

积分
584
QQ
发表于 2017-1-8 07:11:53 | 显示全部楼层
难道这是Wex5微信小程序实现思路之一?谢谢提供信息!
回复 支持 反对

使用道具 举报

31

主题

138

帖子

584

积分

高级会员

Rank: 4

积分
584
QQ
发表于 2017-1-8 07:13:57 | 显示全部楼层
可怜的是,仅基于html5原生插件,现在丰富的Wex5控件如何呢?这是官方实现小程序支持最头疼的问题之一。
回复 支持 反对

使用道具 举报

34

主题

148

帖子

492

积分

中级会员

Rank: 3Rank: 3

积分
492
QQ
发表于 2017-1-23 15:38:26 | 显示全部楼层
用习惯了wex5提供的数据绑定、展示方式,要接受vue等其他框架,还真的有点难。
别的不说,淡淡说所见即所得的界面设计和这套不错的属性编辑器就比别的方便。
回复 支持 反对

使用道具 举报

1018

主题

4396

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
11202
QQ
 楼主| 发表于 2017-1-24 11:21:53 | 显示全部楼层
atfa 发表于 2017-1-23 15:38
用习惯了wex5提供的数据绑定、展示方式,要接受vue等其他框架,还真的有点难。
别的不说,淡淡说所见即所得 ...

x5的设计环境很强大
孤舟蓑笠翁,独钓寒江雪。
X5牛刀交流民间第一群:30057529
提供有偿服务,联系WX:18332024
bex5疑难问题解决方案
回复 支持 反对

使用道具 举报

1018

主题

4396

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
11202
QQ
 楼主| 发表于 2017-1-24 11:39:32 | 显示全部楼层
本帖最后由 ecoolper 于 2017-2-10 09:08 编辑

饿了么基于vue2.0的组件库 http://element.eleme.io/#/zh-CN/component/installation
孤舟蓑笠翁,独钓寒江雪。
X5牛刀交流民间第一群:30057529
提供有偿服务,联系WX:18332024
bex5疑难问题解决方案
回复 支持 反对

使用道具 举报

34

主题

148

帖子

492

积分

中级会员

Rank: 3Rank: 3

积分
492
QQ
发表于 2017-2-7 10:22:50 | 显示全部楼层
本帖最后由 atfa 于 2017-2-7 10:26 编辑
ecoolper 发表于 2017-1-24 11:21
x5的设计环境很强大

是啊,我一直在找vue框架有没有类似wex5这样的设计环境,都没有找到。
好像现在有很多项目都是给前端工程师提供后端便利的,甚至包括node.js这样的东西,
但是为什么没有给后端工程师带来前端便利的东西呢?wex5算是一个,其他就没有了。
作为一个从c, c++, c++ builder, Delphi, VB, VS一路走来的码农,真的觉得,在APP界面开发领域,哪个项目要是没有一个好的所见即所得拖拽式的开发环境就是历史的倒退啊。
回复 支持 反对

使用道具 举报

34

主题

148

帖子

492

积分

中级会员

Rank: 3Rank: 3

积分
492
QQ
发表于 2017-4-27 15:52:21 | 显示全部楼层
本帖最后由 atfa 于 2017-4-27 16:57 编辑

今天有点时间,搞了一下vue,兄弟你给的方案的确可以在wex5的项目里面用vue的数据数据绑定方式,但是现在网上一大把的基于vue的组件库,包括你推荐的这个饿了么的库,好像跑不起来啊,我换着法子的引用了半天也没跑起来,你有什么方法吗?

我用一个小例子来展示出现的错误:

test.w

  1. <?xml version="1.0" encoding="UTF-8"?>

  2. <div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:m;">  
  3.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"/>  
  4.   <script src="https://unpkg.com/vue/dist/vue.js"/>  
  5.   <script src="https://unpkg.com/element-ui/lib/index.js"/>
  6.   <div component="$UI/system/components/justep/model/model" xid="model" onLoad="modelLoad"/>
  7.     <div id="app">
  8.     <span style="width: 0px; height: 0px; visibility: hidden; margin: 0px; padding: 0px;" id="pos_placeholder"></span><el-button @click="visible = true">按钮</el-button>
  9.     <el-dialog v-model="visible" title="Hello world">
  10.       <p>欢迎使用 Element</p>
  11.     </el-dialog>
  12.   </div>
  13. </div>
复制代码
test.js
  1. define(function(require) {
  2.         var $ = require("jquery");
  3.         var justep = require("$UI/system/lib/justep");

  4.         var Model = function() {
  5.                 this.callParent();
  6.         };

  7.         Model.prototype.modelLoad = function(event) {
  8.                 var app = new Vue({
  9.                         el : '#app',
  10.                         data : function() {
  11.                                 return {
  12.                                         visible : false
  13.                                 }
  14.                         }
  15.                 });
  16.         };

  17.         return Model;
  18. });
复制代码

运行报错:<el-button @click="visible = true">按钮</el-button> 这里不能出现@符号
Caused by: com.justep.ui.exception.UIException: com.justep.ui.exception.ValidationException: line 9, column 16 of file:///C:/dev/wexfinal/model/UI2/vue/test.w: Fatal error: Element type "el-button" must be followed by either attribute specifications, ">" or "/>".file:///C:/dev/wexfinal/model/UI2/vue/test.w, line 9, column 16: Fatal error: Element type "el-button" must be followed by either attribute specifications, ">" or "/>".

"@"是vue的缩写,把"@"符号换成"v-on:"报错如下:

Caused by: com.justep.ui.exception.UIException: com.justep.ui.exception.ValidationException: line 9, column 44 of file:///C:/dev/wexfinal/model/UI2/vue/test.w: Fatal error: The prefix "v-on" for attribute "v-on:click" associated with an element type "el-button" is not bound.file:///C:/dev/wexfinal/model/UI2/vue/test.w, line 9, column 44: Fatal error: The prefix "v-on" for attribute "v-on:click" associated with an element type "el-button" is not bound.
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2025-7-10 22:38 , Processed in 0.061509 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表