首页 > 其他分享 >vue-day01

vue-day01

时间:2023-09-14 15:48:45浏览次数:34  
标签:vue name day01 js data 前端 页面

前端介绍

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 在不久的将来 ,前端框架可能会一统天下

官网

https://cn.vuejs.org/

 vue版本

vue3 :一般情况下,新项目都用vue3编写
vue2 :公司里很多项目用vue2编写的
就在vue3上写vue2的语法,完全支持,但是vue3的语法不一样了

 vue 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
渐进式:前端项目中可以一部分使用vue,也可以全部项目使用vue

M-V-VM架构思想

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

单页面应用(组件化开发)-single page application,SPA

原来写一个个html页面
用了vue后,只有一个html页面

vue快速使用

vue 项目,选择编辑器

vscode:免费
webstorm:jetbrains全家桶公司出品:pycharm,idea,goland。。。。
        收费的,破解方案跟pycharm一样
        单个  全家桶
        本质跟pycharm是一个东西,我们就不下载webstorm了,直接在pycharm中配置一下,安装一个插件,就支持写vue了

html

<!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>

补充:nodejs

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

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

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

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

 

标签:vue,name,day01,js,data,前端,页面
From: https://www.cnblogs.com/shanghaipudong/p/17702662.html

相关文章

  • vue3项目 基于vuedraggable插件实现拖拽上下移动
    //父页面<template><divclass="main_body"><blockTitletitle="事件详情"/><a-formref="formRef":model="formValue"style="width:100%"class="form_bo......
  • 从零开始使用vue2+element搭建后台管理系统(实现按钮权限控制)
    思路:登录后请求用户信息接口,后端返回用户信息中包括权限数组,数据格式belike: 前端对用户信息进行存储(对没错又是假接口)://获取用户信息asyncgetUserInfo(mobile){try{this.loading=true;constres=awaitgetInfo(mobile);......
  • vue特性
    1.组件的模块化开发1.1组件注册局部首先在创建一个vue页面作为组件,这里就以分页组件来演示:<!--分页展示--><el-paginationbackgroundstyle="margin:50pxauto"@size-change="handleSizeChange"@current-c......
  • app直播源码,Vue 禁止输入框输入空格
    app直播源码,Vue禁止输入框输入空格 <template> <div>  <input   type="text"   v-model="text"   @input="(e)=>text=e.target.value.replace(/\s/g,'')"  > </div></template><scri......
  • 万字长文带你全面掌握Vue3
    在2020年9月19日,vue更新了3.0的正式版,不知不觉,已经过去了好几个月了,作为一位前端切图仔,是时候开始学习了,每次抱着准备学、再等等、明天说的想法,成功在发布了两个多月的时候来认真学习了一波,这里来总结一下vue3到底有哪些更新,来帮各位没有时间去了解vue3的朋友来一次快速入门。如何......
  • vue-unsaved-changes-dialog 在桌面页面上,弹出窗会跟随鼠标显示
    简介及使用教程这是一个漂亮的未保存变更对话框,有以下特点:有保存、丢弃和取消三个按钮在桌面页面上,弹出窗会跟随鼠标显示显示隐藏动画流畅智能避免弹出在窗口边缘并且随窗口大小调整自动适应完全自适应:在移动设备上全屏显示键盘可导航可访问所有的文案都可以替换更......
  • vue项目打包编译后如何修改后台请求地址
    1、在public文件夹下新建config.js文件2、config.js文件中,编写配置地址代码 3、在index中引入js文件 4、使用config.js中的变量,vue页面,js页面都可以用window.setURL.publicBaseUrl ......
  • vue的model选项
    vue中的v-model指令实现了表单的双向绑定,官网例子:<inputtype="text"v-model="message"/><p>{{message}}</p>其实v-model只是语法糖,真正的实现形式:<inputtype="text":value="message"@input="message=$event.target.value&......
  • Vue二维码组件
    1.前言该组件依赖qrcode.js与element-ui支持二维码大小配置,点击大图预览该组件以vue文件形式进行封装,需要配置httpVueLoader插件进行引入,其他格式请自行更改源码2.使用方法引入依赖<linkhref="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index......
  • vue2实现pc端自适应分辨率
    思路:使用lib-flexible结合postcss-pxtorem实现第一步在项目utils下建立flexible.js文件(直接下载则不用新建该文件)第二部复制以下代码到刚建好的文件中或者直接yarninstalllib-flexible-pc-y//基于libflexible用来适配pc端(function(win,lib){ vardoc=win.docu......