Appearance

目录

Tenon Vue ​

什么是 Tenon Vue ? ​

Tenon Vue 是应用于 Hummer 跨端平台的 Vue 框架。帮助大家使用 Vue3.0 的语法，快速的构建用户界面。

INFO

  • 整体内核，是通过 Vue3.0 的 createRenderer 方法，自定义渲染器，同时针对 Hummer 平台进行差异化改造。

  • Vue 采用 Vue3 语法，更多相关教程可参考Vue3 文档

快速上手 ​


安装 ​

  1. 全局安装 Hummer CLI，请参见 Hummer CLI 使用。
  2. 执行 hummer init选择 template-vue模板工程进行创建即可。
  3. 切到工程中，执行 npm install，安装对应依赖。
  4. 项目中执行 npm run dev 或者 hummer dev开启 Dev 模式。
  5. 在浏览器预览页中，使用 Playground 进行扫码即可预览。

声明式渲染 ​

Tenon Vue 和 Vue 类似采用简洁的模板语法来声明式地将数据渲染到原生容器中。

INFO

  • 不同于 Vue 的是，Tenon Vue 的模板语法中标签采用的是 Tenon 特有的，具体可以参考组件篇，了解所有支持的组件。

  • 特有标签的设计背景是由于为了更多的适配原生平台的，很多 Web 标签特性原生很难兼容，所以就类似小程序一样，自定义一套标签，通过规范写法，来减少实际开发中不兼容的特性。

以下是一个入门的 Hello Tenon 应用，里面进行了slogan 的绑定。

html
<template>
  <view>
    <text>{{slogan}}</text>
  </view>
</template>
<script>
  export default{
    data(){
      return {
        slogan: 'Hello Tenon!'
      }
    }
  }
</script>
javascript
// entry.js
import Tenon from '@hummer/tenon-vue';
import app from './app';
Tenon.render(app);

提示： 以后的语法示例，省略 entry.js 的写法，entry.js 一般情况是通用的。

条件渲染 ​

控制元素是否显示也比较简单，可以使用 v-if或者 v-show指令

INFO

  • v-if 和 v-show 的区别？

  • v-if 控制元素的隐藏或展示，展示隐藏的时候，会真实的创建或销毁元素。

  • v-show 控制元素的隐藏或展示，主要操作元素的 display属性，隐藏即 display:none; 隐藏时并不会销毁元素。

如何使用？可以参考下面的例子。

你可以通过操作 seen值，来进行元素的隐藏或展示。更多条件渲染可以参考 v-if 示例 v-show 示例

html
<template>
  <view>
    <view>
      <text v-if="seen">你好，我是 v-if 的内容</text>
      <text v-show="seen">你好，我是 v-show 的内容</text>
    </view>
  </view>
</template>
<script>
  export default {
    data(){
      return {
        seen: true
      }
    }
  }
</script>

循环渲染 ​

实际开发中，经常遇到循环渲染的场景，比如通过读取数组数据来渲染一个项目列表。

使用 v-for 指令可以满足上面的场景

如何使用？可以参考下面的例子？

html
<template>
  <view>
    <view class="list todo">
    	<text class="list-item" v-for="item in todos">
    	  {{item.text}}
    	</text>
    </view>
  </view>
</template>
<script>
  export default {
    data(){
      return {
        todos: [
          {text: 'Hello Hummer!'},
          {text: 'Hello Tenon!'},
          {text: 'Hello World!'}
        ]
      }
    }
  }
</script>

事件绑定 ​

为了使用户与你的应用进行交互，可以使用 v-on指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

html
<template>
  <view>
    <text>{{message}}</text>
    <button v-on:click="reverseMessage">反转消息</button>
  </view>
</template>
<script>
  export default {
    data(){
      return {
      	message: 'Hello Tenon'
      }
    },
    methods: {
      reverseMessage(){
        this.message = this.message.split('').reverse().join('')
      }
    }
  }
</script>

在 reverseMessage 方法中进行了 message数据的改变，这时候视图层自动更新渲染。整个过程由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

提示：这种思想基于MVVM的设计模式，使用户与视图层解耦，只需要操作 Model 层即可。现在的 Angular、React 等均是基于这种设计模式。

为了便于处理用户输入，可以使用 v-mode指令快速的实现表单输入和应用状态之间的双向绑定 。

html
<template>
  <view>
    <text>{{message}}</text>
   	<input v-model="message"></input>
  </view>
</template>
<script>
  export default {
    data(){
      return {
      	message: 'Hello Tenon'
      }
    }
  }
</script>

组件化应用构建 ​

组件化是 vue系统中一个重要概念，是一种业务逻辑的抽象，允许我们使用小型、独立和可复用的组件构建大型应用。当然在 Tenon Vue 中你也可以通过组件化的方式构建你的原生应用。

这里借用 Vue 官方的图，任意类型的页面都可以抽象为一个组件树：

Component Tree

Vue 工程中组件系统比较简单：

Child.vue

html
<template>
  <view>
    <text>{{message}}</text>
  </view>
</template>
<script>
  export default {
    name: 'child'
    data(){
      return {
      	message: 'Hello Tenon, I am child component!'
      }
    }
  }
</script>

Parent.vue

html
<template>
  <view>
    <text>{{message}}</text>
    <Child></Child>
  </view>
</template>
<script>
  import Child from './child.vue'
  export default {
    name: 'parent',
    components: {
      Child
    }
    data(){
      return {
      	message: 'Hello Tenon, I am parent component!'
      }
    }
  }
</script>

如上所示，声明了 Child 组件，并在 Parent组件中进行了引用。以此为例，你可以将应用拆分成组件树，进行组件级开发。

更多的高级特性，如组件间通信、属性传递等，请参考 Vue 文档

Tenon Vue 与 Vue 的区别？ ​


1. Tenon Vue 不需要指定宿主，可以直接渲染我们的vue组件。 ​

Tenon Vue

javascript
import Tenon from '@hummer/tenon-vue';
import app from './app';

Tenon.render(app);

Vue

javascript
// vue3.0
import {createApp} from 'vue';
import App from './App';

createApp(App).mount('#app');

2. 模板标签不一样，需要使用 Tenon 的基础组件和高阶组件来编写模版文件，而 Vue 则使用 Html5 标准的标签。 ​

Tenon Vue

html
<template>
  <view class="page">
    <text class="slogan">{{slogan}}</text>
  </view>
</template>

Vue

html
<template>
  <div class="container">
    <span class="title">{{title}}</span>
  </div>
</template>