前端学习四（vue基本语法）

准备工作：

1、官方文档：https://cn.vuejs.org/v2/guide/

2、node.js安装，之前学习appium有提到：

拷贝项目到mac，遇到问题：first_vue_project/node_modules/.bin/vue-cli-service: Permission denied

解决办法：赋权即可 　　chmod 777 /Users/此处是项目根目录/node_modules/.bin/vue-cli-service

3、vue的调试工具 vue-devtools 的安装和使用：

npm install遇到问题，发现上面教程有坑，在clone代码下来后，必须切换到tag v5.1.1  而不是什么master、dev什么的（为什么是这个版本，因为之后稳定的版本都没有shells目录）

其他：必需要在有使用vue的html上才会在调试的时候显示vue插件

git  checkout  v.5.1.1

设置国内的镜像

npm config set registry https://registry.npm.taobao.org

一、文本填充 和 元素的属性绑定 

1、引用源

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

2、创建vue对象

 var vue = new Vue({
                el: "挂载对象",
                data: {
                    desc: "用来保存数据"
                },
                methods: {
                    count: function() {
                        console.log("页面操作要使用的函数")
                    }
                }

3、文本填充
　　a、插值表达式：{{值}}

<li>姓名：{{info.name}}li>

　　b、v-text 指令

<li v-text="info.age">li>

　　c、v-html 指令

<p v-html="百度">p>

　　d、v-pre 指令，显示原始的数据格式,不会被vue渲染

<li v-pre>性别：{{info.sex}}li>

4、元素属性绑定
　　a、v-bind ,可以简写成冒号 :

<a v-bind:href="a">百度一下，你就知道a>
<a :href="a">简写v-binda>

　　b、事件绑定 v-on 可以简写@

<button type="button" v-on:click="count()">计算button>
<button type="button" @click="count()">计算button>

　　c、数据双向绑定 v-model（绑定的是表单元素 value），默认用户输入的数据当成字符串处理（ Vue表单修饰符：lazy,number,trim）
　　　　将用户的输入数据转换为数值 v-model.number
　　　　将用户的输入数据去除前后空格 v-model.trim
　　　　数据输入完后才会数据同步 v-model.lazy

<input type="text" name="a" v-model.number.lazy="aa" />

示例

DOCTYPE html>
<html>
    <head>
        <title>title>
        <meta charset="utf-8">
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
    head>

    <body>
        <div id="app">
            <ul>
                <li id="li1">姓名：li>
                <li id="li2">年龄：li>
                <li id="li3">性别：li>
            ul>

            <ul>
                <li>姓名：{{info.name}}li>
                <li v-text="info.age">年龄：li>
                <li v-pre>性别：{{info.sex}}li>
            ul>
            <h4>{{desc}}h4>
            <p v-html="p">p>
            
            
            <a v-bind:href="a">百度一下，你就知道a>
            <p>p>
            <a :href="a">简写v-binda>
            <p>p>

            
            
            
            数值A：<input type="text" name="a" v-model.number.lazy="aa" />
            <br>
            数值B：<input type="text" name="b" v-model.number="bb" />
            
            
            <button type="button" @click="count()">计算button>

            <h5>结果：{{cc}}h5>
        div>

        <script>
            // 原始方法js 往页面填充数据
            data = {
                name: "张三",
                age: 18,
                sex: "男"
            }
            document.getElementById("li1").innerText = document.getElementById("li1").innerText + data.name
            document.getElementById("li2").innerHTML = document.getElementById("li2").innerHTML + data.age
            document.getElementById("li3").innerHTML = document.getElementById("li3").innerHTML + data.sex
            /*
            一、文本填充
            1、插值表达式{{值}}
            2、v-text 指令
            3、v-html 指令
            4、v-pre  指令，显示原始的数据格式,不会被vue渲染

            二、元素的属性绑定
            1、v-bind ,可以简写 : 
            2、事件绑定    v-on    可以简写@
            3、数据双向绑定    v-model（绑定的是表单元素 value），默认用户输入的数据当成字符串处理
               将用户的输入数据转换为数值    v-model.number
               将用户的输入数据去除前后空格    v-model.trim
               数据输入完后才会数据同步        v-model.lazy
            */
            // 初始化一个vue对象
            var vue = new Vue({
                // el 用来指定挂载对象
                el: "#app",
                // data 用来保存数据
                data: {
                    info: {
                        name: "张三",
                        age: 19,
                        sex: "男"
                    },
                    desc: "这是一个标题",
                    p: "百度",
                    a: 'https://www.baidu.com',
                    aa: 11,
                    bb: 22,
                    cc: null
                },
                // 页面操作要使用的函数
                methods: {
                    count: function() {
                        this.cc = this.aa + this.bb
                    }
                }
            })
        script>
    body>
html>

二、条件判断和遍历

1、v-if、v-else-if、v-else
符合条件就被渲染出来，v-else是这组判断的结束标志，按pyhton中理解就行。
2、v-for
遍历数组元素：v-for='item in cases'
遍历数组元素和下标：v-for="(item,index) in cases"
遍历对象值：v-for="item in obj"
遍历对象key、value（第一个参数是value，第二个参数是key）：v-for="(value,key) in obj"

示例

DOCTYPE html>
<html>

<head>
    <title>title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
head>

<body>
    <div id="app">
        
        <div v-if="case_.result=='success'" style="color: green;" id="">{{case_}}div>
        <div v-else style="color: #FF0000;" id="">{{case_}}div>

        <div v-show="case_.show" id="">显示出来 div>

        <table border="" cellspacing="" cellpadding="">
            <tr>
                <th>IDth>
                <th>用例名th>
                <th>结果th>
            tr>

            
            <tr v-for='item in cases'>
                <td>{{item.case_id}}td>
                <td>{{item.title}}td>
                <td v-if="item.result=='success'" style="color: green;">{{item.result}}td>
                <td v-else style="color: red;">{{item.result}}td>
            tr>
            
            <div v-for="(item,index) in cases">{{item}}=={{index}}div>
            
            <div v-for="item in obj">{{item}}div>
            <div v-for="(value,key) in obj">{{key}}=={{value}}div>
        table>
    div>

    <script>
        /**
         * v-if
         * v-else-if
         * v-else
         * 
         * v-show ，控制元素的display属性，true、false
         */

        var vm = new Vue({
            el: "#app",
            data: {
                case_: {
                    case_id: 1,
                    title: "用例001",
                    result: "success1",
                    show: false
                },
                cases: [{
                    case_id: 1,
                    title: "用例001",
                    result: "success",
                }, {
                    case_id: 2,
                    title: "用例002",
                    result: "error",
                }, {
                    case_id: 3,
                    title: "用例003",
                    result: "fail",
                }],
                obj: {
                    case_id: 4,
                    title: "用例004",
                    result: "fail",
                }
            }
        })
    script>
body>

html>