模板语法之插值，文本指令，事件指令，属性指令

东湖之滨  论坛元老 | 2022-8-9 14:46:06 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1745|帖子 1745|积分 5239

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
1 前端现状介绍
  1. # 1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
  2. # 2.Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
  3. # 3.单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
  5. # 4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
  7. # 5.React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
  9. # 6.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
  11. # 7.一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
  13. # 8.在Vue框架的基础性上 uni-app：一套编码 编到10个平台
  15. # 9.在不久的将来 ，前端框架可能会一统天下
  18. # GUI--->图形化界面编程
  19.         -Tkinter
  20.     -pyqt---》qt平台，构建用户界面的平台
复制代码
2 vue介绍-mvvm-组件化开发-单页面开发
  1. # vue是一个js框架----》jq
  3. Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的【渐进式】框架
  4. 【渐进式】可以一点一点地使用它，只用一部分，也可以整个工程都使用它
  6. # 关于版本
  7.         2.x   学习
  8.     3.x
  9.    
  10.    
  11. # M-V-VM思想
  12.         -M: model 数据层，js的变量
  13.     -V:view   页面展示，视图层  html+css的页面
  14.     -VM：vue写的介于m和v之间的一层
  15.    
  16.     -双向数据绑定：只要改了M层的数据(js的变量)，view层页面跟着变化
  17.    
  18. # 后端web经典架构
  19.         -mvc
  20.     -mtv
  21. #移动开发端  --》MVP
  24. # 组件化开发、单页面开发
复制代码
3 第一个vue项目
  1. # 一个页面中使用vue，vue的代码引入（跟引入jq一模一样）
  2. # 编辑器的选择
  3.         -vscode
  4.     -webstorm ----》pycharm上开发前端
  5.     -sublime text
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  11.     <p>我的名字是：{{name}}</p>
  12.     <p>我的年龄是：{{age}}</p>
  18. </body>
  20. </html>
复制代码
4 模板语法之插值
  1. // 插值语法---》可以放 字符串，数字，数组，对象，简单的js语法，如果是标签，不会之间渲染
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  11. <p>名字：{{name}}</p>
  12. <p>年龄：{{age}}</p>
  13. <p>数组：{{list1}}</p>---->{{list1[1]}}
  14. <p>对象：{{obj1}}</p>---》{{obj1.name}}--->{{obj1['age']}}
  15. <p>标签：{{link1}}</p>
  17. <p>{{10+99}}</p>
  18. <p>三目运算符：{{score>90?"优秀":"垃圾"}}</p>
  23. </body>
  25. </html>
复制代码
5 文本指令
  1. // 指令----》写在标签上 以  v-开头的  属性 叫vue的指令
  3. -v-text   ：把字符串原封不动显示在标签上
  4. -v-html  ：把标签字符串渲染后，显示在标签里
  5. -v-show ：显示与不显示 ：
  6. -v-if   ：显示与不显示，直接标签的删除
  9. // v-show与 v-if的区别：
  10. v-show：标签还在，只是不显示了（display: none）
  11. v-if：直接操作DOM，删除/插入 标签
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  12.    
  14.    
  15.     <p v-html="link1"></p>
  17.     <img v-show="show" src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" height="100px"
  18.          width="100px">
  19.     <hr>
  20.     <img v-if="show2" src="https://www.cnblogs.com/./img/jj.jpg" alt="" height="100px" width="100px">
  25. </body>
  27. </html>
复制代码
6 事件指令
  1. # 按钮，标签的事件---》单击事件，双击事件----》单击事件(点击)
  2. #正常写法： v-on:click='函数'
  3. #简写成：   @click='函数'   ---》这种多
复制代码
7 属性指令
  1. # 标签有属性----》使用变量动态的替换属性
  2. # v-bind:属性名='属性值'
  3. #简写成  :属性名='属性值'   --->这种多
复制代码
补充
  1. # 接口性能指标
  2.         # qps:Queries Per Second，每秒查询率，一台服务器每秒能够响应的查询次数
  3.      # tps:Transactions Per Second，是每秒处理的事务数，包括一条消息入和一条消息出，加上一次用户数据库访问
  4.      #并发量：
  5.         系统同时处理的请求或事务数，可以直接理解为：系统同时处理的请求数量
  6.         QPS = 并发量 / 平均响应时间
  7.         并发量 = QPS * 平均响应时间
  8.         例如当前系统QPS为1w，每个请求的响应时间都是2s，那么并发量就是2w   
  9.     # PV
  10.     PV（Page View）：页面访问量，即页面浏览量或点击量，用户每次刷新即被计算一次。可以统计服务一天的访问日志得到。
  11.     # UV
  12.     UV（Unique Visitor）：独立访客，统计1天内访问某站点的用户数。可以统计服务一天的访问日志并根据用户的唯一标识去重得到。
  13.     # DAU(日活)
  14.     DAU(Daily Active User)，日活跃用户数量。常用于反映网站、app、网游的运营情况。
  15.     DAU通常统计一日（统计日）之内，登录或使用了某个产品的用户数（去除重复登录的用户），与UV概念相似
  16.     # MAU(月活)
  17.     MAU(Month Active User)：月活跃用户数量，指网站、app等去重后的月活跃用户数量
  18.    
  19.   
  20.    
  21. # 你写的接口，qps应该是多少？
  22.         几百
  24.    
  25.    
  26. # 解释型语言
  27.         -python解释器
  28.     -js 解释型语言----》浏览器中有---》只能运行在浏览器中
  29.     -于是就有大神---》把谷歌浏览的v8引擎(js解释器)，抠出来---》能够运行在操作系统之上+c写了底层库---》node js
  30.    
  31.    
  32.    
  33. # pycharm中装vue插件
  34.         -setting---》plugins---》下载，重启
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
回复

举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

东湖之滨

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表