【深入学习Vue丨第二篇】构建动态Web应用的基础

前言

Vue模板语法是一种基于HTML的扩展语法，它允许开发者声明式地将数据绑定到DOM。与传统的字符串模板或JSX不同，Vue模板更接近原生HTML，学习曲线平缓，同时提供了强大的数据绑定和逻辑控制能力。

模板语法基础

文本插值

最基本的模板语法是"Mustache"语法（双大括号），用于数据绑定：

<div id="app"><p>{{ message }}</p><!-- 一次性插值 --><span v-once>{{ message }}</span>
</div>

new Vue({el: '#app',data: {message: 'Hello Vue!'}
})

2. 原始HTML

双大括号会将数据解释为普通文本，如果要输出真正的HTML，需要使用v-html指令：

<div id="app"><p>{{ rawHtml }}</p><!-- 输出真正的HTML --><p v-html="rawHtml"></p>
</div>

new Vue({el: '#app',data: {rawHtml: '<span style="color: red">红色文字</span>'}
})

指令详解

指令是带有v-前缀的特殊属性，其值预期是单个JavaScript表达式

1. 条件渲染

<div id="app"><!-- v-if 条件渲染 --><p v-if="isVisible">你可以看到我</p><p v-else>你看不到上面的内容</p><!-- v-show 条件显示 --><p v-show="isShow">我总是被渲染，只是可能不显示</p><!-- 多个条件判断 --><div><p v-if="type === 'A'">类型A</p><p v-else-if="type === 'B'">类型B</p><p v-else>其他类型</p></div>
</div>

new Vue({el: '#app',data: {isVisible: true,isShow: false,type: 'A'}
})

v-if vs v-show：

• v-if是真正的条件渲染，元素会被销毁和重建

• v-show只是切换CSS的display属性

• if有更高的切换开销，v-show有更高的初始渲染开销

2. 列表渲染

使用v-for指令基于数组或对象渲染列表：

<div id="app"><!-- 数组渲染 --><ul><li v-for="(item, index) in items" :key="item.id">{{ index + 1 }}. {{ item.name }}</li></ul><!-- 对象渲染 --><ul><li v-for="(value, key, index) in userInfo">{{ index + 1 }}. {{ key }}: {{ value }}</li></ul><!-- 使用计算属性过滤列表 --><ul><li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li></ul>
</div>

3.事件处理

使用v-on指令（简写@）监听DOM事件：

<div id="app"><!-- 直接执行方法 --><button @click="sayHello">点击我</button><!-- 内联JavaScript语句 --><button @click="count++">计数: {{ count }}</button><!-- 传递参数 --><button @click="saySomething('Hello!')">打招呼</button><!-- 访问原始DOM事件 --><button @click="warn('表单不能提交', $event)">提交</button><!-- 事件修饰符 --><form @submit.prevent="onSubmit"><input type="text"><button type="submit">提交</button></form><!-- 按键修饰符 --><input @keyup.enter="submitForm" placeholder="按回车提交">
</div>

new Vue({el: '#app',data: {count: 0},methods: {sayHello() {alert('Hello!')},saySomething(message) {alert(message)},warn(message, event) {if (event) {event.preventDefault()}alert(message)},onSubmit() {alert('表单已提交')},submitForm() {alert('表单通过回车提交')}}
})

4. 表单输入绑定

使用v-model指令在表单元素上创建双向数据绑定：

<div id="app"><!-- 文本输入 --><input v-model="message" placeholder="编辑我"><p>输入的内容: {{ message }}</p><!-- 多行文本 --><textarea v-model="multilineText"></textarea><p style="white-space: pre-line">{{ multilineText }}</p><!-- 复选框 --><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><!-- 多个复选框 --><div><input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><p>选中的人: {{ checkedNames }}</p></div><!-- 单选按钮 --><div><input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><p>选中的值: {{ picked }}</p></div><!-- 选择框 --><div><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><p>选中的值: {{ selected }}</p></div>
</div>

new Vue({el: '#app',data: {message: '',multilineText: '',checked: false,checkedNames: [],picked: '',selected: ''}
})

修饰符：

.lazy - 转为在change事件后同步

.number - 将输入值转为数值类型

.trim - 自动过滤输入的首尾空白字符