首页 > 其他分享 >Day01 - Vue介绍

Day01 - Vue介绍

时间:2023-09-22 12:45:53浏览次数:47  
标签:Vue name Day01 介绍 js vue 前端 页面

前端介绍


1 HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看

2 Ajax的出现 -> 后台发送异步请求,Render+Ajax混合

3 单用Ajax(加载数据,DOM渲染页面):前后端分离的雏形
	前端就用html,css,js 写页面,空页面
    当页面加载完成---》发送ajax---》后端获取数据
    js 把获取完的数据,渲染到页面上
    
    后端只负责写接口
    

4 Angular框架的出现(1个JS框架):出现了“前端工程化”的概念(前端也是1个工程、1个项目)

5 React、Vue框架:当下最火的2个前端框架(Vue:国人喜欢用,React:外国人喜欢用)

6 移动开发(Android+IOS) + Web(Web+微信小程序+支付宝小程序) + 桌面开发(Windows桌面):前端 -> 大前端

7 一套代码在各个平台运行(大前端):谷歌Flutter(Dart语言:和Java很像)可以运行在IOS、Android、PC端

8 在Vue框架的基础性上 uni-app:一套编码 编到10个平台

9 在不久的将来 ,前端框架可能会一统天下

Vue介绍

官网:教程
	https://cn.vuejs.org/
        
vue版本
    -vue3 :一般情况下,新项目都用vue3编写
    -vue2 :公司里很多项目用vue2编写的
    -就在vue3上写vue2的语法,完全支持,但是vue3的语法不一样了
    
    
基础阶段讲vue2,1--2天vue3
    vue2:https://v2.cn.vuejs.org/v2/guide/
    vue3:https://cn.vuejs.org/guide/quick-start.html
        
        
vue 是什么
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
    渐进式:前端项目中可以一部分使用vue,也可以全部项目使用vue
    
    
M-V-VM架构思想
	之前学过mvc,mtv

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,是一种事件驱动编程方式
Model :js中的变量
View : 用户看到的页面
ViewModel:只要js中变量变化了,页面自动跟着变化 ,页面中数据变化了,js变量也跟着变



单页面应用(组件化开发)-single page application,SPA
    -原来写一个个html页面
    -用了vue后,只有一个html页面

vue快速使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>


</head>
<body>
<div id="app">
    <h1>这里面可以写vue的模板语法</h1>

    <p>姓名是:{{name}}</p>
    <p>年龄是:{{age}}</p>
</div>


</body>

<script>

    // div  被 vue托管了---》内部就可以写vue的语法,vue会自动渲染
    // 本质是dom操作,只是不用我们手动操作了
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            age: 19
        }
    })

    console.log(vm.$data.name)
    
    // pereson=Person(data={name:lqz,age:19})
    // __inti__
    // self.data=data
    //self.name=data.get('name')
    // person.name
</script>
</html>

node.js

解释型的语言是需要解释器的
js就是一门解释型语言,只不过js解释器被集成到了浏览器中

所以,在浏览器的Console中输入命令,就和在cmd中输入python后,进入交互式环境一样

nodejs:一门后端语言,运行在操作系统上的语言---》网络处理,文件处理
把chrome的v8引擎(解释器),安装到操作系统之上

vue 项目编译成 纯粹的html,css,js---》需要有node环境

标签:Vue,name,Day01,介绍,js,vue,前端,页面
From: https://www.cnblogs.com/chao0308/p/17722005.html

相关文章

  • Day06 - Vue项目的使用
    解析Vue项目//1为什么浏览器中访问某个地址,会显示某个页面组件 -根组件:App.Vue必须是:<template><divid="app"><router-view></router-view></div></template> -配置路由: //先导入 importy......
  • Day05 - Vue之动态组件、插槽、项目的创建
    动态组件//关键字: component//使用方法:<component:is="who"></component>//component标签的is属性等于组件名字,这里就会显示这个组件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><link......
  • Vue中qs的使用
    1、qs是什么qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。2、qs安装qs,是axios中自带的,也是npm仓库所管理的包。安装方式:npminstallqsVue项目导入:importqsfrom'qs'Vue项目中的main.js中设置全局属性的方式:Vue......
  • 串口通信介绍
    串口通信简介串口通信(SerialCommunications)的概念非常简单,串口按位(bit)发送和接收字节。尽管比按字节(byte)的并行通信慢,但是串口可以在使用一根线发送数据的同时用另一根线接收数据。它很简单并且能够实现远距离通信。比如IEEE488定义并行通行状态时,规定设备线总长不得超过20米,并......
  • VUE中的data(){return}与data:{}区别
    组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染。data:{}data:{msg:0}使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。data(){return}data(){......
  • 041802114金晶的自我介绍~
    我的学号041802114;我是退役大学生士兵金晶,在部队是一名医疗救护员;我的爱好是运动还有看书;推荐紫荆园二楼的漳州鸭面;最近常听的歌我推荐一首lauv的《parisintherain》;想要说些什么呢,那就是“勇敢的人先享受世界”......
  • vue3 父子组件通信 setup
    父传子father<template><div><h2>父传子Father</h2><!--<buttonclass="bg-green-300roundedp-1">父按钮</button>--><divclass="w-[200px]h-[200px]bg-violet-200">......
  • VUE3+vite+arco design 项目初始化
    意见反馈系统总结创建项目首先选择一个文件夹进入命令窗口使用vite创建项目npmcreatevite@latest初始化项目后进入项目安装依赖npminstall运行npmrundev使用arcodesign组件库安装npminstall--save-dev@arco-design/web-vue引入import{createApp}fr......
  • Vue3组件通信方式
    Vue3组件通信方式不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。比如:vue2组件通信方式props:可以实现父子组件、子父组件、甚至兄弟组件通信自定义事件:可以实现子父组件通信全局事件总线$bus:可以实现任意组件通信pubsub:发布订阅模式......
  • vue 解决报错
    目录vue解决报错ERRORError:EBUSY:resourcebusyorlocked,rmdir....errnoarco-init项目初始化失败!Error:spawnSyncpnpm.cmdENOENTvue解决报错ERRORError:EBUSY:resourcebusyorlocked,rmdir....errno最近入门vue,用字节跳动的arco初始化一个项目的时候报错......