week10_day05_Vue基础1

最新推荐文章于 2024-02-23 17:02:08 发布

-玫瑰少年-

最新推荐文章于 2024-02-23 17:02:08 发布

阅读量478

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/shihao1998/article/details/106739563

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1Vue
1.1Vue的定义
Vue.js------ 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合(非常容易导入第三方轮子)。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持开发复杂单页应用。

渐进式:从核心到完备的全家桶(需要什么引用什么)
可以用一个，可以用多个，如我们想让前端传一个对象到后台，就可以用Vue中axios这个东西，这种东西就是第三方插件，或者用 Java中的话说叫轮子。
Vue本身语法内容并不多, 生态是很庞大的（如ssm这些都是java中间件，都属于java生态的内容），也就是说除了Vue语法之外，还有很多和Vue相关联的，在它基础之上的，提供各种功能的一些东西。

增量:从少到多,从一页到多页,从简单到复杂
写前端基本上就是一套网站，可能是由多个页面组成。Vue就可以让我们写一页也能供用户浏览，写多页也能供用户浏览，也就是可以不停的往已有的项目中添加东西。

只关注视图层
Vue让你只关注显示相关的。但其实我们需要关注底层的东西。这些是无法替代的东西，老了以后可以靠这些吃饭。

单文件组件: 一个文件描述一个组件
单页应用: 经过打包生成一个单页的html文件和一些js文件

为什么要讲vue? 项目前端都是Vue, 国内前端框架市场基本上70%以上都是使用vue这个框架
或者, 不是用框架写的前端 ( 旧的项目jsp 模板技术 )

框架: 工程化的角度如之前学的DBUtils
所谓框架, 就是在工程化实现一个东西的时候, 构建的大的轮廓, 和提供一些基础性的设施
后来者,或者使用者, 可以在这个框架的基础上, 迅速的把要实现的目标实体快速构建出来

vue基本语法(简单)
简洁,轻量,快速,数据驱动,模块友好,组件化
现在的前端是组件化的天下

1.2Vue课程
分为两部分
1, 先讲vue基本语法
2, 怎么创建项目- 在vue中开发页面-- 打包项目-- 怎么部署
我们平时写的简单的java语句，是从main函数启动的，但你想，淘宝也是从main启动的么？一定不是，main函数启动运行结束之后，程序运行结束。程序挂掉了，还有对象吗？
没了。对象里面有方法，有数据，对象对我们来说是有意义的，所以必须要求对象是存活的。
如何保证对象存活？
把代码整理，打包后，实际上就是对java代码、class文件进行汇总，类似于一个压缩包一样，把这个打包后的文件放到某个地方，让某个东西帮你来运行出对象，让对象保证存活。别人就可以去访问，根据存活的对象去处理一些逻辑。这个过程叫部署。
Java需要这样做，前端其实也需要这样，以保证外部对其能正确的访问。

为了便于理解，我们首先会在html页面把vue基本语法讲清楚, 先借助html页面来实现vue
但这样是有问题的，毕竟html并不是一个专门用来写Vue的东西

Vue的标准写法是在.vue文件中来实现

1.3一个Vue页面用html
在vue官网中，点击学习—>教程---->找到代码：

输入网址：https://cdn.jsdelivr.net/npm/vue@2.6.11

将其中的内容复制到vue.js文件中，以后访问就不用访问这个网址了，直接访问本机中的vue.js文件即可。
或者直接下载生产版本，生产版本较比于开发版本较为稳定。

<!-- 一个div 他的id 是root -->
<!-- 在vue中 {{}}: 叫插值表达式 ,
这个插值表达式之中是一个js式子,
这个式子的对应参数要去对应关联的vue对象中去取 -->
<!--注：尽量不要用class属性，避免出现哪些不必要的bug-->
<div id="root">
    {{msg}}
    {{msg + aaa}}
</div>

<script>
    // new了一个vue对象
    // 这个vue对象通过,对象的el属性, 与el属性所指向的id所对应的html代码关联起来
    // 把对象和对应html域关联起来
    // data标识vue对象的数据存储属性(除了vue对象固有的属性, 别的属性一般存在data里)
    new Vue({
        el: '#root',
        data: {
            msg: 123,
            aaa: 2000
        }
    })
</script>

1.4V指令
V-bind
V-model
V-text
V-html
V-show
V-if
V-else
V-else-if
V-for
V-on
V-pre
V-cloak
v-once

1.5V-bind: 单向绑定
把vue对象中data里的值,绑定到html对应是属性上去, 赋值给对应的属性

1.5.1V-model: 双向绑定
v-model:
实现双向数据绑定
<!–v-model: 双向绑定, 改变或者绑定,是个双向的
1, 和v-bind作用相同, 去对应的vue对象里的data取值, 把取到的值赋值给所绑定的对象
2, v-model绑定的参数, 当这个参数(在html中)发生改变的时候, 他会同时去修改对应vue对象中data里面所对应的值
注意: 双向绑定v-model: 一般用于表单元素的value属性
所以有时候可以省略的写 v-model="***"

1.5.2V-text v-html
类似于dom操作中的 innerText innerHTML

1.5.3V-on: 事件监听
v-on:标识vue语法的事件监听
把监听到的事件, 触发到对应vue对象的methods里面去

vue中没有onclick

注意1: 在vue中, 如果要在方法或者别的钩子函数里, 要访问data里的值,
要通过 this.参数名来访问
这个this 就是指代这个vue对象

1.5.4V-show
隐藏和显示，类似于加了一个css样式

注意2: 在v-show的判断条件里, 可以写表达式
在这里插入图片描述

1.5.5V-if
v-else-if v-else

v-if和v-show的区别: v-if逻辑中,如果不满足加载条件, 那么该元素不会挂载到dom树上去. 但是v-show 无论显示与否, 都会挂载到dom树上,是不过会显示和不显示

08_v-if.html运行后dom树中的内容：
在这里插入图片描述
07_v-show运行后dom树中的内容：第一个div挂在dom树上，只不过显示为dispaly：none

1.5.6V-for
在vu中对应的html代码中创建一个循环结构

注意1: 循环渲染的,到底是什么?
循环渲染的, 是v-for这个指令所在的html元素（在这段代码里表现的就是一个个的div）

注意2: v-for指令必须要和 :key配套出现
并且key值唯一, 不可重复，v-for会根据key做渲染
(aaa, index) in list"
index代之循环遍历的下标

注意3: v-for 这个循环, 可以用 of/in 两种形式来循环

1.5.7V-pre
v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。
在这里插入图片描述

1.5.8v-cloak
讲这个知识点之前先了解一下，哪些网站是用Vue写的？
Bilibili、掘金

延迟显示。
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的标签直到实例准备完毕

1.5.9V-once
只加载一次(只编译一次)

1.5.10回顾
v-bind: 单向绑定, 可以去vue对象的data里面取参数, 绑定到对应的属性上
v-model: 双向绑定 , 可以取值从Vue对象, 并且改变的话也会影响到vue对象中的值
相互关联, 相互影响
v-text: 向标签内部插入一个字符串
v-html: 向标签内部插入一个可以是字符串,也可以是携带html标签的代码段
v-on: 事件监听, 可以缩写成 @ , 监听一个方法触发到vue对象的methods里面
v-show: 隐藏和显示, 一定会挂载到dom树上
v-if 也可以做隐藏和显示(分支结构) 不一定, 满足挂载, 不满足不挂载

v-for: 循环渲染, 循环显示, 数组, for循环出来的是其所在标签
一定要有个 :key=’唯一值’
In/of
v-pre: 阻止预编译
v-cloak: 延迟加载
v-once: 只加载一次

关于v-text:、v-html，它其实相当于DOM操作中的innertext、innerhtml，即把结点中的文字域进行修改，而这段代码，就表示把外面div中的所有数据改成’aaaa’,所以运行后浏览器中显示的就是aaaa。

<div v-text="aaaa">
	<div v-html="bbb">
	</div>
</div>

作业
1, 注册页面, ----dom操作-- vue操作(dom操作不要)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homework1</title>
    <script src="../vue.js"></script>
</head>
<body>

<div id="root">
    <table cellspacing="10">
        <tr>
            <td>注册邮箱:</td>
            <td><input></td>
        </tr>
        <tr>
            <td></td>
            <td>你还可以使用手机号注册</td>
        </tr>
        <tr>
            <td>创建密码:</td>
            <td><input></td>
        </tr>
        <tr>
            <td>真实姓名:</td>
            <td><input></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td>
                <input type="radio" value="1" name="aaa">男
                <input type="radio" value="2" name="aaa">女
            </td>
        </tr>
        <tr>
            <td align="right">生日:</td>
            <td>
                <select>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                </select>年

                <select>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>月

                <select>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                </select>日
            </td>
        </tr>
        <tr>
            <td align="right">我正在:</td>
            <td>
                <select>
                    <option>学习</option>
                    <option>打球</option>
                    <option>跑步</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <!--changeImg方法不传参数就去掉括号-->
                <img id="img1" :src="url"><span @click="changeImg">看不清.换一张?</span>
            </td>
        </tr>
        <tr>
            <td align="right">验证码:</td>
            <td><input id="inputStr" v-model="inputStr"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img id='img2' src="btn_reg.gif" @click="onclick1">
            </td>
        </tr>
    </table>
</div>

<script>
    new Vue({
        el: '#root',
        data: {
            //js有二维数组，但不常用。在前端对数据的操作不要过于复杂
            //得有比较字符串，比较输入的和图片对应的字符串是否相等
            //用两个数组，一个存图片的路径，一个存图片对应的字符串
            listUrl: ['1111.png', '1234.png', '2222.png', '3333.png', '4567.png'],
            listNum: [1111, 1234, 2222, 3333, 4567],

            //记录上一次的图片的下标
            midTag: -1,
            url: './verycode.gif',
            inputStr:''
        },
        methods: {
            //更换图片
            changeImg: function () {
                //判断上一次的tag和这次随机生成的tag是否一致，一致的话就跳出循环
                while (true) {
                    var tag = Math.floor(Math.random() * this.listUrl.length)
                    if (tag != this.midTag) {
                        this.midTag = tag
                        break
                    }
                }

                this.url = this.listUrl[this.midTag]
            },


            onclick1: function () {
                if (this.midTag == -1) {
                    if (this.inputStr == 'bnksu') {
                        alert("验证码正确！")
                    } else {
                        alert("验证码错误！")
                    }
                    return
                }

                var str = this.listNum[this.midTag]
                if (str == this.inputStr) {
                    alert("验证码正确！")
                } else {
                    alert("验证码错误！");
                }
            }

        }
    })


</script>
</body>
</html>

2, 汇率换算------dom操作-- vue操作(dom操作不要)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homework2</title>
    <script src="../vue.js"></script>
    <style>
        select, button {
            height: 30px;
        }

        input {
            height: 20px;
        }

        .div1 {
            margin-bottom: 5px;
        }

        td {
            width: 200px;
            height: 30px;
            text-align: center;
        }

        /*属性选择器*/
        [colspan] {
            background: red;
        }

        .div2 {
            width: 600px;
            margin: 0 auto;
        }

        .div3 {
            width: 700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="div2">
        <div class="div1">
            <select id="select1" @change="click1" v-model="select1Value">
                <option value="1">美元</option>
                <option value="2">人民币</option>
                <option value="3">欧元</option>
                <option value="4">日元</option>
                <option value="5">韩元</option>
                <option value="6">港元</option>
            </select>

            <button @click="change1">互换</button>

            <select id="select2" @change="click1" v-model="select2Value">
                <option value="1">美元</option>
                <option value="2">人民币</option>
                <option value="3">欧元</option>
                <option value="4">日元</option>
                <option value="5">韩元</option>
                <option value="6">港元</option>
            </select>

            数额:
            <input id="inputStr" v-model="inputStr">

            <button @click="click1">按汇率换算</button>
        </div>
    </div>

    <div class="div3">
        <table border="1px">
            <tr>
                <td colspan="3">按当前汇率兑换结果</td>
            </tr>
            <tr>
                <td id="td11">{{td11}}</td>
                <td>汇率</td>
                <td id="td13">{{td13}}</td>
            </tr>
            <tr>
                <td id="td21">{{td21}}</td>
                <td id="td22">{{td22}}</td>
                <td id="td23">{{td23}}</td>
            </tr>
        </table>
    </div>
</div>

<script>
    new Vue({
        el: '#root',
        data: {
            listMoney: ['美元', '人民币', '欧元', '日元', '韩元', '港元'],
            ListRate: [1, 7, 0.9, 100, 1000, 8],
            select1Value: 1,
            select2Value: 2,
            inputStr: '',
            td11: '美元',
            td13: '人民币',
            td21: '',
            td22: '',
            td23: ''
        },
        methods: {
            change1: function () {
                var mid = this.select1Value
                this.select1Value = this.select2Value
                this.select2Value = mid
            },

            click1: function () {
                if (isNaN(this.inputStr)) {
                    alert("请输入数字！")
                    return
                }

                //求利率和兑换金额
                var rate = this.ListRate[this.select2Value - 1] / this.ListRate[this.select1Value - 1]
                console.log(rate)

                var money = this.inputStr * rate
                console.log(money)

                //更新表中数据
                this.td11 = this.listMoney[this.select1Value - 1]
                this.td13 = this.listMoney[this.select2Value - 1]
                //如果输入的是空串，数值这一行置为空
                if (this.inputStr == '') {
                    this.td21 = null
                    this.td22 = null
                    this.td23 = null
                } else {
                    //否则的话则表示是点击按汇率计算的button触发的本事件
                    this.td21 = this.inputStr
                    this.td22 = rate
                    this.td23 = money
                }
            }
        }
    })
</script>

<!--这样做的好处是解耦
html和css代码写好，就不需要关注他了， 只需关注Vue对象里有什么操作-->
</body>
</html>