其他分享
首页 > 其他分享> > Vue介绍-mvvm-组件化开发-单页面开发、模板语法之插值、文本指令、事件指令、属性指令

Vue介绍-mvvm-组件化开发-单页面开发、模板语法之插值、文本指令、事件指令、属性指令

作者:互联网

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