下载uni-app开发工具HBuilderX

1、HBuilderX下载地址: 下载地址
2、下载后解压，双击解压后的 HBuilderX.exe 即可打开

HBuilderX学习更多

学习 uni-app 教程

1、uni-app官方视频教程
2、开发uni-app需要的vue2教程
3、uni-app零基础入门到项目实战

笔记

1、显示 hello word 的几种方式

<template><view class="content">{{text}}<view v-text="text" class="content"></view><view v-html="text" class="content"></view></view>
</template><script>export default {data() {return {text:"<p>hello wold</p>"}},}
</script><style></style>

2、绑定样式的写法

<template><view :class="myclass" v-bind:style="mystyle">Hello world</view>
</template><script>export default {data() {return {mystyle:"font-size:35px;color: #FFFFFF;",myclass:"content"}},}
</script><style>.content{background:red;}
</style>

3、事件绑定

<template><view :class="myclass" v-bind:style="mystyle" v-on:click="myclick">Hello world</view>
</template><script>export default {data() {return {mystyle:"font-size:35px;color:#fff",myclass:"content"}},methods:{myclick:function(){this.mystyle = "font-size:35px;color:#000",this.myclass = ""}}}
</script><style>.content{background:red;}
</style>

4、条件渲染

<template><view><view :class="myclass" v-bind:style="mystyle" v-if="show">Hello world</view><view v-else>你好，世界</view><button @click="click">按钮</button></view>
</template><script>export default {data() {return {mystyle: "font-size:35px;color:#fff",myclass: "content",show: true}},methods: {click() {this.show = !this.show;}}}
</script><style>.content {background: red;}
</style>

v-if的 false 隐藏，默认是把所在的 view 给删除
v-show 则是直接更改样式，display:block;-> display:none;
所以对于频繁进行切换状态，选择v-show性能更好

需要注意的是 v-if和v-else元素必须是相邻的才能正常编译

5、列表渲染

<template><view><view class="" v-for="item in list">Hello world{{item}}</view></view>
</template><script>export default {data() {return {list:[1,2,3,4,5]}},methods: {}}
</script><style>
</style>

可以显示索引

<template><view><view class="" v-for="(item,index) in list" :key="index">{{item}}:{{index}}</view></view>
</template><script>export default {data() {return {list:['Hello','World','你好','世界']}},methods: {}}
</script><style>
</style>

6、v-model

<template><view><input type="text" value="" v-model="text" /><button type="primary" @click="click">提交</button><view v-for="(item,index) in list">{{item}}</view></view>
</template><script>export default {data() {return {text: "",list: ["hello", "world"]}},methods: {click() {this.list.push(this.text)this.text = ""}}}
</script><style>
</style>

uni-app学习笔记(1)：模板语法相关推荐

HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
python基本语法语句-python学习笔记：基本语法
原标题:python学习笔记:基本语法缩进:必须使用4个空格来表示每级缩进,支持Tab字符 if语句,经常与else, elif(相当于else if) 配合使用. for语句,迭代器,依次处理迭代 ...
python3语法都相同吗_python3.4学习笔记(一) 基本语法 python3不向下兼容，有些语法跟python2.x不一样...
python3.4学习笔记(一) 基本语法 python3不向下兼容,有些语法跟python2.x不一样,IDLE shell编辑器,快捷键:ALT+p,上一个历史输入内容,ALT+n 下一个历史输入 ...
java基本语法心得_Java学习笔记(一)——基础语法(上)
Java学习笔记(一)--基础语法(上) 软件构造写在前面编写Java程序时,应注意以下几点:大小写敏感:Java是大小写敏感的,这就意味着标识符Hello与hello是不同的. 类名:对于所有的 ...
得到app文稿导出_得到app学习笔记作为知识付费者，如何把所学内容快速输出？...
原标题:得到app学习笔记作为知识付费者,如何把所学内容快速输出? 零.引子昨天看到老公票圈更新了一条段子: 我就是那个伪勤奋者,在知识焦虑的胁迫下,这些年买了不知多少视频.微课.教程还有得到专栏. ...
Programming Languages PartA Week2学习笔记——SML基本语法
Programming Languages PartA Week2学习笔记--SML基本语法首先简单介绍使用的SML语言,参考维基百科和百度百科: ML(Meta Language:元语言)是由爱丁 ...
OpenCV 学习笔记（模板匹配）
OpenCV 学习笔记(模板匹配) 模板匹配是在一幅图像中寻找一个特定目标的方法之一.这种方法的原理非常简单,遍历图像中的每一个可能的位置,比较各处与模板是否"相似",当相似度足够 ...
Flutter高级进阶实战仿哔哩哔哩APP学习笔记
Flutter高级进阶实战仿哔哩哔哩APP学习笔记近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...
《PHP学习笔记——PHP基本语法》
<PHP学习笔记--PHP基本语法> 前言: PHP是一门服务端脚本语言,像JavaScript一样,也是一门弱类型语言.弱类型语言最大的特点是允许变量隐式转换.这样,相对于Java这种强 ...
黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...

uni-app学习笔记(1)：模板语法

文章目录