12. 教你零基礎(chǔ)搭建小程序：模板語(yǔ)法—數(shù)據(jù)綁定（1）

瑞巴迪，

從這章開(kāi)始，我們要講微信小程序的模板語(yǔ)法。

模板語(yǔ)法的定義：

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的?套標(biāo)簽語(yǔ)?，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

模板語(yǔ)法有以下四個(gè)種類，

1、數(shù)據(jù)綁定
2、運(yùn)算
3、列表渲染
4、條件渲染

這是我們接下來(lái)要一一重點(diǎn)講解的。

這一章，我們來(lái)初步學(xué)習(xí)模板語(yǔ)法中的數(shù)據(jù)綁定。

大家可以點(diǎn)擊下方鏈接，找到我們的教科書（微信官方文檔）去學(xué)習(xí)一下基本定義，有一個(gè)大致的了解。

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

數(shù)據(jù)綁定: WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data

我們還是老方法，在實(shí)踐中學(xué)習(xí)，在實(shí)操中認(rèn)識(shí)。

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

代碼如下：

2、打開(kāi) pages 文件夾--打開(kāi)demo03 文件夾--打開(kāi)demo03.wxml 文件，頁(yè)面如下：

在demo03.wxml 文件中，可以看到如下代碼：

代碼中包含標(biāo)簽和普通文本兩部分內(nèi)容。

我們先對(duì)”text“標(biāo)簽做簡(jiǎn)單描述：

”text“相當(dāng)于傳統(tǒng)web中的span標(biāo)簽，是行內(nèi)元素，當(dāng)頁(yè)面中存在多個(gè)text 標(biāo)簽時(shí)，各標(biāo)簽也是不換行的。

比如：

我們?cè)赿emo03.wxml 文件中輸入以下代碼：

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

按下保存鍵，發(fā)現(xiàn)，左側(cè)的屏幕中，1，2是在同一行的。

這就是說(shuō)，當(dāng)頁(yè)面中存在多個(gè)text 標(biāo)簽時(shí)，各標(biāo)簽也是不換行的。

2.1 補(bǔ)充：對(duì)另一個(gè)標(biāo)簽——”view“標(biāo)簽進(jìn)行描述。

”view“標(biāo)簽相當(dāng)于以前web 中的 div 標(biāo)簽，是塊級(jí)元素，當(dāng)頁(yè)面中有多個(gè) view 標(biāo)簽時(shí)，是會(huì)換行的。

比如：

我們?cè)赿emo03.wxml 文件中輸入以下代碼：

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

按下保存鍵，發(fā)現(xiàn)，左側(cè)的屏幕中，1，2是各占一行的。

這就是說(shuō)，當(dāng)頁(yè)面中存在多個(gè)view 標(biāo)簽時(shí)，各標(biāo)簽是換行的。

3、數(shù)據(jù)綁定中，數(shù)據(jù)要定義在哪里？

我們打開(kāi) pages 文件夾--打開(kāi) demo03.js 文件，文件中，一新建后就有內(nèi)容存在。如下圖所示。

我們來(lái)具體解讀一下，demo03.js 文件中的內(nèi)容

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

其中，page包括的data字段，這里面都是關(guān)鍵字，是不能更改的哦，

而且，里面要放的都是一些初始化的數(shù)據(jù)，比如變量。

與data 同層級(jí)的有很多方法，基本都是生命周期函數(shù)，這在以后的章節(jié)中會(huì)介紹到的。

3.1 這里，給大家介紹一個(gè)小技巧：

我們把demo03.js 文件中的內(nèi)容全部刪除，使其文件呈現(xiàn)空白狀態(tài)。

在demo03.js 文件中輸入”page“,會(huì)有下拉提示框，這里選擇page , 就會(huì)重新出現(xiàn)刪除前的文件內(nèi)容。

在我們編輯demo03.js 文件時(shí)，如果出現(xiàn)了錯(cuò)誤，我們可以選擇全部刪除，然后再用這種方法重新輸入page方法。

歐克，本章數(shù)據(jù)綁定部分的一部分知識(shí)，講解到此，下一章我們繼續(xù)講解數(shù)據(jù)綁定的知識(shí)。

搜索并關(guān)注微信公眾號(hào)：飛寢旺食

獲取更多小程序運(yùn)營(yíng)干貨、免費(fèi)的開(kāi)發(fā)教程、源代碼等！

做小程序我們是認(rèn)真的！

表標(biāo)簽

在html中列表分為無(wú)序列表、有序列表和自定義列表（項(xiàng)目列表）。接下來(lái)就看看他們有什么不同吧！

作用：如果說(shuō)table標(biāo)簽是用來(lái)顯示數(shù)據(jù)的，那么列表標(biāo)簽就是用來(lái)進(jìn)行html頁(yè)面布局的。

無(wú)序列表

語(yǔ)法：

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

<ul></ul>標(biāo)簽中只能且必須嵌套<li></li>標(biāo)簽。li標(biāo)簽之間沒(méi)有先后順序，是并列存在的。li標(biāo)簽里可以容納文本、數(shù)據(jù)、圖片、超鏈接等內(nèi)容。跟table一樣，列表標(biāo)簽也自帶樣式屬性，但為了代碼統(tǒng)一，我們還是會(huì)使用css來(lái)設(shè)置。

代碼示例：

<h2>無(wú)序列表：</h2>
    <ul>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

運(yùn)行界面：

有序列表

語(yǔ)法：

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

<ol></ol>標(biāo)簽里面只能嵌套<li></li>標(biāo)簽，在這里li標(biāo)簽是有順序的。

代碼示例：

<h2>有序列表：</h2>
    <ol>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

運(yùn)行界面：

自定義列表

語(yǔ)法：

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

<dl></dl>標(biāo)簽：定義列表

<dt></dt>標(biāo)簽：列表標(biāo)題

<dd></dd>標(biāo)簽：列表內(nèi)容

一個(gè)dd標(biāo)簽是對(duì)dt標(biāo)簽標(biāo)題的說(shuō)明。這兩個(gè)標(biāo)簽中可以包含任何標(biāo)簽。

代碼示例：

<h2>自定義列表：</h2>
    <!-- dl：外層標(biāo)簽  dt：項(xiàng)目標(biāo)題  dd：項(xiàng)目?jī)?nèi)容 -->
    <dl>
        <dt>水果種類</dt>
        <dd>蘋果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>

運(yùn)行界面：

表單標(biāo)簽

作用：收集用戶信息。一般用在注冊(cè)界面等。

組成：一個(gè)完整的表單中包含表單域（整個(gè)填寫界面所有信息）、表單控件（表單元素）和提示信息（表單控件的提示作用）3個(gè)部分。

表單域

表單域：是一個(gè)包含表單元素的區(qū)域。

<form>標(biāo)簽用于定義表單域，實(shí)現(xiàn)用戶信息的收集和傳遞。

作用：將其區(qū)域范圍內(nèi)的信息收集并傳送給服務(wù)器。

語(yǔ)法：

<form action=”url地址” method=”提交方式” name=”表單域名稱”>
各種表單控件
</form>

注：action：url地址，指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。

method：用于設(shè)置表單數(shù)據(jù)的提交方式。

method=”get”：提交數(shù)據(jù)時(shí)，地址欄可查看到數(shù)據(jù)。數(shù)據(jù)量少且安全級(jí)別不高時(shí)使用。

method=”post”：提交數(shù)據(jù)時(shí)，地址欄數(shù)據(jù)是加密的。

name：表單域的名稱。用于區(qū)分同一頁(yè)面下的不同表單域。

表單控件

1.input輸入表單元素：

語(yǔ)法：<input type=””>，依據(jù)type屬性值不同區(qū)分不同控件。

文本框：<input type=”text”>。單行輸入字段，默認(rèn)寬度20個(gè)字符。輸入的文字可見(jiàn)。

密碼框：<input type=”password”>。輸入內(nèi)容默認(rèn)不可見(jiàn)。

單選框：<input type=”radio”>，默認(rèn)情況下選中后無(wú)法取消。

注：為實(shí)現(xiàn)多選一狀態(tài)，需要將所有的單選框控件具有同一個(gè)name名。

復(fù)選框：<input type=”checkbox”>，選中后可以更改可以取消。

提交按鈕：<input type=”submit”>，默認(rèn)按鈕中的提示文字是提交，可以通過(guò)value值進(jìn)行更改內(nèi)容。點(diǎn)擊提交按鈕后會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。

重置按鈕：<input type=”reset”>，默認(rèn)按鈕中的提示文字是重置，可以通過(guò)value值進(jìn)行更改內(nèi)容。點(diǎn)擊后會(huì)清楚表單中的所有數(shù)據(jù)。

普通按鈕：<input type=”button”>

文件域：<input type=”file”>，用來(lái)選擇文件，一般適用于文件上傳。

label標(biāo)簽：標(biāo)注標(biāo)簽，配合input控件一起使用

作用：綁定表單控件，擴(kuò)大點(diǎn)擊范圍。

當(dāng)點(diǎn)擊label標(biāo)簽的內(nèi)容時(shí)，系統(tǒng)會(huì)自動(dòng)選中該表單控件。

代碼示例：

<h1>label標(biāo)簽</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>

運(yùn)行界面：

Input控件屬性：

name:用戶自定義，提示input元素的名稱。給后臺(tái)工作人員的提示。

value：用戶自定義，提示input元素的內(nèi)容值。給后臺(tái)的提示。在文本框控件中會(huì)顯示該內(nèi)容，單選框和復(fù)選框則顯示不出來(lái)。

checked：默認(rèn)選中狀態(tài)。主要用于單選按鈕和復(fù)選按鈕中。

maxlength：正整數(shù)，規(guī)定輸入字段中的字符最大長(zhǎng)度。

input代碼示例：

<h2>表單標(biāo)簽</h2>
    <form>
        用戶名：<input type="text" maxlength="15" value="請(qǐng)輸入用戶名"><br>
        密  碼：<input type="password"><br>
        性  別：<input type="radio" name="sex" value="男">男   
				<input type="radio" name="sex" value="女">女<br>
        愛(ài)  好：<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="注冊(cè)">
        <input type="reset" value="清空"><br>
        <!-- 后期結(jié)合js搭配使用 -->
        <!-- 按鈕選框在默認(rèn)情況下是沒(méi)有文字內(nèi)容的，需要添加value值設(shè)置文字內(nèi)容 -->
        <input type="button" value="獲取短信驗(yàn)證碼"><br>
        上傳頭像：<input type="file">
    </form>

運(yùn)行界面：

2.select下拉表單元素：

使用場(chǎng)景：地址選擇、職業(yè)分類、學(xué)校分類等。

select標(biāo)簽：定義下拉列表。

語(yǔ)法：

<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>

運(yùn)行界面：

3.textrea文本域表單控件

使用場(chǎng)景：留言、介紹、評(píng)論等。

語(yǔ)法：

<textrea rows=”” cols=””>文本內(nèi)容</textrea>

跟文本框控件不同，它是多行文本輸入框，可以自行設(shè)定行數(shù)以及一行容納多少字?jǐn)?shù)。

rows=“每行可輸入的字符數(shù)”，

cols=“顯示的行數(shù)”。

這兩個(gè)樣式屬性實(shí)際開(kāi)發(fā)中大多使用css就可以改變操作。

代碼示例：

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

運(yùn)行界面：

關(guān)于HTML基礎(chǔ)內(nèi)容就學(xué)習(xí)到這里了，明天練習(xí)一個(gè)綜合案例。對(duì)了，現(xiàn)在跟學(xué)的是黑馬前端的pink老師發(fā)布的基礎(chǔ)視頻，明天做的案例按照老師講解的案例去做。

單輸入綁定

獲取表單輸入的值方式：

手動(dòng)連接值綁定和更改事件監(jiān)聽(tīng)器
v-model 指令（常用）

<script lang="ts" setup>
import { ref } from "vue"
// 定義個(gè)變量接收輸入的內(nèi)容：
const text = ref("111")
const text2 = ref("222")

</script>

<template>
    <div class="container">
        <section>
            <!-- 輸入內(nèi)容通過(guò)事件綁定值： -->
            <p>默認(rèn)的value是 111</p>
            <input :value="text" @input="event => text = event?.target?.value" />
            <div>這是輸入的值{{ text }}</div>
        </section>

        <section>
            <!-- v-model 指令幫我們簡(jiǎn)化了這一步驟 -->
            <p>默認(rèn)的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 還可以用于各種不同類型的輸入元素。它會(huì)根據(jù)所使用的元素自動(dòng)使用對(duì)應(yīng)的 DOM 屬性和事件組合

表單類型	綁定屬性值	綁定事件
input	value	input
textarea	value	input
checkbox	checked	change
radio	checked	change
select	value	change

v-model 會(huì)忽略任何表單元素上初始的 value、checked 或 selected attribute。它將始終將當(dāng)前綁定的 JavaScript 狀態(tài)視為數(shù)據(jù)的正確來(lái)源。

比如下面 888 值不顯示無(wú)效的

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

表單基本用法

文本
多行文本
復(fù)選框
單選按鈕
選擇器

<script lang="ts" setup>
import { ref } from "vue"
// 定義個(gè)變量接收輸入的內(nèi)容：
const f1 = ref("f1的默認(rèn)值")
const f2 = ref("f2的默認(rèn)值")
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="請(qǐng)輸入" />
        </section>

        <section>
            <p>多行文本</p>
            <!-- 錯(cuò)誤 -->
            <!-- <textarea>{{ text }}</textarea> -->
            <p>f2的值是: {{ f2 }}</p>
            <!-- 正確 -->
            <textarea v-model="f2" rows="3"></textarea>
        </section>

        <section>
            <p>復(fù)選框</p>
            <p>單個(gè)</p>
            <input type="checkbox" id="checkbox" v-model="f3" /> <label for="checkbox">統(tǒng)一協(xié)議</label>
            <br>
            <label for="checkbox">f3的值是：{{ f3 }}</label>
            <br>
            <br>
            <p>多個(gè)</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="">請(qǐng)選擇一個(gè)你喜歡的城市</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>

示例：

復(fù)選框 true-value 和 false-value 屬性

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

  // 動(dòng)態(tài)渲染
<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

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

這里 toggle 屬性的值會(huì)在選中時(shí)被設(shè)為 'yes'，取消選擇時(shí)設(shè)為 'no'。你同樣可以通過(guò) v-bind 將其綁定為其他動(dòng)態(tài)值：

選擇器，非字符串類型的值綁定

...
...

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

<section>
     <p>selected 的值是:{{ selected }}</p>
     <select v-model="selected">
         <!-- 內(nèi)聯(lián)對(duì)象字面量 -->
         <option :value="{ number: 111 }">111</option>
         <option :value="{ number: 222 }">222</option>
     </select>
 </section>

示例：

修飾符

.lazy 每次 change 事件后更新數(shù)據(jù) （節(jié)流）
.number 用戶輸入自動(dòng)轉(zhuǎn)換為數(shù)字
.trim 自動(dòng)去除用戶輸入內(nèi)容中兩端的空格

在線咨詢

上一篇：2.3.3.HTML5布局的使用
下一篇：HTML5 營(yíng)銷：三種玩法+案例

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

12. 教你零基礎(chǔ)搭建小程序：模板語(yǔ)法—數(shù)據(jù)綁定（1）

表標(biāo)簽

表單標(biāo)簽

單輸入綁定

表單基本用法

復(fù)選框 true-value 和 false-value 屬性

選擇器，非字符串類型的值綁定

修飾符

您的項(xiàng)目需求

選擇器，非字符串類型的值綁定