• eyb：Vue学习1

    目录：

    （1）Vue学习目标

    （2）前端只是体系

    （3）前后端分离演变史

    （4）前端MVVM模式

    （5）Vue是什么

    （6）Vue实例声明周期

    （1）Vue学习目标

    vue-cli：是vue官方的脚手架，帮助我们快速创建项目，附带着一些常用的依赖，像Maven一样

    webpack：是一个打包工具

    vue-toot：简单说就是一个页面的跳转

    vuex：简单说就是存储我们对象的，对象里面响应的属性值啊 

     

     （2）前端只是体系

    Css的弱点：

    不可以自定义变量，不可以去引用，导致在工作中添加了工作量

    比如说百度搜索引擎，每一个节日都有一个对应节日的css样式，这个需要重复去编写的东西，就增加了工作量，为了解决这个问题，衍生出了css预处理器 

     

     

     

     

    获取div：app方式：下面是原生方式，上面是jquery方式

    DOM原来是在页面上操作，虚拟DOM是在内存里面操作 

     vue：只关注视图，不提供其他功能

     

     （3）前后端分离演变史

     

     

     

    CDN：相当于静态资源库，相当于内容分发网络 

    静态资源放在静态资源服务器上面，数据请求，通过ajax请求，从后台拿取数据然后再在前端页面展示

     

     

     

     

     

     

    （4）前端MVVM模式

     

     

     

    （5）Vue是什么

     

     

     

     

     

     

     （6）第一个Vue应用程序

     

     

    入门Demo

    div就相当于一个View 

     

    new Vue{}：相当于：ViewModel

    通过#app把ViewModel和View关联起来 

     

    data就相当于Model层 

     

    ViewModel通过data跟Model关联起来 

    怎么在视图里面显示数据呢？通过{{messageg}} 

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    6. 		<title>第一个应用程序</title>
    7. 	</head>
    8. 	<body>
    9. 		<div id="app">
    10. 		  {{ message }}
    11. 		</div>
    12. 		
    13. 		<script>
    14. 			var app = new Vue({
    15. 				//element的缩写,挂在元素
    16. 			  el: '#app',
    17. 			  data: {
    18. 			    message: 'Hello Vue!'
    19. 			  }
    20. 			})
    21. 		</script>
    22. 	</body>
    23. </html>

    VueModel可以做数据双向绑定，当data里面有数据变化的时候呢，视图页面可以立刻变更数据，并且没有感知到DOM操作 

    回车：

     

    这就是MVVM模式，双向绑定，ViewModel DMO监听、数据绑定的功能

    （6）Vue实例声明周期

     beforeCreate：在创建之前执行的钩子时间

    create：实例创建完成之后也会去执行的钩子事件

    beforeMount：将我们编译完成的html挂在到对应的一个虚拟DOM时处时对应的钩子

    mounted：将我们编译好的html挂载到页面完成后执行的钩子事件

  • 相关阅读:
    Windows安装Ubuntu、Docker
    （新）Spring Security如何自定义失败处理器
    Hikvison对接NVR实现WEB无插件开发包实现前端视频预览(html、vue、nginx代理)
    【C++面向对象】7. 类的静态成员
    常用的排序算法的时间复杂度以及稳定性
    vite + vue3 + js 搭建组件库 + 核心配置与使用
    (王道408考研操作系统)第二章进程管理-第二节2、3：进程调度的时机、切换与过程、方式、调度器和闲逛进程
    Geteway
    2.4 自定义msg Python
    制作一个简单HTML静态网页（HTML+CSS）
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/126449411