vue-2020-12-1

由雨溪，关注度分离原则

1，vue初了解

1，vue.js

Angular：谷歌开发，特点是实现模块化开发（模块化）
React：FaceBook开发，特点是实现虚拟Dom（使用内存）
Vue：吸收了上面两者的特点

2，MVVM模式的实现者

Model ：模型层，在这里表示javaScript对象
View：视图层，在这里表示Dom(HTML操作的元素)
ViewModel ：连接视图和数据的中间件，Vue.js 就是MVVM中的ViewModel层的实现者。

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

viewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据的变化

至此，我们就明白了，Vue.js就是一个MVVM的实现者，她的核心就是实现了DOM监听与数据绑定。

View

View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

第一个VUE程序

1，安装idea，vue插件

2，下载vue

开发版本

cdn

<script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js”></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

3，代码编写

1 ，创建一个HTML文件

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
    <!--{
    
    {message}}-->
    <span v-bind:title="message">
        鼠标停留在界面几秒后显示提示问字
    </span>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<script>
    var vm=new Vue({
     
     
        //el:元素，绑定
        el:"#app",
        //data：Model-：数据层，
        data:{
     
     
            message:"hell,Vue!"
    }
    });
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hnnh16N-1606873695168)(C:\Users\zp\AppData\Roaming\Typora\typora-user-images\image-20201201150234564.png)] 在这里插入图片描述

结论：vm（ViewModel）就是使用了虚拟DOm

4，指令：带有v-前缀的

【Vue】—1：vue初了解（狂神说系列）

vue-2020-12-1

1，vue初了解

猜你喜欢