为本地移动应用引入Vue和Weex

最新推荐文章于 2021-12-11 11:16:42 发布

cunjie3951

最新推荐文章于 2021-12-11 11:16:42 发布

阅读量252

点赞数

文章标签： vue python java js javascript ViewUI

Vue是适用于Web应用程序的流行JavaScript框架，可轻松绑定内存中的数据和用户界面。现在，Weex允许我们使用Vue框架编写本机移动应用程序！

为什么我们使用Vue和其他数据绑定框架（如Angular和React）？他们有什么特别之处？我们使用它们来确保存储在内存中的应用程序数据与用户界面保持同步，反之亦然。

我们还使用这些框架使我们能够以针对性能进行优化的方式快速构建应用程序。

在本教程中，我将向您展示如何使用Vue框架，尤其是如何理解其数据绑定和模板的概念。然后，我将继续介绍Weex平台，该平台可使用Vue对本地移动应用进行编码！

数据绑定

让我们看一个简单的示例，以了解这些框架如何真正为我们节省时间。我们需要一个简单的输入字段，该字段与我们的应用程序数据保持同步。我们的应用程序本身可以以编程方式更改数据，而用户可以通过用户输入进行更改，因此我们需要同时监视UI和应用程序数据。

编写支持该数据绑定的代码会很冗长。我们将需要创建事件侦听器以及代理对象和可观察对象，以捕获应用程序数据中的任何更改。随着添加更多类型的数据和输入，这些复杂性也越来越大。 Vue和其他数据绑定框架使我们不必编写所有绑定代码。

使用Vue，如果我们的用户更改了一些输入数据，它将像这样同步回应用程序数据：

或者，如果应用程序更改了数据，它将更新用户界面，如下所示：

当我们将用户界面和应用程序数据同步在一起时，这意味着我们的应用程序完全按照我们的预期去做。 Vue将管理所有这些，并允许其他强大的数据绑定过程发生。

设置

现在我们知道了为什么使用这些框架，让我们建立一个简单的Vue应用程序来运行一些示例。在计算机上的任何位置创建一个新HTML文件，并将以下代码粘贴到其中：

<!DOCTYPE html>
<html>
<head>
  <title>Tuts+ Vue</title>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>

  <div id="app">
    
  </div>

  <script>
    var app = new Vue({ el: '#app' });
  </script>

</body>
</html>

这是一个链接到Vue JS库的简单HTML文件。它包含ID为app的div元素。在脚本标签内，我们有一个名为app的变量，用于指向我们的视图-稍后将对此部分进行说明。

然后，我们创建一个新的Vue实例或“视图”。这个构造函数告诉框架哪个元素将包含我们的应用程序UI并使其与应用程序数据保持同步。

现在，双击HTML文件以在浏览器中将其打开，然后打开浏览器控制台窗口。

文字插补

文本插值使我们可以将表达式嵌入到HTML代码中，以便在呈现页面时进行解释。这些表达式是实时的，因此，如果它们依赖的数据发生更改，该页面将实时更新。这称为声明式渲染，它使我们可以将表达式放置在元素内容内的任何位置。让我们来看一个简单的例子。

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
            message: "Hello world"
        }
    });
</script>

我们JavaScript代码现在包含一个data对象，该对象将存储此视图的所有应用程序数据。在其中，我创建了带有字符串"Hello world"的message属性。

接下来，让我们在HTML中显示此属性。

HTML

<div id="app">
  <pre style="font-family: 'helvetica'; ">
      {{ message }}
      
      {{ message.split('').reverse().join('') }}
    </pre>
</div>

表达式用双花括号语法表示。 Vue JS管理每个表达式的依赖关系，并在页面变化时实时更新页面。在我们的例子中，我们有两个表达式，其中message属性是每个表达式的依赖项。第一个表达式{{ message }}仅显示message属性。第二个{{ message.split('').reverse().join('') }}表达式采用message属性，然后：

将字符串拆分为一个数组：
[ "h","e","l","l","o"," ","w","o","r","l","d" ]
颠倒数组的顺序：
[ "d","l","r","o","w"," ","o","l","l","e","h" ]
将数组连接在一起以获得"dlrow olleh" ，它是相同的消息，但向后打印。

现在打开浏览器并刷新HTML页面。然后打开浏览器的控制台窗口，并为app.message分配一个新值，并查看如何在浏览器中更新输出。

您还可以在模板表达式中使用数学，或在对象中使用结构化数据。实际上，正如您可能已经猜到的那样，Vue表达式只是JavaScript。但是，对全局变量的访问是沙盒访问，因此您可以访问Math ，但不能访问window 。这有助于确保您的应用程序以及用户的安全。

通过仅使用几行代码即可使用Vue，我们可以获得高级的双向数据绑定。这确保了用户界面和应用程序数据相对容易地同步。

指令

指令是在我们的视图中绑定数据的另一种方法。我们可以使用它们将应用程序数据绑定到属性，事件，输入字段和可重复数据。让我们遍历每个指令并发现它们如何工作。

v-bind ：绑定属性值
v-model ：将应用程序数据绑定到诸如textarea类的输入元素
v-on ：定义事件处理程序
v-for ：绑定到数组或对象

`v-bind`指令

v-bind伪指令用于属性数据绑定。它允许我们将应用程序数据绑定到属性的值。可以将其视为类似于文本插值，但在属性内。您可以使用v-bind指令绑定class ， id ， value或任何其他属性。

对于此示例，我想使用v-bind指令v-bind:data-attr将我们的应用程序数据绑定到data-attr属性。

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
            number: 20,
            object:
            {
                type: "Full Name Object",
                names: ["Lawrence","Anothy","Turton"]
            }
        }
    });
</script>

HTML

<div id="app">

  <div v-bind:data-attr=" object.type ">
    {{ object.type }} 
  </div>

  <div v-bind:data-attr=" object.names ">
    {{ object.names }}  
  </div>

  <div v-bind:data-attr=" number * 20 / 2 ">
    {{ number * 20 / 2 }}
  </div>

  <div v-bind:data-attr=" [ object.type, object.names, number * 20 / 2 ] ">
    {{ [ object.type, object.names, number * 20 / 2 ] }}
  </div>

</div>

在上面的示例中，我们将名为data-attr的属性绑定到一系列不同的数据源。首先，我们将其绑定到object的type和names属性。然后，将其绑定到一个数学表达式，然后将所有绑定合并到一个数组属性中。

看一下浏览器中的输出：您可以单击Elements选项卡以查看每个属性值的输出。

同样，您可以在控制台中更改应用程序数据以查看数据绑定过程。

将v-bind指令视为允许属性值中的表达式。 Vue库功能强大且易于建立。

`v-model`指令

此伪指令专门用于使应用程序数据与输入字段，文本区域和选择元素保持同步。这是一个例子：

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
          message: "message string",
          selected:"",
          checkedNames: []
        }
    });
</script>

HTML

<div id="app">

  <input type="text" v-model="message">

  <textarea v-model="message"></textarea>

  <hr>

  <select v-model="selected">
    <option disabled value="">Select a name</option>
    <option>Jack</option>
    <option>John</option>
    <option>Mike</option>
  </select>
  <span>Selected: {{ selected }}</span>

  <hr>

  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>

  <select v-model="checkedNames" multiple>
    <option>Jack</option>
    <option>John</option>
    <option>Mike</option>
  </select>
  <br>
  <span>Selected Names: {{ checkedNames }}</span>

</div>

对于此页面的第一部分，我们有一个文本输入字段和文本区域，它们都具有v-model指令，该指令使用v-model="message"使这些输入字段与message属性保持同步。这样，如果您更改其中一个，则模型将被更新，然后另一个输入字段将被更新。继续尝试！

在下一节中，我们将使用v-model="selected"将下拉列表同步到selected属性。这样，如果更改选择，我们的模型将被更新。

最后，我们有多个选择。我已经展示了如何通过两种方式执行此操作：具有多个复选框和具有多个选择输入。由于我们可以有多个值，因此我创建了可以存储多个值的checkedNames数组。多个选择输入和复选框均具有针对checkNames属性的v-model指令。试试看，选择时他们应该保持同步。

多选绑定

`v-on`指令

该指令允许我们将事件附加到HTML元素。该指令可用于某些可以附加输入事件的元素，例如悬停，单击，文本输入，按键等等。在此示例中，我们将创建一个带有click事件的简单按钮。

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
          clicked: ""
        }
    });
</script>

HTML

<div id="app">

  <button v-on:click=" [ alert('hello'), clicked = 'hello' ] ">Click me!</button>

  {{ clicked }}

</div>

在冒号之后的v-on指令中，我们指定要附加的事件。在此示例中，当click事件被触发时，我们将运行一些表达式。首先，我们打开一个警报对话框，然后更改clicked属性的值。请注意，您可以在v-on表达式中调用函数。

`v-for`指令

该指令是其中最强大的指令之一。我们可以观察任何对象或数组的变化，并针对该对象或数组中发现的每个属性或元素重复渲染模板代码的一部分。例如，将名称数组呈现为列表：

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
          names: [ "Lawrence", "John", "Mike", "Justin" ]
        }
    });
</script>

HTML

<div id="app">

  <ul>
    <li v-for="name in names">{{ name }}</li>
  </ul>

</div>

在此示例中，我们首先将v-for指令附加到要重复的元素上。伪指令的值指定了要迭代的对象或数组（ names ），以及将包含每次迭代的值（ name ）的变量。现在，在这个重复的元素内，我们可以在表达式中使用name变量。

如果我们随后使用诸如push ， sort或reverse sort的方法修改数组，则模板数据将自动更新。尝试运行示例，然后在控制台窗口中修改阵列。

组件

数据绑定过程发生在视图中。组件只是可重用的视图，我们可以在整个应用程序中重复这些视图。每个组件必须具有要作为用户界面的一部分呈现的一些模板数据和一些应用程序数据。如果需要，可以选择包括一些样式。

让我们再次使用v-for指令输出列表项。但是这次，我们将使每个项目成为一个组件。我们将为该组件命名，以便可以在模板代码list-item定位它。组件也可以具有“注册属性”，我们可以在创建组件时为其分配一个值。就我而言， list-item组件将期望接收由props:["name"]定义的name属性的值。

现在让我们创建这个组件。请将以下代码添加到脚本标签中：

JS

Vue.component('list-item', {
  template: '<li>{{ name }}</li>',
  props: [ "name" ]
});

还要确保您具有以下应用程序数据：

var app = new Vue({
    el: '#app',
    data:
    {
        names: [ "Lawrence", "John", "Mike", "Justin" ]
    }
});

HTML

<div id="app">
  <ul>
    <list-item v-for="name in names" v-bind:name="name"></list-item>
  </ul>
</div>

在这里，您可以看到list-item组件将对数组中找到的每个名称重复。每个名称都将分配给v-for指令中定义的名称变量。我们使用v-bind将name属性传递给组件。

每个实例只是该组件的一个副本。我们可以彼此独立地修改每个副本或实例。因此，将组件视为蓝图，将实例视为根据蓝图制作的副本。这是最终结果：

编译和Vue CLI

我们一直在处理一个非常简单HTML文件，并让Vue在运行时解释所有内容。但是，Vue确实带有命令行工具。您可能会问自己为什么。原因之一是，预编译的页面模板的性能将比Vue在运行时解释的模板更好。另一个原因是，如果我们要构建一个大型应用程序并尝试将其装入一个HTML文件中，它将很快变得难以管理。

因此，我们需要模块化才能将大型应用程序分解为较小的部分。

安装Vue CLI

要使用命令行，您需要打开操作系统的控制台窗口。

对于Mac，请按Command-Space ，然后键入terminal ，然后按Return键 。
对于Windows，请在启动菜单中搜索命令提示符，确保右键单击并“ 以管理员身份打开” 。
对于Linux，请按Control-Alt-T 。

在继续之前，请确保已安装最新版本的Node.js。然后，我们需要安装Webpack，它将压缩项目的文件大小，使其在我们的浏览器中更快。然后，我们可以安装Vue CLI并为您的平台运行相关命令：

Mac和Linux

sudo npm install -g webpack
sudo npm install -g vue-cli

Windows（确保以管理员身份运行控制台）

npm install -g webpack
npm install -g vue-cli

而已！现在，我们准备开始设置高级Webpack项目。首先，导航到要在其中创建项目的目录（在我的情况下为桌面），然后创建项目。您可以将myapp替换为您想要的任何项目名称。

vue init webpack myapp

系统将引导您解决有关项目的一系列问题，提示您填写标题和描述等数据，并询问您是否安装第三方插件。对于此示例，您可以对所有可选附加功能回答否。创建之后，我们需要安装依赖项，因此导航至项目目录，然后运行install命令。

cd myapp
npm install

让NPM安装所有依赖包，然后我们就可以继续进行了。

创建一个Vue项目

安装完软件包后，我们可以通过键入npm run dev来npm run dev开发服务器。您的浏览器窗口应打开，显示以下页面。

我们不会介绍整个项目的结构，但是当您打开myapp目录时，将看到src目录。它包含一个App.vue文件，一个main.js文件，以及在components目录中的Hello.vue文件。

Vue文件是组件。 main.js文件配置初始视图以及可能的其他配置。让我们看一下App.vue和Hello.vue文件。

在这里，您可以看到每个Vue组件都分为三个部分：

<template> ：构成UI一部分HTML标记。
<script> ：应用程序数据，过滤器，方法，计算的属性，观察者和方法。
<style> ：我们组件CSS或Sass样式。

汇编

将所有组件一起编译将产生大规模的应用程序。这意味着在我们进行开发时，我们将处理称为组件的小型模块化代码段，而不是整个应用程序。在Vue中，我们具有包含JavaScript，HTML和CSS的单文件组件。如果您选择使用这些语言，甚至可以将ES6转换为ES5，将Sass转换为CSS，将Jade转换为HTML。

您会在App.vue文件中注意到，我已经突出显示了它导入Hello.vue组件的位置。组件可以嵌套在其他组件中！

编译时，我们的项目通过以下过程构建：

我们仍然使用与先前示例相同的语法。但是，我们现在正在处理较小的Vue文件并将它们编译在一起。我们还具有一些更高级的功能，例如预处理器和Jade，Sass，ES6和Webpack压缩。

威克斯

现在，我们了解了Vue库，让我们快速看一下如何将我们的Web应用程序带到一个可在iOS或Android上安装的本地移动应用程序中。

Weex是一个混合动力框架，这意味着它允许多种技术，就像混合动力汽车可以同时使用电动和汽油一样。在我们的案例中，我们使用Web应用程序中JavaScript代码，但是我们渲染到本机用户界面。另外，通过JavaScript，我们可以访问设备的本机API，以访问硬件，例如相机，传感器和文件系统。

通过Weex，我们使用XML来代替将应用程序呈现为HTML。实际上，HTML和XML非常相似，因此语法看起来很熟悉。然后，该XML将转换为本地组件。现在，我们JavaScript将能够与那些本机组件进行对话，就像它与HTML中的Vue与DOM对话一样。不仅如此，原生组件还可以使用CSS设置样式和位置，包括动画，过渡等，并且它们可以集成到原生层。

那只是Weex可以做的预告片。在接下来的教程中，我将带您更深入地了解Weex，我们将了解如何构建一些实用的跨平台本机应用程序。

优点

Vue的语法很简单，并且越来越流行。 Weex允许我们使用JavaScript和Vue构建移动应用程序，但仍可提供本机应用程序体验。

缺点

Vue本身很稳定，但Weex仍处于早期开发中-目前位于Apache孵化器中。但请放心，Weex即将投入生产，并得到了科技巨头阿里巴巴的支持。因此，如果您担心开发者预览版的构建，您可以等到Weex达到完整版本。

结论

您现在已经了解了数据绑定如何成为使用Vue和类似框架的关键原因。它们节省了我们的开发时间，并提供了构建应用程序的标准方法。您还了解了如何在Vue中使用文本插值，指令和事件，以及这些功能如何协同工作以使应用程序数据与用户界面保持同步。

我们从一个只有一个视图的基本项目开始。但是后来我们创建了一个更高级的项目，该项目具有更小，更模块化的视图，称为组件。组件使我们可以分解项目，因此更易于编码和维护。之后，我们看到了如何使用Vue编译器将ES6，Jade和Sass转换为标准语言，同时将文件大小压缩到最小。

当您开始使用Weex进行编码时，所有这些知识将为您提供帮助。 Weex将允许我们使用Vue网络应用程序并将其转变为移动应用程序。 Weex有所不同-我们使用带有特殊组件的XML而不是HTML-但我们仍然可以使用其他Web技术，例如CSS和JavaScript。这意味着我们不必将应用程序逻辑从Web应用程序更改为移动应用程序。

翻译自: https://code.tutsplus.com/tutorials/introducing-vue-and-weex-for-native-mobile-apps--cms-28782

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为本地移动应用引入Vue和Weex

Vue是适用于Web应用程序的流行JavaScript框架，可轻松绑定内存中的数据和用户界面。现在，Weex允许我们使用Vue框架编写本机移动应用程序！为什么我们使用Vue和其他数据绑定框架（如Angular和React）？他们有什么特别之处？我们使用它们来确保存储在内存中的应用程序数据与用户界面保持同步，反之亦然。我们还使用这些框架使我们能够以针对性能进行优化的方式快速构建...
复制链接

扫一扫