【Vue】基础系列（一）初识 - 简单使用 - 创建Vue对象 - 双向数据绑定 - 显示数据 - MVVM模式

时间：2024-12-20 07:37:49

在这里插入图片描述

文章目录

  • 0. 基本认识
    • 0.1 特点
    • 0.2 与其他前端 JS 框架的关联
    • 0.3 Vue 扩展插件
  • 1. 引入
  • 2. 创建Vue对象
    • 2.1 el
    • 2.2 data
    • 关于el和data的两种写法
  • 3. 双向数据绑定 : v-model & 显示数据 : {{xxx}} 插值语法
    • 例子
  • 4. 理解Vue的MVVM实现
    • M
    • V
    • VM
    • MVVM

0. 基本认识

渐进式 JavaScript 框架，用来动态构建用户界面

/
在这里插入图片描述

0.1 特点

  1. 遵循 MVVM 模式
  2. 编码简洁，体积小，运行效率高，适合 移动/PC 端开发
  3. 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目
  4. 采用组件化模式，提高代码复用率、且让代码更好维护
  5. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
  6. 使用虚拟DOM和Diff算法，尽量复用DOM节点

0.2 与其他前端 JS 框架的关联

借鉴 angular 的 模板 和 数据绑定 技术
借鉴 react 的 组件化 和 虚拟DOM 技术

0.3 Vue 扩展插件

vue-cli：vue 脚手架
vue-resource(axios)：ajax 请求
vue-router：路由
vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
mint-ui：基于 vue 的 UI 组件库（移动端）
element-ui：基于 vue 的 UI 组件库（PC 端）

1. 引入

本地引入
CDN引入

2. 创建Vue对象

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
//创建Vue实例
new Vue({
	el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
	data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
		name:'YK菌',
		address:'合肥'
	}
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

注意区分：js表达式 和 js代码(语句)

  1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
    (1). a
    (2). a+b
    (3). demo(1)
    (4). x === y ? 'a' : 'b'

  2. js代码(语句)
    (1). if(){}
    (2). for(){}

2.1 el

指定根element(选择器)

2.2 data

初始化数据(页面可以访问)

关于el和data的两种写法

  1. el有2种写法

(1) new Vue时候配置el属性。

const v = new Vue({
	el:'#root', //第一种写法
	data:{
		name:'YK菌'
	}
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

(2) 先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。

const v = new Vue({
	data:{
		name:'YK菌'
	}
})
v.$mount('#root') //第二种写法 */
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. data有2种写法

(1) 对象式

data:{
	name:'YK菌'
}
  • 1
  • 2
  • 3
'
运行

(2) 函数式

data(){
	console.log('@@@',this) //此处的this是Vue实例对象
	return{
		name:'YK菌'
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

  1. 一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

3. 双向数据绑定 : v-model & 显示数据 : {{xxx}} 插值语法

例子

<div id="test"> <!--view-->
  <input type="text" v-model="msg"><br><!--指令-->
  <p>Hello {{msg}}</p><!--大括号表达式-->
</div>

<script src="../js/"></script>
<script>
  const vm = new Vue({ // 配置对象 options 
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: { // 数据（model）
      msg: 'World'
    }
  })
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这里插入图片描述

4. 理解Vue的MVVM实现

image

M

模型(Model) ：data中的数据

V

视图(View) ：模板代码（不是静态页面） （两个语法：指令，大括号表达式）

VM

viewModel: 视图模型（Vue的实例）

  • Dom Listeners （Dom 监听）
  • Data Bindings （数据绑定）
  1. data中所有的属性，最后都出现在了vm身上。
  2. vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

MVVM

MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。

模型model指的是后端传递的数据，视图view指的是所看到的页面。

视图模型viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：

将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定
将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听

这两个方向都实现的，我们称之为数据的双向绑定

相关文章