前端的发展史

  1. # 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
  2. 	javascript=ECMAScript(5,6,13) + Dom + Bom
  4. # 2 Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
  5. 	-异步JavaScript和XML
  7. # 3 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
  9. # 4 Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
  11. # 5 React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
  13. # 6 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
  15. # 7 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
  17. # 8 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
  19. # 9 在不久的将来 ，前端框架可能会一统天下

Vue介绍和基本使用

  1. # Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式js框架
  2. 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
  3. Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
  5. # M-V-VM思想:MVVM 是Model(数据)-View（视图）-ViewModel（vm） 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式
  6. 	-model:前端的数据，在js中
  7.     -view：我们看到的，css，html
  8.     -vm：负责，只要js数据变了，view页面就发生变化，只要页面发生变化，js变量就跟着变
  9. # MTV，MVC，MVP，MVVM
  11. # 组件化开发、单页面开发（单页面应用：spa）
  13. # 版本
  14. 	-最新：vue4，没有公司在用
  15.     -公司主流：新项目基本会用Vue3，老项目继续用vue2

Vue之第一个helloworld

  1. # 编辑器的选择
  2. 	-python---》Pycharm
  3.     -前端：
  4.     	webstorm:(jetbrains公司的，使用习惯跟Pycharm基本一致)
  5.         vscode：免费
  6.         Sublime Text
  7.         vim
  9.  # 下载
  10. https://cdn.jsdelivr.net/npm/vue/dist/vue.js
  12. # vue2:文档地址  https://v2.cn.vuejs.org/v2/guide/
  13. # vue3:文档地址  https://cn.vuejs.org/guide/introduction.html
  15. # 响应视的
  16. 数据数据(js)和 DOM （页面）已经被建立了关联，所有东西都是响应式的
  18. #补充： 解释型的语言是需要解释器的
  19. js就是一门解释型语言，只不过js解释器被集成到了浏览器中
  21. 所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样
  23. # nodejs：一门后端语言
  24. 把chrome的v8引擎（解释器），安装到操作系统之上
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     {{s}}
  11.     <h1>{{name}}</h1>
  12. </div>
  13. </body>
  14. <script>
  15.     var vm = new Vue({
  16.         el:'#app',
  17.         data:{
  18.             s:'hello world',
  19.             name:'哈哈哈',
  20.         }
  21.     })
  22. </script>
  23. </html>

插值语法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <p>字符串:{{name}}</p>
  11.   <p>数字:{{age}}</p>
  12.   <p>数组:{{hobby}}-----{{hobby[1]}}</p>
  13.   <p>对象:{{wife}}------{{wife['name']}}---------{{wife.age}}</p>
  14.   <p>标签形式字符串:{{a}}--->说明不存在xss攻击</p>
  15.   <p>-----插值语法，还可以放，简单表达式和函数(后面了)-----</p>
  16.   <p>简单表达式:{{1+1}}</p>
  17.   <p>三目运算符【条件？符合条件执行这个:不符合条件】:{{10>2?'正确':'不正确'}}</p>
  18. </div>
  19. </body>
  20. <script>
  21.   var vm = new Vue({
  22.     el:'#app',
  23.     data:{
  24.       name:'xxx',
  25.       age:19,
  26.       hobby:['篮球','足球','spa'],  // js 就叫数组
  27.       wife:{name:'qqq',age:20},  // js 就叫对象
  28.       a:'<a href="http://www.baidu.com">点我看好看的</a>'  // 标签形式字符串
  29.     }
  30.   })
  31. </script>
  32. </html>

文本指令

  1. # pycharm需要安装插件，才能有提示----->settings---->Plugins----->Vue
  3. # 指令系统:写在标签上，v-开头的标签，称之为指令，每个指令都有特殊用途
  4. 	v-指令名='写原来插值能写的东西'
  5.     v-指令名='name'  # 变量
  7. # v-text：把变量渲染在标签内部
  8. # v-html：把标签类型的字符串直接渲染成标签
  9. # v-if：控制标签显示与否，直接删除或者加入标签
  10. # v-show：控制标签显示与否，通过样式的display: none;控制显示与否
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <span v-text="a"></span>
  11.     <hr>
  12.     <span>{{a}}</span>
  13.     <hr>
  14.     <span v-html="a"></span>
  15.     <hr>
  16.     <h2>v-if的使用,只能写条件，或布尔类型的变量</h2>
  17.     <div v-if="is_show">
  18.       我是一个div---v-if的使用
  19.     </div>
  20.     <hr>
  21.     <h2>v-show的使用</h2>
  22.     <div v-show="is_show">
  23.       我是一个div---v-show的使用
  24.     </div>
  25. </div>
  26. </body>
  27. <script>
  28.     var vm = new Vue({
  29.       el:'#app',
  30.       data:{
  31.         a:'<a href="http://www.baidu.com">点我看好看的</a>',
  32.         is_show:true,
  33.       }
  34.     })
  35. </script>
  36. </html>

事件指令

  1. # 用的最多的就是点击事件，给某个标签绑定一个点击事件，当点击一下，就执行某个函数
  3. # 使用方式
  4. v-on:事件名='函数名'
  5. # 重点:v-on:事件='函数名'
  6. 可以简写成:
  7. @事件='函数名'
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <img :src="isActive?'img/1.png':'img/2.png'" alt="" v-if="is_show">
  11.     <br>
  12.     <br>
  13.     <div>
  14.         <button @click="hidden">点我隐藏</button>
  15.         <button v-on:click="change">点我切换</button>
  16.     </div>
  17.     <br>
  18.     <br>
  19.     <button v-on:click="handleClick">点我看好看的</button>
  20. </div>
  21. </body>
  22. <script>
  23.     var vm = new Vue({
  24.         el:'#app',
  25.         data:{
  26.             is_show: true,
  27.             img:'img/1.png',
  28.             isActive:true,
  29.         },// data配置项中，放数据，变量
  30.         methods:{
  31.             // 用的少
  32.             // 'handleClick':function(){
  33.             //      alert('你个2杯')
  34.             // },
  36.             // 以后都用这种
  37.             handleClick(){
  38.                 alert('你个2杯')
  39.             },
  40.             hidden(){
  41.                 this.is_show = !this.is_show
  42.             },
  43.             change(){
  44.                 this.isActive = !this.isActive
  45.             },
  46.         }
  47.     })
  49.     // es6的对象简写成
  50.     // var d = {'name':'xxx','age':19}
  51.     // 简写成
  52.     // var d = {name: 'xxx',age: 19}
  53.     // 简写成
  54.     // var name = 'xxx'
  55.     // var age = 19
  56.     // var f = function(){
  57.     //     alert('2杯')
  58.     // }
  59.     // 简写成 这个
  60.     // var d = {name:name,age:age,f}
  61.     // 最终简写成 等同于{name: name, age: age,f:function (){}}
  62.     // var d = {name,age,f(){}}
  63.     // console.log(d)
  64. </script>
  65. </html>

Vue——前端发展史、Vue介绍和使用、插值语法、文本指令、事件指令的更多相关文章

  1. 【Vue前端】Vue前端注册业务实现！！！【代码】

    用户注册前端逻辑 1. Vue绑定注册界面准备 1.导入Vue.js库和ajax请求的库 <script type="text/javascript" src="{ ...

  2. vue 前端框架 目录

    vue 前端框架 目录   vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...

  3. [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  4. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  5. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  6. Vue.js教程 1.前端框架学习介绍

    Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...

  7. vue前端实现将页面显示内容生成pdf文件的几种方法，html2canvas、dom-to-image、jspdf（带分页）基本使用以及介绍

    实际开发需求:vue项目中,根据数据结构生成echarts图表组件,生成带有样式的图表以后,点击下载按钮,把图表以pdf格式的文件下载到本地 实现思路:将vue界面的echarts组件生成图片,然后使 ...

  8. 前端框架VUE

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  9. Vue前端框架基础+Element的使用

    前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...

  10. 0基础菜鸟学前端之Vue.js

    简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解.下面总结一下这段时间的学习心得. 文章结构 前端基础 Vue.js简介 Vue.js常用指令 Vue.js组件 Vue.js ...

随机推荐

  1. JQ-DOM与元素的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Mysql 局域网远程连接设置——Windows

    工作中,遇到mysql数据库存储于我的电脑上,而其他电脑需要共同进行读写数据(类似redis并发),所以我的电脑就必须开启mysql远程连接. 一. 授权 1. 连接数据库 mysql -uroot ...

  3. vivo 手机云服务建设之路-平台产品系列04

    作者:vivo 互联网平台产品研发团队 - He Zhichuang.Han Lei 手机云服务目前作为每家手机厂商必备的一项基础服务,其服务能力和服务质量对用户来说可以说是非常重要.用户将自己大量的 ...

  4. 前端ffmpeg实现视频剪切

    利用ffmpeg实现纯前端视频剪切 注意:在新版本Chrome浏览器中由于安全性问题,只能在https或localhost当中才能正常使用 1. 下载ffmpeg npm install @ffmpe ...

  5. 【论文翻译】LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

    LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS 论文地址:https://arxiv.org/pdf/2106.09685.pdf 代码地址:ht ...

  6. IO流中「线程」模型总结

    目录 一.基础简介 二.同步阻塞 1.模型图解 2.参考案例 三.同步非阻塞 1.模型图解 2.参考案例 四.异步非阻塞 1.模型图解 2.参考案例 五.Reactor模型 1.模型图解 1.1 Re ...

  7. day3 函数的定义和调用，练习编写简单的程序（记录3）

    0331.h #ifndef _0331_H #define _0331_H /************************************************************ ...

  8. python程序，实现以管理员方式运行程序，也就是提升程序权限

    quest UAC elevation from within a Python script? 我希望我的Python脚本能够在Vista上复制文件. 当我从普通的cmd.exe窗口运行它时,不会生 ...

  9. 详解C++中的extern与static关键字

    本章通过问答方式明晰两个关键字及其作用. Q1:对于int x:,不加extern关键字他就是个未赋初值的定义,但是如果加了static或者extern都可以表示这仅是一个声明吗? A:不是的,具体情 ...

  10. Solidity 入门

    基本语法 版本指令 所有Solidity源码都必须指明版本,用于标明Solidity编译器的版本,这是为了避免将来新的编译器破坏代码 pragma solidity ^0.4.20; // 声明版本 ...