appium控制元件定位

阿新 • • 發佈：2020-09-06

vue初識

定義：Vue.js是一套構建使用者介面的框架，只關注檢視層

Vue.js是前端的主流框架之一，和Angular2+、React.js一起，併成為前端三大主流框架！

優點：

1、使用框架，能夠提高開發的效率

2、提高程式碼的維護性，提高效率

3、讓使用者不再操作DOM元素，解放了使用者的雙手，讓程式設計師可以更多的時間去關注業務邏輯

框架與庫的區別：

框架：是一套完整的解決方案；對專案的侵入性較大，專案如果需要更換框架，則需要重新架構整個專案。

庫：提供某一個小功能，對專案的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。

MVC與MVVM的區別

MVC是後端的分層開發概念;

MVVM是前端檢視層的概念，主要關注於檢視層分離，也就是說：MVVM把前端的檢視層，分為了三部分Model、View、VMViewModel;

Vue.js 的程式碼結構

1、引入vue.js

2、寫檢視層，我們要展示的內容（body裡的html程式碼）

3、例項化Vue（） var vm = new Vue （{}）

　　data：存放資料

　　el: 控制的是那塊檢視

　　methods：放置響應方法

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8 
">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表示式的概念 代表引用變數-->
        {{title}}
     
</div>
    <div>描述</div>
    <div>{{intro}}</div>
</body>
<script>
    //建立vue的例項
    var vm = new Vue({
        //指定vue控制介面區域 ，只寫id 唯一
        el : "#app",
        //介面的資料
        //之後我們在操作的時候更多的是操作資料，去影響介面宣染
        //
        data:{
            title:"hello vue",
            intro:"這是vue的介紹"
        }
    })
</script>
</html>

插值表示式、v-cloak、v-text、v-html

插值表示式 {{}} 可以在內容前後插入一些內容

v-cloak ：當js執行完之後顯示頁面。

v-text：會替換掉元素裡的內容

v-html：可以渲染html介面（識別html標籤）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 屬性選擇器 */
        /* 使js載入完成之後在顯示頁面 */
        [v-cloak] {
            display: none;
        }
    </style>

</head>

<body>
    <div id="app">
       <h3 v-cloak>{{title}}</h3>
        <!-- v-text覆蓋原本的內容 -->
        <div v-text="intro">本來的內容</div>
        <!-- 插值內容前後 -->
        <div>{{intro}}本來的內容</div>
        <div v-html="richText"></div>
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //建立vue的例項
    
    var vm = new Vue({
        el: "#app",
        data: {
            title: "常用指令",
            intro: "v-text",
            richText:"<div>本來的內容</div>"
        }
    })
    //插值表示式{{}}，可以在前後插入一些內容
        // v - text：會替換掉元素裡的內容
        // v - html：可以渲染html介面
</script>

v-bind介面元素屬性值的繫結

1.括號裡不加引號的都是我們data裡的資料讀取
2.如果想使用字串需要加上引號
3.裡面可以寫表示式
4.裡面也可以呼叫定義好的方法，拿到的是方法的返回值

使用：

<body>
    <div id="app">
        <div v-bind:name="divName">標題</div>
        <input v-bind:type="inputType" value="點選">
    </div>
    <script>
        /* v - bind
        介面元素屬性值的繫結
        1.括號裡不加引號的都是我們data裡的資料讀取
        2.如果想使用字串需要加上引號
        3.裡面可以寫表示式
        4.裡面也可以呼叫定義好的方法，拿到的是方法的返回值 */
        var vm = new Vue({
            el: "#app",
            data: {
                divName: "title",
                inputType: "button"
            }
        })
    </script>

v-on 進行事件的繫結，我們用的最多的是click事件繫結簡寫@事件

<body>
    <div id="app">
        <h3>{{title}}</h3>
 
        <!-- v-on：事件型別 = “函式名” -->
        <button v-on:click="changeTitle1">修改</button>
        <button @click="changeTitle">修改2</button>
        <button @dblclick="dbl">雙擊</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            title: "天亮教育"
        },
        methods: {
            changeTitle() {
                console.log("點選");
                console.log(this.title);//天亮教育
                // console.log(title1);//實參
            },
            changeTitle1() {
                console.log("修改");
            },
            dbl() {
                console.log("雙擊了")
            }
        }
    })
</script>

事件修飾符：

.stop阻止冒泡
.prevent阻止預設事件
.capture新增事件偵聽器時使用事件捕獲模式
.self只當事件在該元素本身（比如不是子元素）觸發時觸發回撥
.once事件只觸發一次

//阻止事件冒泡
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box1 {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div id="app">
        <div class="box" @click="clickBox">
            <div class="box1" @click.stop="clickInner"></div>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
 
        },
        methods: {
            clickBox() {
                console.log("點選了外盒子");
            },
            clickInner(){
                console.log("點選的內盒子");
            }
        }
    })
</script>
//阻止預設事件
<body>
    <div id="app">
        <a href="#" @click.prevent ="aclick">跳轉</a>
    </div>
     
</body>
 <script>
     var vm = new Vue({
         el:"#app",
         data:{
 
         },
         methods:{
             aclick(){
                 console("跳轉")
             }
         }
     })
 </script>
//捕獲模式
 <body>
        <div id="app">
            <div class="box" @click.capture="clickBox">
                <div class="box1" @click.capture="clickInner">
                    <div class="box2" @click = "clickInner2"></div>
                </div>
            </div>
        </div>
    <!-- 捕獲從外向裡 -->
</body>
<script>
        const vm = new Vue({
                el: "#app",
                data: {
 
                },
                methods: {
                    clickBox() {
                        console.log("點選了外盒子");
                    },
                    clickInner() {
                        console.log("點選的內盒子");
                    },
                    clickInner2() {
                        console.log("點選了最內的盒子");
                    }
                }
           
 
//只當事件在該元素本身（比如不是子元素）觸發時觸發回撥
 
<body>
    <div id="app">
        <div class="box" @click.self="clickBox">
            <div class="box1" @click.self="clickInner">
                <div class="box2" @click.self="clickInner2($event)"></div>
            </div>
        </div>
    </div>
    <!-- 捕獲從外向裡 -->
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
 
        },
        methods: {
            clickBox() {
                console.log("點選了外盒子");
            },
            clickInner() {
                // console.log(e.target)
                console.log("點選的內盒子");
            },
            clickInner2(e) {
                console.log(e.target)
                console.log("點選了最內的盒子");
            }
        }
    })
</script>
//事件只觸發一次
<body>
    <div id="app">
        <button @click.once="boxclick">點選</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{},
        methods: {
            boxclick(){
                console.log("點選");
            }
        }
    })

v-model資料雙向繫結

作用：資料雙向繫結

注意：繫結的是表單控制元件

<body>
    <div id="app">
        <!-- 作用：資料雙向繫結
        注意：繫結的是表單控制元件 -->
        <input type="text" v-model="num1">
        <button @click = "btn">點選</button>
    </div>
</body>
<script>
    var vm = new Vue ({
        el:"#app",
        data:{
            num1:1
        },
        methods:{
            btn(){
                console.log(this.num1)
            }
        }
    })
</script>

V-for

1.便利陣列，引數(item,index) in list
2.便利物件，引數(value,key,index) in list
3.便利數字，num in10 (1~10)

<body>
    <div id="app">
        {{title}}
        <ul>
            <!-- i為索引 item為內容 -->
            <input type="text" v-model="item1">
            <button @click="search">檢索</button>
            <li v-for="(item,i) in list" @click="show(item.name)" >id：{{item.id}}   ----值：{{item.name}}</li>
             
        </ul>
        <ul>
            <li v-for="(item,i) in list1">id：{{item.id}} ----值：{{item.name}} </li>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            title: "hello",
            obj: {
                age: 10
            },
            list: [{
                id: 1,
                name: "李白"
            },
            {
                id: 2,
                name: "杜甫"
            },
                {
                id: 3,
                name: "孟浩然"
            }],
            list1:[],
            item1: null
        },
        methods:{
            show(name){
                alert(name);
            },
            search(){
               this.list1 = this.list.filter(item=>{
                    return item.name == this.item1;
                })
            }
        }
    })
</script>