如何在框架中使用vue2.0

light2.2版本新引入vue2.0,使用方法就是在page页面中引入light-2.2.min.js，替换原来的light-1.0.min.js即可。

<!DOCTYPE html>
<html>
<head>
  <snippet id="header" />
  <!-- build:css css/index.css -->
  <link rel="stylesheet" href="css/style.css" />
  <!--<link rel="stylesheet" href="css/index.css" />-->
  <!-- endbuild -->
  <title>lightProjectDemo-Just For Fun</title>
</head>
<body>
  <div id="main">
    <view id="lightProjectDemo" home="true" />
  </div>
  <snippet id="footer" />
  <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-2.2.min.js"></script>
  <script type="text/javascript" src="config.js"></script>
  <!-- build:js js/index.js -->
  <!--<script src="vue-components.js"></script>-->
  <!--<script type="text/javascript" src="js/lib/underscore.js"></script>-->
  <!-- inject:view -->
  <!-- endinject -->
  <!-- endbuild -->
  <script type="text/javascript">
    Light.start();
  </script>
</body>
</html>

这样，你就可以在light框架中灵活的运用vue2.0所有的功能了

在light框架中使用vue2.0时需要注意以下一些和vue1.0的不同

1.v-for 遍历数组时的参数顺序变更

当包含 index 时，之前遍历数组时的参数顺序是 (index, value)。现在是 (value, index)

2.v-for 遍历对象时的参数顺序变更

当包含 key 时，之前遍历对象时的参数顺序是 (key, value)。现在是 (value, key)

3.$index和$key 已移除

vue2.0已经移除了 $index 和 $key 这两个隐式声明变量，以便在 v-for 中显式定义。

4.v-for的范围值变化

之前，v-for="number in 10" 的 number 从 0 开始到 9 结束，现在从 1 开始，到 10 结束。

5.v-bind 真假值变更

在2.0中使用 v-bind 时，只有 null, undefined , 和 false 被看作是假。这意味着，0 和空字符串将被作为真值渲染。比如 v-bind:draggable="''" 将被渲染为 draggable="true"。

对于其它钩子函数 (如 v-if 和 v-show)，他们依然遵循 js 对真假值判断的一般规则

6.v-show后面不再使用v-else

v-else 不能再跟在 v-show后面使用。应该在v-if的否定分支中使用v-show来替代。例如：


<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>

这里只列出了一些常用的vue2.0和1.0的使用差异，更加详细的不同请参考vue官网https://vuefe.cn/v2/guide/migration.html

组件开发

如何在框架中使用vue2.0