1、概念
一套用于构建用户界面的前端框架
2、vue的特性
- 数据驱动视图
- 双向数据绑定
2.1 数据驱动视图
1. 在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构
2. 好处：当页面数据发生改变时，页面会自动重新渲染
2.2 双向数据绑定
1. 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中
2. 好处：开发者不再需要手动操作DOM，来获取表单最新的值
3、MVVM
- MVVM是vue实现数据驱动试图和数据双向绑定的核心原理
- M：Model 表示当前页面渲染时所依赖的数据源
- V：View 表示当前页面所渲染的 DOM 结构
- VM：ViewModel 表示 vue 的实例，它是 MVVM 的核心
工作原理
1. ViewModel作为MVVM的核心，连接了页面的数据源Model和页面结构View
2. 当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构
3. 当表单元素的值发生变化时，也会被VM监听到，VM会把变化后的最新的值自动同步到Model数据源中
4、vue的基本使用
使用步骤：
- 导入 vue.js 的 script 脚本文件
- 在页面中声明一个将要被 vue 所控制的 DOM 区域
- 创建 vm 实例对象（vue 实例对象）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2. 声明一个将要被vue控制的dom区域 -->
<div id="app">{{username}}</div>
<!-- 1. 导入vue的库文件，在window的全局就有了vue这个构造函数 -->
<script src="lib/vue-2.6.12.js"></script>
<script>
// 3. 创建vue实例对象
const vm = new Vue({
el: '#app', //el: 指定当前vm实例要控制页面的哪个区域
// 指定model数据源
data: {
username: '张无忌'
}
})
</script>
</body>
</html>
1546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
