易语言资源网 - 做最全的易语言资源下载社区
【周六更新】【2021开源大赛(第六届)】全部参赛作品信息 精易论坛授权登录

【零基础学会uniapp】第一课:一个新的vue文件   [复制链接]

    2021-10-16 10:29:18
    uni-app
    易语言资源网
    742 次浏览
    来源链接

零基础学会uniapp

课程说明:

本套课程将带领大家从0基础开始学习uniapp。

本教程使用: HBuilderX v3.2.9 作为开发工具。使用vue的版本为:vue2

课程勘误和问题将在论坛、git、进行更正及说明,请大家保持关注

1、 一个新的vue文件

vue文件结构介绍

本课开始,正式进入uniapp的学习,这一节课介绍一个标准的vue文件的写法格式。

template 是一级节点,用于写组件, scriptstyle 是并列的一级节点,也就是有3个一级节点。这个叫vue单文件组件规范sfc。

<template>
页面的代码,这里所有的内容都会根据“条件渲染”的规则显示到界面上
</template>

<script>
   页面执行的脚本(javascript)代码
</script>

<style>
  页面使用到的风格代码 css
</style>
插值

在vue中使用 {{ }} 双大括号进行文本插值。 什么是插值? 就是使用给定的文本来替换网页中的文本,替换过程由vue处理。

<template>
   <view>
       <view>Message: {{ msg }}</view>
   </view>
</template>
<script>
   export default {
       data() {
           return {
               msg: 'Hello Vue!'
          }
      }
  }
</script>

在上面的例子中,<script>中的msg会替换<templete>中的msg。

注:只要<script>中的msg更新,<templete>中对应的msg就会更新,这是全自动的。插值也可以支持: 表达式和javascript脚本,下方这些都是支持的

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
{{index%2}}

每个插值都只能包含单个表达式


本课知识点链接

https://uniapp.dcloud.io/vue-basics?id=%e6%8f%92%e5%80%bc

https://uniapp.dcloud.io/vue-basics?id=data-%e5%b1%9e%e6%80%a7

@ 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群:326576256






点我下载 (已有 9 次下载)

[错误报告]   上一篇:分享一个好看的启动菜单...     下一篇:【零基础学会uniapp】第二课:指令...