x5中使用vue初体验

ecoolper

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>
复制代码

vue.zip (54.63 KB, 下载次数: 270)
2017-1-12 22:56 上传
点击文件名下载附件

郭德成

不懂

wxdmvp

不错，源自angularJS， 全中文文档，轻便。前几天也看过相关文档。

感觉这种数据绑定  和 X5的 data 有些异曲同工之妙啊

googleman

难道这是Wex5微信小程序实现思路之一？谢谢提供信息！

googleman

可怜的是，仅基于html5原生插件，现在丰富的Wex5控件如何呢？这是官方实现小程序支持最头疼的问题之一。

atfa

用习惯了wex5提供的数据绑定、展示方式，要接受vue等其他框架，还真的有点难。
别的不说，淡淡说所见即所得的界面设计和这套不错的属性编辑器就比别的方便。

ecoolper

atfa 发表于 2017-1-23 15:38
用习惯了wex5提供的数据绑定、展示方式，要接受vue等其他框架，还真的有点难。
别的不说，淡淡说所见即所得 ...

x5的设计环境很强大

ecoolper

饿了么基于vue2.0的组件库 http://element.eleme.io/#/zh-CN/component/installation

atfa

ecoolper 发表于 2017-1-24 11:21
x5的设计环境很强大

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

atfa

ecoolper 发表于 2017-1-24 11:39
饿了么基于vue2.0的组件库 http://element.eleme.io/#/zh-CN/component/installation

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

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

test.w

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

复制代码

test.js

1. define(function(require) {
   
2.         var $ = require("jquery");
   
3.         var justep = require("$UI/system/lib/justep");
   
4. 
   
5.         var Model = function() {
   
6.                 this.callParent();
   
7.         };
   
8. 
   
9.         Model.prototype.modelLoad = function(event) {
   
10.                 var app = new Vue({
    
11.                         el : '#app',
    
12.                         data : function() {
    
13.                                 return {
    
14.                                         visible : false
    
15.                                 }
    
16.                         }
    
17.                 });
    
18.         };
    
19. 
    
20.         return Model;
    
21. });

复制代码

运行报错：<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.