Vue 01——基础

Vue介绍

# vue是一个js框架----》jq

是一套用于构建用户界面的【渐进式】框架
【渐进式】可以一点一点地使用它，只用一部分，也可以整个工程都使用它

# 关于版本
    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

# 组件化开发、单页面开发

第一个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>

模板语法之插值

// 插值语法---》可以放 字符串，数字，数组，对象，简单的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>

文本指令

// 指令----写在标签上	以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>

事件指令

# 按钮，标签的事件---如单击事件，双击事件----
	正常写法： v-on:click='函数'
	简写成：   @click='函数'

属性指令

# 标签有属性----可以使用变量动态的替换属性
	v-bind:属性名='属性值'
	简写成  :属性名='属性值'

实例：变身成为光

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>

    <script src="js/vue.js"></script>

</head>
<body>
    <div id="app" class="text-center">
        <h2>成为光 守护地球</h2>
        <img :src="url" alt="" :width="width1" :height="height1">
        <br>
        <hr>
        <p><button v-on:click="func1" v-show="show1" class="btn btn-danger btn-lg">选择你的身份</button></p>
        <p><button @click="func2" v-show="show1" v-text="text1" class="btn btn-success btn-lg"></button></p>
        <h2 v-show="show2">恭喜你！！变身成功！！</h2>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'img/迪迦奥特曼.jpg',
            width1: '373px',
            height1: '275px',
            show1: true,
            show2: false,
            text1: '我就要变成他！！！'
        },
        methods: {
            func1(){
                var url2= 'img/盖亚奥特曼.jpg'
                var url3= 'img/戴拿奥特曼.jpg'
                var url= 'img/迪迦奥特曼.jpg'
                var url4= 'img/阿古茹奥特曼.jpg'
                var url5= 'img/希卡利奥特曼.jpg'
                var url6= 'img/皮克特奥特曼.jpg'
                var url7= 'img/博伊奥特曼.jpg'
                var url_array = [url,url2, url3, url4, url5,url6, url7]
                var url_index = Math.floor((Math.random()*url_array.length))
                this.url=url_array[url_index]
            },
            func2(){
                this.show2=true
                this.show1=false
                this.width1='746px'
                this.height1='550px'
            }
        }
    })
</script>
</html>

补充

# 接口性能指标
	# 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应该是多少？
	几百