【零基础学会uniapp系列】1、一个新的vue文件

项目部002

看本课前可以请先查看一下扫盲贴：
https://bbs.125.la/forum.php?mod=viewthread&tid=14696567

零基础学会uniapp

1、 一个新的vue文件

vue文件结构介绍

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

template 是一级节点，用于写组件， script 和 style 是并列的一级节点，也就是有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}}

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

视频教程：
【点击前往TV网查看】


课程课件和源码下载：【从资源网下载】
从GIT关注：
https://gitee.com/JYtechnology/uniapp-learn

lyjzyq

支持学习

TBit

不错 支持了