如何在Weex中使用Vue.js

如何在Weex中使用Vue.js ，和在纯H5开发有什么不同？这篇文章将对这些基本知识简单的总结下。

首先，Weex 并不是一个前端框架，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。

1、内置前端框架

Weex 并不依赖于特定的前端框架，但是目前内置了Vue.js 和Rax.js ，这些框架已经集成到了 Weex SDK，不需要在额外引入。在开发中重新引入Vue 会报错。

1 .1 框架类型标记

在Weex开发过程中，需要明确标记使用的框架类型，目前存在2中标记方式。

1.1.1) Weex v0.16.0 以及更早的版本

在v0.16.0 以及更早的版本中，使用特定格式的注释来标记框架类型，格式是 // { "framework": "xxx" }

// { "framework": "Vue" }   // Vue 框架的类型标记
// { "framework": "Rax" }   // Rax 框架的类型标记

注意： 注释类型标记必须放在代码最前面。 标记之前只能有空格或者空行，不能有其他类型的字符。

1.1.2)  Weex v0.17+

从 v0.17.0 版本开始 Weex 支持使用 ECMAScript 规范中的“指令序言”（Directive Prologue）来标记各种前端框架的类型，标记的格式是 "use weex:xxx"; 兼容单引号和双引号，字符串内容保持小写。

"use weex:vue";   // Vue 框架的类型标记
"use weex:rax";   // rax 框架的类型标记

注意： 字符串类型标记必须放在所有可代码之前。 标记之前可以有空格、空行或者注释，但是不能有可执行的代码。

添加标记webpack 示例：

// webpack插件定义
let webpackPlugins = [    
    // 实例化banner
    new webpack.BannerPlugin({
        banner: '// { "framework": "Vue" }\n',
        raw: true,
        exclude: 'Vue'
    })
];

1.2）内置Vue.js 版本

从WeexSDK  v0.10.0 以及后续的版本中，集成了 v2 版本的 Vue.js。出于更好的性能和更小的代码体积目的，Weex 集成的是运行时版本的 Vue（vue.runtime.js），不包含编译器。

2、执行环境

Weex 主要用于编写多页的应用程序，每个页面都对应了原生开发中的 View 或者 Activity，并且保持自己的上下文，同时执行环境也是互相隔离的。
每个页面的 Vue 变量都是不同的实例，即使是写在 Vue 上的“全局”配置（Vue.config.xxx）也只会影响 Weex 上的单个页面。

3、事件

Weex中的事件触发过程和H5基本一致，在事件冒泡、事件修饰符上略有不同 ，具体的事件介绍可以查看《通用事件》。

3.1 ) 事件冒泡：

下图是捕获冒泡阶段示意图：

在weex v0.13.0 以及后续的版本中开始支持事件冒泡，事件冒泡默认是不开启的。开启方式在模板根元素上加上属性 bubble=true

阻止事件冒泡，在事件处理函数中调用event.stopPropagation方法。

{
  handleClick (event) {
    // 阻止继续冒泡.
    event.stopPropagation();
  }
}

3.2 事件修饰符

.prevent，.capture，.stop，.self  按键修饰符以及系统修饰键 例如 .enter，.tab，.ctrl，.shift 在移动端基本没有意义，在 Weex 中均不支持。

4、样式