1 前端现状介绍
# 1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
# 2.Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
# 3.单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
# 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.在不久的将来 ，前端框架可能会一统天下
# GUI--->图形化界面编程
-Tkinter
-pyqt---》qt平台，构建用户界面的平台
2 vue介绍-mvvm-组件化开发-单页面开发
# vue是一个js框架----》jq
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的【渐进式】框架
【渐进式】可以一点一点地使用它，只用一部分，也可以整个工程都使用它
# 关于版本
2.x 学习
3.x
# M-V-VM思想
-M: model 数据层，js的变量
-V:view 页面展示，视图层 html+css的页面
-VM：vue写的介于m和v之间的一层
-双向数据绑定：只要改了M层的数据(js的变量)，view层页面跟着变化
# 后端web经典架构
-mvc
-mtv
#移动开发端 --》MVP
# 组件化开发、单页面开发
3 第一个vue项目
# 一个页面中使用vue，vue的代码引入（跟引入jq一模一样）
# 编辑器的选择
-vscode
-webstorm ----》pycharm上开发前端
-sublime text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>我的名字是：{{name}}</p>
<p>我的年龄是：{{age}}</p>
</div>
</body>
<script>
// vm对象，管理了html中得div，在div中写vue的模板语法，指令
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
age:19
},
})
</script>
</html>
4 模板语法之插值
// 插值语法---》可以放 字符串，数字，数组，对象，简单的js语法，如果是标签，不会之间渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>名字：{{name}}</p>
<p>年龄：{{age}}</p>
<p>数组：{{list1}}</p>---->{{list1[1]}}
<p>对象：{{obj1}}</p>---》{{obj1.name}}--->{{obj1['age']}}
<p>标签：{{link1}}</p>
<p>{{10+99}}</p>
<p>三目运算符：{{score>90?"优秀":"垃圾"}}</p>
</div>
</body>
<script>
// vm对象，管理了html中得div，在div中写vue的模板语法，指令
var vm = new Vue({
el: '#app',
data: {
name: 'lqz', // 字符串
age: 18, // 数值
list1: [1,2,3,4], // 数组
obj1: {name: 'Darker', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
score:99
},
})
</script>
</html>
5 文本指令
// 指令----》写在标签上 以 v-开头的 属性 叫vue的指令
-v-text ：把字符串原封不动显示在标签上
-v-html ：把标签字符串渲染后，显示在标签里
-v-show ：显示与不显示 ：style="display: none;"
-v-if ：显示与不显示，直接标签的删除
// v-show与 v-if的区别：
v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="link1">
</div>
<p v-html="link1"></p>
<img v-show="show" src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" height="100px"
width="100px">
<hr>
<img v-if="show2" src="./img/jj.jpg" alt="" height="100px" width="100px">
</div>
</body>
<script>
// vm对象，管理了html中得div，在div中写vue的模板语法，指令
var vm = new Vue({
el: '#app',
data: {
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
show: true,
show2: true,
},
})
</script>
</html>
6 事件指令
# 按钮，标签的事件---》单击事件，双击事件----》单击事件(点击)
#正常写法： v-on:click='函数'
#简写成： @click='函数' ---》这种多
7 属性指令
# 标签有属性----》使用变量动态的替换属性
# v-bind:属性名='属性值'
#简写成 :属性名='属性值' --->这种多
补充
# 接口性能指标
# qps:Queries Per Second，每秒查询率，一台服务器每秒能够响应的查询次数
# tps:Transactions Per Second，是每秒处理的事务数，包括一条消息入和一条消息出，加上一次用户数据库访问
#并发量：
系统同时处理的请求或事务数，可以直接理解为：系统同时处理的请求数量
QPS = 并发量 / 平均响应时间
并发量 = QPS * 平均响应时间
例如当前系统QPS为1w，每个请求的响应时间都是2s，那么并发量就是2w
# PV
PV（Page View）：页面访问量，即页面浏览量或点击量，用户每次刷新即被计算一次。可以统计服务一天的访问日志得到。
# UV
UV（Unique Visitor）：独立访客，统计1天内访问某站点的用户数。可以统计服务一天的访问日志并根据用户的唯一标识去重得到。
# DAU(日活)
DAU(Daily Active User)，日活跃用户数量。常用于反映网站、app、网游的运营情况。
DAU通常统计一日（统计日）之内，登录或使用了某个产品的用户数（去除重复登录的用户），与UV概念相似
# MAU(月活)
MAU(Month Active User)：月活跃用户数量，指网站、app等去重后的月活跃用户数量
# 你写的接口，qps应该是多少？
几百
# 解释型语言
-python解释器
-js 解释型语言----》浏览器中有---》只能运行在浏览器中
-于是就有大神---》把谷歌浏览的v8引擎(js解释器)，抠出来---》能够运行在操作系统之上+c写了底层库---》node js
# pycharm中装vue插件
-setting---》plugins---》下载，重启
标签：Vue,mvvm,vue,标签,---,指令,页面 来源： https://www.cnblogs.com/blank1210/p/16409792.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。