• 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挂载到页面完成后执行的钩子事件

  • 相关阅读:
    基于Python的ArcGIS流程化数据处理及应用开发
    C# 获取本机IP地址，IPv4，IPv6（保姆级）
    【TA-霜狼_may-《百人计划》】图形4.2 SSAO算法 屏幕空间环境光遮蔽
    Linux C 应用编程学习笔记——（3）深入探究文件 I/O
    ubuntu20.04安装教程
    gitee.com[0: xxx.xx.xxx.xx]: errno=Unknown error
    K8S+Jenkins自动化构建微服务项目（后续）
    使用CDN有什么好处？
    RK3568技术笔记之一 RK3568总体介绍
    swift 页面跳转
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/126449411