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老師發布的基礎視頻，明天做的案例按照老師講解的案例去做。

單輸入綁定

獲取表單輸入的值方式：

手動連接值綁定和更改事件監聽器
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">

表單基本用法

文本
多行文本
復選框
單選按鈕
選擇器

<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 自動去除用戶輸入內容中兩端的空格

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

12. 教你零基礎搭建小程序：模板語法—數據綁定（1）

表標簽

表單標簽

單輸入綁定

表單基本用法

復選框 true-value 和 false-value 屬性

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

修飾符

您的項目需求