整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

12. 教你零基础搭建小程序:模板语法—数据绑定(1)


瑞巴迪,

从这章开始,我们要讲微信小程序的模板语法



模板语法的定义:

WXML(WeiXin Markup Language)是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构建出页面的结构。

模板语法有以下四个种类,

1、数据绑定

2、运算

3、列表渲染

4、条件渲染

这是我们接下来要一一重点讲解的。


这一章,我们来初步学习模板语法中的数据绑定


大家可以点击下方链接,找到我们的教科书(微信官方文档)去学习一下基本定义,有一个大致的了解。

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html


数据绑定: WXML 中的动态数据均来自对应 Page 的 data



我们还是老方法 ,在实践中学习,在实操中认识。



1、在全局配置文件app.json 中新增demo03文件,便于我们示范以下具体操作。

代码如下:



2、打开 pages 文件夹--打开demo03 文件夹--打开demo03.wxml 文件,页面如下:



在demo03.wxml 文件中,可以看到如下代码:



代码中包含标签和普通文本两部分内容。


我们先对”text“标签做简单描述:

”text“相当于传统web中的span标签,是行内元素, 当页面中存在多个text 标签时,各标签也是不换行的。


比如:

我们在demo03.wxml 文件中输入以下代码:

<text>1</text>,
<text>2</text>


按下保存键,发现,左侧的屏幕中,1,2是在同一行的。

这就是说,当页面中存在多个text 标签时,各标签也是不换行的。



2.1 补充:对另一个标签——”view“标签进行描述。


”view“标签相当于以前web 中的 div 标签, 是块级元素, 当页面中有多个 view 标签时,是会换行的。


比如:

我们在demo03.wxml 文件中输入以下代码:

<view>1</view>,
<view>2</view>


按下保存键,发现,左侧的屏幕中,1,2是各占一行的。

这就是说,当页面中存在多个view 标签时,各标签是换行的。



3、数据绑定中,数据要定义在哪里?


我们打开 pages 文件夹--打开 demo03.js 文件, 文件中,一新建后就有内容存在。如下图所示。



我们来具体解读一下,demo03.js 文件中的内容


page: 这里指的是大型的配置方法



其中,page包括的data字段, 这里面都是关键字,是不能更改的哦,

而且,里面要放的都是一些初始化的数据,比如变量。

与data 同层级的有很多方法,基本都是生命周期函数,这在以后的章节中会介绍到的。



3.1 这里,给大家介绍一个小技巧:

我们把demo03.js 文件中的内容全部删除,使其文件呈现空白状态。

在demo03.js 文件中输入”page“,会有下拉提示框, 这里选择page , 就会重新出现删除前的文件内容。



在我们编辑demo03.js 文件时,如果出现了错误, 我们可以选择全部删除,然后再用这种方法重新输入page方法。


欧克,本章数据绑定部分的一部分知识,讲解到此,下一章我们继续讲解数据绑定的知识。



搜索并关注微信公众号:飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等!

做小程序我们是认真的!

表标签

在html中列表分为无序列表有序列表自定义列表(项目列表)。接下来就看看他们有什么不同吧!

作用:如果说table标签是用来显示数据的,那么列表标签就是用来进行html页面布局的。

  • 无序列表

语法:

<ul>
	<li></li>  
</ul>

<ul></ul>标签中只能且必须嵌套<li></li>标签。li标签之间没有先后顺序,是并列存在的。li标签里可以容纳文本、数据、图片、超链接等内容。跟table一样,列表标签也自带样式属性,但为了代码统一,我们还是会使用css来设置。

代码示例:

<h2>无序列表:</h2>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

运行界面:

  • 有序列表

语法

<ol>
 	<li></li> 
 </ol>

<ol></ol>标签里面只能嵌套<li></li>标签,在这里li标签是有顺序的。

代码示例:

<h2>有序列表:</h2>
    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

运行界面:

  • 自定义列表

语法

<dl>
	<dt></dt>
	<dd></dd>
</dl>

<dl></dl>标签:定义列表

<dt></dt>标签:列表标题

<dd></dd>标签:列表内容

一个dd标签是对dt标签标题的说明。这两个标签中可以包含任何标签。

代码示例:

<h2>自定义列表:</h2>
    <!-- dl:外层标签  dt:项目标题  dd:项目内容 -->
    <dl>
        <dt>水果种类</dt>
        <dd>苹果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>

运行界面:



表单标签

作用:收集用户信息。一般用在注册界面等。

组成:一个完整的表单中包含表单域(整个填写界面所有信息)、表单控件(表单元素)和提示信息(表单控件的提示作用)3个部分。

  • 表单域

表单域:是一个包含表单元素的区域。

<form>标签用于定义表单域,实现用户信息的收集和传递。

作用:将其区域范围内的信息收集并传送给服务器。

语法

<form action=”url地址” method=”提交方式” name=”表单域名称”>
各种表单控件
</form>

注:action:url地址,指定接收并处理表单数据的服务器程序的url地址。

method:用于设置表单数据的提交方式。

method=”get”:提交数据时,地址栏可查看到数据。数据量少且安全级别不高时使用。

method=”post”:提交数据时,地址栏数据是加密的。

name:表单域的名称。用于区分同一页面下的不同表单域。

  • 表单控件

1.input输入表单元素

语法:<input type=””>,依据type属性值不同区分不同控件。

文本框:<input type=”text”>。单行输入字段,默认宽度20个字符。输入的文字可见。

密码框:<input type=”password”>。输入内容默认不可见。

单选框:<input type=”radio”>,默认情况下选中后无法取消。

注:为实现多选一状态,需要将所有的单选框控件具有同一个name名。

复选框:<input type=”checkbox”>,选中后可以更改可以取消。

提交按钮:<input type=”submit”>,默认按钮中的提示文字是提交,可以通过value值进行更改内容。点击提交按钮后会把表单数据发送到服务器。

重置按钮:<input type=”reset”>,默认按钮中的提示文字是重置,可以通过value值进行更改内容。点击后会清楚表单中的所有数据。

普通按钮:<input type=”button”>

文件域:<input type=”file”>,用来选择文件,一般适用于文件上传。

label标签:标注标签,配合input控件一起使用

作用:绑定表单控件,扩大点击范围。

当点击label标签的内容时,系统会自动选中该表单控件。

代码示例:

<h1>label标签</h1>
    <form>
        <label for="text">用户名:</label>
        <input type="text" name="用户名" id="text"><br>
        <label for="password">密码:</label>
        <input type="password" id="password"><br>
        <label for="男">男</label>
        <input type="radio" name="sex" id="男">
        <label for="女">女</label>
        <input type="radio" name="sex" id="女"><br>
    </form>

运行界面:

Input控件属性:

name:用户自定义,提示input元素的名称。给后台工作人员的提示。

value:用户自定义,提示input元素的内容值。给后台的提示。在文本框控件中会显示该内容,单选框和复选框则显示不出来。

checked:默认选中状态。主要用于单选按钮和复选按钮中。

maxlength:正整数,规定输入字段中的字符最大长度。

input代码示例:

<h2>表单标签</h2>
    <form>
        用户名:<input type="text" maxlength="15" value="请输入用户名"><br>
        密  码:<input type="password"><br>
        性  别:<input type="radio" name="sex" value="男">男   
				<input type="radio" name="sex" value="女">女<br>
        爱  好:<input type="checkbox" name="like" value="swim">游泳 
				<input type="checkbox" name="like" value="健身">健身 
        <input type="checkbox" name="like" value="run">跑步<br>
        <input type="submit">   
        <input type="reset"><br>
        <input type="submit" value="注册">
        <input type="reset" value="清空"><br>
        <!-- 后期结合js搭配使用 -->
        <!-- 按钮选框在默认情况下是没有文字内容的,需要添加value值设置文字内容 -->
        <input type="button" value="获取短信验证码"><br>
        上传头像:<input type="file">
    </form>

运行界面:

2.select下拉表单元素

使用场景:地址选择、职业分类、学校分类等。

select标签:定义下拉列表。

语法:

<select>
	<option></option>  
</select>

代码示例:

<h1>下拉表单</h1>
    <form>
        <label for="adress">籍贯:</label>
        <select name="" id="">
            <option value="">北京</option>
            <option value="">河北</option>
            <option value="">上海</option>
            <option value="">广州</option>
            <option value="">深圳</option>
        </select>
    </form>

运行界面:

3.textrea文本域表单控件

使用场景:留言、介绍、评论等。

语法

<textrea rows=”” cols=””>文本内容</textrea>

跟文本框控件不同,它是多行文本输入框,可以自行设定行数以及一行容纳多少字数。

rows=“每行可输入的字符数”,

cols=“显示的行数”。

这两个样式属性实际开发中大多使用css就可以改变操作。

代码示例:

<h1>文本域表单元素</h1>
    <form action="">
        <label for="textrea">今日反馈:</label><br>
        <textarea name="" id="" cols="15" rows="10">今日反馈</textarea>
    </form>

运行界面:

关于HTML基础内容就学习到这里了,明天练习一个综合案例。对了,现在跟学的是黑马前端的pink老师发布的基础视频,明天做的案例按照老师讲解的案例去做。

单输入绑定

获取表单输入的值方式:

  1. 手动连接值绑定和更改事件监听器
  2. v-model 指令 (常用)
<script lang="ts" setup>
import { ref } from "vue"
// 定义个变量接收输入的内容:
const text = ref("111")
const text2 = ref("222")

</script>

<template>
    <div class="container">
        <section>
            <!-- 输入内容通过事件绑定值: -->
            <p>默认的value是 111</p>
            <input :value="text" @input="event => text = event?.target?.value" />
            <div>这是输入的值{{ text }}</div>
        </section>

        <section>
            <!-- v-model 指令帮我们简化了这一步骤 -->
            <p>默认的value是 222</p>
            <input v-model="text2" value="888">
            <div>这是输入的值{{ text2 }}</div>
        </section>

    </div>
</template>

<style lang="scss" scoped>
.container {
    section {
        margin-bottom: 20px;
    }
}
</style>

示例:

v-model 还可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合

表单类型

绑定属性值

绑定事件

input

value

input

textarea

value

input

checkbox

checked

change

radio

checked

change

select

value

change

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。

比如下面 888 值不显示 无效的

<input v-model="text2" value="888">

表单基本用法

  1. 文本
  2. 多行文本
  3. 复选框
  4. 单选按钮
  5. 选择器
<script lang="ts" setup>
import { ref } from "vue"
// 定义个变量接收输入的内容:
const f1 = ref("f1的默认值")
const f2 = ref("f2的默认值")
const f3 = ref(true)
const f4 = ref([])
const f5 = ref('女')
const f6 = ref('深圳')

</script>

<template>
    <div class="container">
        <section>
            <p>input输入框</p>
            <p>f1的值是: {{ f1 }}</p>
            <input v-model="f1" placeholder="请输入" />
        </section>

        <section>
            <p>多行文本</p>
            <!-- 错误 -->
            <!-- <textarea>{{ text }}</textarea> -->
            <p>f2的值是: {{ f2 }}</p>
            <!-- 正确 -->
            <textarea v-model="f2" rows="3"></textarea>
        </section>

        <section>
            <p>复选框</p>
            <p>单个</p>
            <input type="checkbox" id="checkbox" v-model="f3" /> <label for="checkbox">统一协议</label>
            <br>
            <label for="checkbox">f3的值是:{{ f3 }}</label>
            <br>
            <br>
            <p>多个</p>
            <input type="checkbox" id="h1" value="篮球" v-model="f4" /> <label for="h1">篮球</label>
            <input type="checkbox" id="h2" value="足球" v-model="f4" /> <label for="h2">足球</label>
            <input type="checkbox" id="h3" value="排球" v-model="f4" /> <label for="h3">兵乓球</label>
            <br>
            <label for="checkbox">f4的值是:{{ f4 }}</label>
        </section>

        <section>
            <p>单选按钮</p>
            <p>f5的值是: {{ f5 }}</p>
            <input type="radio" id="one" value="男" v-model="f5" />
            <label for="one">男</label>

            <input type="radio" id="two" value="女" v-model="f5" />
            <label for="two">女</label>
        </section>

        <section>
            选择器
            <div>f6的值是 : {{ f6 }}</div>

            <select v-model="f6" multiple>
                <option disabled value="">请选择一个你喜欢的城市</option>
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
                <option>广州</option>
            </select>

        </section>

    </div>
</template>

<style lang="scss" scoped>
.container {
    section {
        margin-bottom: 20px;
    }

    label {
        margin-right: 10px;
    }

    select {
        margin: 20px;
        padding: 20px;
    }
}
</style>

示例:

复选框 true-value 和 false-value 属性

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

  // 动态渲染
<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

true-value 和 false-value 是 Vue 特有的 attributes,仅支持和 v-model 配套使用。

  • 这里 toggle 属性的值会在选中时被设为 'yes',取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值:

选择器,非字符串类型的值绑定

...
...

const selected = ref({ number: 111 })
...
...

<section>
     <p>selected 的值是:{{ selected }}</p>
     <select v-model="selected">
         <!-- 内联对象字面量 -->
         <option :value="{ number: 111 }">111</option>
         <option :value="{ number: 222 }">222</option>
     </select>
 </section>

示例:

修饰符

  • .lazy 每次 change 事件后更新数据 (节流)
  • .number 用户输入自动转换为数字
  • .trim 自动去除用户输入内容中两端的空格