测开之Vue・《Vue高级特性》

Posted 2021-11-21 七月的小尾巴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了测开之Vue・《Vue高级特性》相关的知识，希望对你有一定的参考价值。

Vue基础语法及高级特性

- Vue基本语法

Vue基本语法

初始Vue

Vue 是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

安装vue

方式一，直接在 <head>标签中引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

方式二：npm安装

在用Vue构建大型应用时，推荐使用NPM安装

npm install vue

Vue的指令和插值

{{value}} : 插值表达式
v-text：填充纯文本内容
v-html：填充html
v-pre：填充原始数据

下面我们来通过这些插值表达式，编写一段html的基础代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!--方式1:通过插值表达式{{}}-->
        <h3>姓名:{{name}}</h3>
        <!--方式2: 通过v-text指令-->
        <h3 v-text="info"></h3>
        <!--方式3，通过v-html-->
        <h3 v-html="info"></h3>

        <!-- 方式4: v-pre-->
        <!-- 当我们只想要展示{{name}}，但是如果直接输入，数据会被解析直接展示了name对应的属性值，这个时候我们使用v-pre-->
        <div v-pre>{{name}}</div>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            // 根据vue实例绑定的根节点
            el: '#app',
            data:{
                name: "余少琪",
                age: 18,
                info: "<h1>info</h1>"
            }
        })
    </script>

</body>
</html>

属性绑定

属性绑定：使用v-bind:属性也可以简写为 :属性

<a v-bind:href="dynamicId"></a>
简写：<a :href="dynamicId"></a>

下面编写一个简单的页面

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='vue.js'></script>
</head>
<body>
    <div id="app">
<!--          通过v-bind属性，指定跳转地址 ，可简写:    -->
        <a v-bind:href="url1.url">{{url.title}}</a>
<!--           下面是简写方式，与上方效果一致     -->
        <a :href="">{{ur2.title}}</a>

<!--        <a :href="url3[0]">{{url3[1}}</a>-->
        <a :href="">111</a>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data:{
                url1:{
                    url: "http:www.baidu.com",
                    title: "百度1"
                },
                url2: {
                    url: "http:www.baidu.com",
                    title: "百度2"
                },
                url3:{
                    url: "http:www.baidu.com",
                    title: "百度3"
                }
            }
        })
    </script>
</body>
</html>

事件绑定

v-on: 为元素绑定了一个时间，绑定点击事件

v-on:click:"指定执行的方法"
v-on:可以简写为@：@click

如果事件直接绑定函数的名称，默认会把时间对象作为函数的第一个参数传递

sub:function(event){
    console.log(event.target)
    this.number--    
    }

如果时间绑定函数，传递调用，时间可以通过$event来传递（最后一个参数）

add:function(p,event){
    console.log(event)
    console.log(p)
   	this.number++
   	}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='vue.js'></script>
</head>
<body>
    <div id="app">
        <h3>{{n1}}</h3>
        <h3>{{n2}}</h3>
        <!--  v-on：给元素定义点击事件，可简写@click方法      -->
        <button type="button" v-on:click="add">+</button>
        <button type="button" @click="sub()">-</button>
        <h3>结果：{{res}}</h3>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data:{
                n1: 11,
                n2: 22,
                res: null
            },
            // methond中用来定义vue实例中的方法
            methods:{
                // 把 data中的n1 和 n2中的数据相加
                add(){
                    this.res = this.n1 + this.n2
                },

                sub(){
                    this.res = this.n1 - this.n2
                }
            }
        })
    </script>

</body>
</html>

vue的双向数据绑定

v-model:页面修改数据会变，数据改变，页面也会改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='vue.js'></script>
</head>
<body>
    <div id="app">
        <!--
        数据双向绑定：v-model
        表单修饰符：
        number：会自动把输入的内容转换成字符
        trim: 自动去除首尾空格
        lazy:等到内容输入完毕之后在触发change事件（获取数据）
         -->
        <input type="text" v-model.trim.="user"><br>
        <input type="text" v-model.number, v-model.trim="n1"><br>
        <input type="text" v-model.number='n2'><br>
        <!--  v-on：给元素定义点击事件，可简写@click方法      -->
        <button type="button" v-on:click="add">+</button>
        <button type="button" @click="sub()">-</button>
        <h3>结果：{{res}}</h3>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data:{
                n1: 11,
                n2: 22,
                user: yushaoqi,
                res: null
            },
            // methond中用来定义vue实例中的方法
            methods:{
                // 把 data中的n1 和 n2中的数据相加
                add(){
                    this.res = this.n1 + this.n2
                },

                sub(){
                    this.res = this.n1 - this.n2
                }
            }})
    </script>

</body>
</html>

分支语句

v-if：判断条件成立时显示
v-else: 条件不成立时显示
v-show:控制元素是否显示到页面（本质就是display属性的控制）

下面是实现案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='vue.js'></script>
</head>
<body>
    <div id="app">
        <!-- 根据条件来渲染显示页面的元素-->
        <!-- 判断当返回结果为success为成功的话，显示绿色-->
        <h1 v-if="testcase.result == 'success'" style="color: #00AA00;">{{testcase}}</h1>
        <h1 v-else-if="testcase.result == 'error'" style="color: brown">{{testcase}}</h1>
        <h1 v-else-if="testcase.result == 'fail'" style="color: yellow">{{testcase}}</h1>
        <h1 v-else="">数据状态有误</h1>
        <!--  当值为ture时，元素会显示，fasle时会隐藏      -->
        <h1 v-show="status">python</h1>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data:{
                testcase:{
                    id: 1,
                    title: "用例001",
                    result: "error"
                },
                status: false
            }
        })
    </script>

</body>
</html>

遍历语句

v-for：遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='vue.js'></script>
</head>
<body>
       <div id="app">
        <table border="" cellpadding="" cellspacing="">
            <tr>
                <th>ID</th>
                <th>用例名称</th>
                <th>测试人员</th>
                <th>项目ID</th>
                <th>项目名称</th>
                <th>描述</th>
                <th>创建时间</th>
                <th>测试用例</th>


            </tr>
            <tr v-for="item in lists">
                <td v-for="value, key in item">{{value}}</td>
<!--                <td>{{item.id}}</td>-->
<!--                <td>{{item.name}}</td>-->
<!--                <td>{{item.taster}}</td>-->
<!--                <td>{{item.project_id}}</td>-->
<!--                <td>{{item.project}}</td>-->
<!--                <td>{{item.desc}}</td>-->
<!--                <td>{{item.creat_time}}</td>-->
<!--                <td>{{item.testcase}}</td>-->
            </tr>
        </table>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data:{
                   lists: [{
                        id: 1,
                        name: "用例001",
                        taster: "可悠",
                        project_id: 1,
                        project: "aaa",
                        desc: "登录接口",
                        creat_time: "2019-08-27 00:00:00",
                        testcase: 9
                   },
                       {
                        id: 2,
                        name: "用例002",
                        taster: "可悠",
                        project_id: 1,
                        project: "AAA",
                        desc: "登录接口",
                        creat_time: "2019-08-27 00:00:00",
                        testcase: 9
                   },
                       {
                        id: 3,
                        name: "用例003",
                        taster: "可悠",
                        project_id: 1,
                        project: "婚BB",
                        desc: "登录接口",
                        creat_time: "2019-08-27 00:00:00",
                        testcase: 9
                   测开之・《使用vue-cli（vue脚手架）快速搭建项目》
 测开之数据类型进阶篇・第三篇《推导式》
 测开之函数进阶篇・第七篇《装饰器》
 测开之Javascript・《Javascript基础》
 测开之・《前后端交互axios》
 测开之函数进阶篇・第六篇《闭包》