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&