本文深入探讨Vue.js，从简单案例出发，介绍MVVM模式及其作用，详细讲解模板语法、属性绑定、列表渲染和v-model的双向数据绑定。同时，讨论v-on事件绑定，特别是键盘事件案例，以及Class与Style的动态绑定。此外，文章还涉及Vue Router的动态路由、Vuex状态管理的使用场景，解析路由嵌套和页面跳转的方法。
vue
简单案例
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue基本使用</title>
</head>
<body>
<div id="app"> {
{msg}} </div>
<script src="vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el: "#app",
data() {
return {
msg: "hello world",
};
},
});
setTimeout(() => {
app.msg = "hello Vue"; }, 1000);
</script>
</body>
</html>
数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改 dom .
简单的理解：就是 vue.js 帮我们封装了数据和 dom 对象操作的映射，我们只需要关心数据的逻辑处理，数据的变化就能够自然的通知页面进行页面的重新渲染。
MVVM
Vue.js 的数据驱动是通过 MVVM 这种框架来实现的， MVVM 框架主要包含三部分： Model , View , ViewMode Model :指的是数据部分，对应到前端就是 JavaScript 对象。
View :指的就是视图部分
ViewModel : 就是连接视图与数据的中间件(中间桥梁)
MVVM的作用与理解
数据( Model )和视图( View )是不能直接通讯的，而是需要通过 ViewModel 来实现双方的通讯。
当数据( Model )变化的时候， ViewModel 能够监听到这种变化，并及时通知 View 视图做出修改。同样的，当页面有事件触发的时候， ViewModel 也能够监听到事件，并通知数据( Model )进行响应。
所以 ViewModel 就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
简单的理解就是： MVVM 实现了将业务(数据)与视图进行分离的功能。
MVVM 框架的三要素
响应式，模板引擎，渲染
响应式： vue 如何监听数据的变化？
模板： Vue 的模板如何编写和解析？怎样将具体的值替换掉 {
{msg}} 内容，这就是模板引擎的解析。
渲染： Vue 如何将模板转换成 html ? 其实就是有虚拟 DOM 向真实 DOM 的转换。
模板语法
属性绑定
<div id="app">
<h2 v-bind:title="msg"> {
{msg}} </h2>
</div>
简写
<div id="app">
<h2 :title="msg"> {
{msg}} </h2>
</div>
出现: { {msg}} 的情况
<div id="app">
<h2 :title="msg">
<!-- {
{msg}} -->
<span v-text="msg"></span&
最低0.47元/天 解锁文章
3350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
