本帖最后由 项目部002 于 2021-10-16 16:11 编辑
看本课前可以请先查看一下扫盲贴:
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
|