前端实验（二）模板语法
实验目的
熟悉Vue实例模版
熟悉Vue模版语法核心语法
掌握Vue生命周期函数及其执行时机
掌握模板语法中条件渲染语法
掌握模板语法中循环渲染语法
实验步骤
- Vue实例解析
在项目目录 D:/vue/demo 下创建 demo2.html 文件，并引入最新版Vue.js（推荐使用CDN）。该Vue实例拥有常用的配置项，包括生命周期函数、watch、computed等配置项。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3选项式API示例</title><script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
</head>
<body><div id="app" class="container"><h1>{{ title }}</h1><div class="section"><h2>数据绑定</h2><p>计数器: {{ counter }}</p><button @click="increment">增加</button><button @click="decrement">减少</button></div><div class="section"><h2>计算属性</h2><p>计算属性结果: {{ computedMessage }}</p><p>反转消息: {{ reversedMessage }}</p></div><div class="section"><h2>侦听器</h2><input v-model="inputText" placeholder="输入内容观察watch效果"><p>输入内容: {{ inputText }}</p><p>上次输入: {{ lastInput }}</p></div><div class="section"><h2>组件生命周期</h2><p>组件创建时间: {{ createTime }}</p><button @click="updateTime">更新时间</button></div></div><script>const { createApp } = Vue;<!-- 使用构造函数创建Vue对象 -->createApp({// <!-- 数据属性，使用闭包函数，隐藏对象的属性 -->data() {return {title: 'Vue3选项式API示例',counter: 0,inputText: '',lastInput: '',message: 'Hello Vue3!',createTime: ''}},<!-- 该对象方法属性，配置在mothod中，定义需要绑定在模板中对应的事件中 -->methods: {increment() {this.counter++;},decrement() {this.counter--;},updateTime() {this.createTime = new Date().toLocaleString();}},<!-- 计算属性，定义模板中需要显式的通过计算得到的数据 -->computed: {computedMessage() {return `当前计数是: ${this.counter}`;},reversedMessage() {return this.message.split('').reverse().join('');}},<!-- 监听属性，监听某个数据发生变化时响应的代码 -->watch: {counter(newVal, oldVal) {console.log(`计数器从 ${oldVal} 变为 ${newVal}`);},inputText(newVal) {this.lastInput = newVal;console.log(`输入内容更新为: ${newVal}`);}},<!-- 生命周期钩子函数，开发者可以在Vue实例的关键节点中插入自定义代码 -->mounted() {console.log('mounted: 组件已挂载到DOM');}}).mount('#app');</script><style>body {font-family: 'Arial', sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;background-color: #f5f7fa;}.container {background: white;border-radius: 8px;padding: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}button {background: #42b983;color: white;border: none;padding: 8px 16px;border-radius: 4px;cursor: pointer;margin: 5px;transition: all 0.3s;}button:hover {background: #369f6b;}input {padding: 8px;border: 1px solid #ddd;border-radius: 4px;margin: 5px;}</style>
</body>
</html>
由上例可以看书，使用构造函数CreateAPP创建Vue实例，该实例包含一系列属性（Vue提供一套模版），常用属性包括：data，mehtod、computed、watch等。其他属性如：props、compents等属性在后续介绍
2. 常用核心语法
在vue实例中使用函数，而非data属性。组件需要独立的数据空间以避免数据污染。若data为对象类型，所有复用的组件实例会共享同一数据空间，导致数据混乱。而函数返回新对象的方式确保每个组件实例拥有独立的数据副本，互不干扰。
Vue模版语法需使用Vue提供的一系列指令完成，vue指令使用前缀“v-”。新建html文件，演示核心语法，包括v-text指令， 大胡子语法{{}} ，数据绑定指令v-bind，v-bind简写 ：，双向绑定：v-model，事件绑定：v-on，简写 @等。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue核心语法演示</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><div id="app"><h1>Vue核心语法演示</h1><!-- 1. 大胡子语法演示 --><div class="demo-card"><h2>1. 大胡子语法 {{}}</h2><p>消息内容: {{ message }}</p><p>计算属性: {{ reversedMessage }}</p></div><!-- 2. v-text指令演示 --><div class="demo-card"><h2>2. v-text指令</h2><p v-text="'使用v-text显示: ' + message"></p><p>比较显示: <span v-text="message"></span> vs {{ message }}</p></div><!-- 3. v-bind指令演示 --><div class="demo-card"><h2>3. v-bind数据绑定</h2><div><input type="color" v-model="bgColor"><div class="dynamic-style" v-bind:style="{ backgroundColor: bgColor }">动态样式绑定</div></div><div><a v-bind:href="url">完整写法绑定</a><a :href="url">简写绑定</a></div></div><!-- 4. v-model双向绑定 --><div class="demo-card"><h2>4. v-model双向绑定</h2><input v-model="message" placeholder="输入内容..."><p>实时显示: {{ message }}</p><select v-model="selectedOption"><option v-for="option in options" :value="option.value">{{ option.text }}</option></select><p>已选择: {{ selectedOption }}</p></div><!-- 5. 事件绑定 --><div class="demo-card"><h2>5. 事件绑定 v-on/@</h2><button v-on:click="showAlert('完整写法')">完整写法</button><button @click="showAlert('简写')">简写@</button><button @click="counter++">计数器: {{ counter }}</button></div></div><script>new Vue({el: '#app',data: {message: 'Hello Vue!',bgColor: '#42b983',url: 'https://vuejs.org',selectedOption: 'A',options: [{ text: '选项A', value: 'A' },{ text: '选项B', value: 'B' },{ text: '选项C', value: 'C' }],counter: 0},computed: {reversedMessage() {return this.message.split('').reverse().join('');}},methods: {showAlert(type) {alert(`${type}事件绑定被触发!`);}}});</script><style>body {font-family: 'Arial', sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;background-color: #f8f9fa;}.demo-card {background: white;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}h1 {color: #42b983;text-align: center;}h2 {color: #35495e;border-bottom: 1px solid #eee;padding-bottom: 10px;}input, button, select {padding: 8px 12px;margin: 5px 0;border-radius: 4px;border: 1px solid #ddd;}button {background-color: #42b983;color: white;border: none;cursor: pointer;transition: background-color 0.3s;}button:hover {background-color: #369f6b;}.dynamic-style {padding: 15px;margin: 10px 0;border-radius: 4px;transition: all 0.3s;}</style>
</body>
</html>- 生命周期函数
在vue生命周期关键结点上，预设了一些函数，这些函数称作生命周期钩子函数。钩子函数会在生命周期中自动执行，无须使用事件监听。利用钩子函数，开发人员可以在合适的时机执行相应的业务逻辑代码。开发者必须了解生命周期中各个钩子函数执行的时机和条件。新建html文件，演示生命周期函数的执行时机。代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3 选项式生命周期演示</title><script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
</head>
<body><div id="app"><h1>Vue3 生命周期演示</h1><p>当前计数: {{ count }}</p><button @click="count++">增加计数</button></div><script>const { createApp } = Vue;const app = createApp({data() {return {count: 0,messageCount: NaN};},// 选项式生命周期钩子beforeCreate() {console.log('beforeCreate vue实例尚未创建,不能读取count数据'+ this.count);},created() {console.log('created，vue实例已创建创建'+ this.count);},beforeMount() {console.log('beforeMount，数据尚未渲染到页面，可以在此提取后台数据，页面可能会出现白屏');},mounted() {console.log('mounted，数据已完成渲染到页面，可以在此提取后台数据，页面可能不会出现白屏');},beforeUpdate() {console.log('beforeUpdate，在内存中的数据更新完成但页面节点尚未更新时触发，此时可以访问内存中的最新数据，但页面渲染的 DOM 还未同步更新 '+ '， 修改后的值为：'+this.count);},updated() {console.log('updated，数据跟新后代码，但页面渲染已完成'+this.count);},beforeUnmount() {console.log('beforeUnmount,实例销毁前，释放资源');},unmounted() {console.log('unmounted，实例销毁后，记录日志');}});app.mount('#app');</script>
</body>
</html>
- 条件渲染
新建html文件，演示条件渲染，包括v-if v-else，v-show的使用。代码如下：
<style>body {font-family: 'Arial', sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;background-color: #f5f7fa;}.container {background: white;border-radius: 8px;padding: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}.section {margin-bottom: 30px;padding: 20px;border: 1px solid #eee;border-radius: 8px;}button {background: #42b983;color: white;border: none;padding: 8px 16px;border-radius: 4px;cursor: pointer;margin: 5px;transition: all 0.3s;}button:hover {background: #369f6b;}.user-card {background: #f8f9fa;padding: 15px;margin: 10px 0;border-radius: 4px;}.hidden {display: none;}</style>
- 循环渲染
新建html文件，演示循环渲染。代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3 循环渲染演示</title><script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
</head>
<body><div id="app"><h1>Vue3 循环渲染演示</h1><div class="controls"><button @click="addItem">添加新项目</button><button @click="shuffleItems">随机排序</button><button @click="filterEven">筛选偶数ID</button><button @click="reset">重置列表</button></div><div v-for="(item, index) in items" :key="item.id" class="item-card"><h3>项目 #{{ item.id }}</h3><p>名称: {{ item.name }}</p><p>创建时间: {{ item.createdAt }}</p><button @click="removeItem(index)">删除</button></div><p v-if="items.length === 0">暂无项目，点击"添加新项目"按钮开始</p></div><script>const { createApp } = Vue;createApp({data() {return {items: [{ id: 1, name: '项目A', createdAt: this.getCurrentTime() },{ id: 2, name: '项目B', createdAt: this.getCurrentTime() },{ id: 3, name: '项目C', createdAt: this.getCurrentTime() }],nextId: 4};},methods: {getCurrentTime() {return new Date().toLocaleTimeString();},addItem() {const names = ['项目X', '项目Y', '项目Z', '项目W'];const randomName = names[Math.floor(Math.random() * names.length)];this.items.push({id: this.nextId++,name: randomName,createdAt: this.getCurrentTime()});},removeItem(index) {this.items.splice(index, 1);},shuffleItems() {this.items = [...this.items].sort(() => Math.random() - 0.5);},filterEven() {this.items = this.items.filter(item => item.id % 2 === 0);},reset() {this.items = [{ id: 1, name: '项目A', createdAt: this.getCurrentTime() },{ id: 2, name: '项目B', createdAt: this.getCurrentTime() },{ id: 3, name: '项目C', createdAt: this.getCurrentTime() }];this.nextId = 4;}}}).mount('#app');</script><style>body {font-family: Arial, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;}.item-card {background: #f5f5f5;border-radius: 8px;padding: 15px;margin: 10px 0;box-shadow: 0 2px 4px rgba(0,0,0,0.1);transition: transform 0.2s;}.item-card:hover {transform: translateY(-3px);}button {background: #42b983;color: white;border: none;padding: 8px 15px;border-radius: 4px;cursor: pointer;margin: 5px;}button:hover {background: #369f6e;}.controls {margin: 20px 0;}</style>
</body>
</html>