Vue

Vue（基本指令部分）

1.插值表达式、(一般在显示文本内容的标签中使用)`

<div id="app">
    <div>我叫{{name}}，我喜欢{{hobby}}，邮箱:{{dataInfo.email}}</div>
    <ul>
        <li>{{'李杰'}}</li>
        <li>{{'李杰' + "土鳖"}}</li>
        <li>{{ base + 1 + 1 }}</li>
        <li>{{ 1===1 ?"李杰":"alex"}}</li>
    </ul>
    <ul>
        <li>{{ condition?"李杰":"alex"}}</li>
    </ul>
    <input type="button" value="点我" v-on:click="clickMe">
</div>
//data就是开始时候的值
<script>
    // 3.创建Vue对象，并关联指定HTML区域。
    var app = new Vue({
      el: '#app',
      data: {
        name: '武沛齐',
        wechat: 'wupeiqi888'
      },
      methods: {
        clickMe: function () {
          // 获取值this.name
          // 修改值this.name = "xx"
          this.name = "alex";
          this.wechat = "wupeiqi666";
        }
      }
    })
  </script>

2.v-bind指令（对于标签中的属性进行操作）

专门进行属性绑定，在属性前面加上v-bind:即可

<img alt="" v-bind:src="imageUrl" v-bind:class="cls">

//在data里面进行赋值，进行数据绑定 
data: {
        imageUrl: 'https://hcdn2.luffycity.com/media/frontend/public_class/PY1@2x_1566529821.1110113.png',
        cls: "ig",
      }

<div id="app">
    <img src='xx.png' class='c1' />

    <img alt="" v-bind:src="imageUrl" v-bind:class="cls">

    <h1 v-bind:class="{info:v1,danger:v2}">你好呀111</h1>
    <h1 v-bind:class="clsDict">你好呀</h1>

    <h2 v-bind:class="[a1,a2]"></h2>
    <h2 v-bind:class="[1===1?a1:'y',a2]">111</h2>

    <h3 v-bind:style="{ color:clr,fontSize:size+'px'}">222</h3>
    <h3 style="color: red;font-size: 19px">333</h3>

    <input type="button" value="点我" v-on:click="clickMe">
  </div>

v-bind注意：

  • 简写的格式::属性名=xxx，例如：直接去掉v-bind

    <h1 v-bind:class="v1"></h1>
<h1 :class="v1"></h1>
<img :src="xx" />

  • v-bind属于单向绑定（ JS修改->HTML修改 )。

3.v-model指令 一般用于在交互的表中中使用，例如：input、select、textarea等。【双向绑定】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        用户名：<input type="text" v-model="user">
    </div>
    <div>
        密码：<input type="password" v-model="pwd">
    </div>
    <input type="button" value="登录" v-on:click="clickMe"/>
    <input type="button" value="重置" v-on:click="resetForm"/>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: "",
            pwd: "",
        },
        methods: {
            clickMe: function () {
                console.log(this.user, this.pwd)
            },
            resetForm: function () {
                this.user = "";
                this.pwd = "";
            }
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        用户名：<input type="text" v-model="user">
    </div>
    <div>
        密码：<input type="password" v-model="pwd">
    </div>
    <div>
        性别：
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="2">女
    </div>
    <div>
        爱好：
        <input type="checkbox" v-model="hobby" value="11">篮球
        <input type="checkbox" v-model="hobby" value="22">足球
        <input type="checkbox" v-model="hobby" value="33">评判求
    </div>
    <div>
        城市：
        <select v-model="city">
            <option value="sh">上海</option>
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
        </select>
    </div>
    <div>
        擅长领域：
        <select v-model="company" multiple>
            <option value="11">技术</option>
            <option value="22">销售</option>
            <option value="33">运营</option>
        </select>
    </div>
    <div>
        其他：<textarea v-model="more"></textarea>
    </div>

    <input type="button" value="注 册" v-on:click="clickMe"/>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: "",
            pwd: "",
            sex: "2",
            hobby: ["22"],
            city: "sz",
            company: ["22", "33"],
            more: '...'
        },
        methods: {
            clickMe: function () {
                console.log(this.user, this.pwd, this.sex, this.hobby, this.city, this.company, this.more);
            },
        }
    })
</script>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        用户名：<input type="text" v-model="info.user">
    </div>
    <div>
        密码：<input type="password" v-model="info.pwd">
    </div>
    <div>
        性别：
        <input type="radio" v-model="info.sex" value="1">男
        <input type="radio" v-model="info.sex" value="2">女
    </div>
    <div>
        爱好：
        <input type="checkbox" v-model="info.hobby" value="11">篮球
        <input type="checkbox" v-model="info.hobby" value="22">足球
        <input type="checkbox" v-model="info.hobby" value="33">评判求
    </div>
    <div>
        城市：
        <select v-model="info.city">
            <option value="sh">上海</option>
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
        </select>
    </div>
    <div>
        擅长领域：
        <select v-model="info.company" multiple>
            <option value="11">技术</option>
            <option value="22">销售</option>
            <option value="33">运营</option>
        </select>
    </div>
    <div>
        其他：<textarea v-model="info.more"></textarea>
    </div>

    <input type="button" value="注 册" v-on:click="clickMe"/>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            info: {
                user: "",
                pwd: "",
                sex: "2",
                hobby: ["22"],
                city: "sz",
                company: ["22", "33"],
                more: '...'
            }
        },
        methods: {
            clickMe: function () {
                console.log(this.info);
            },
        }
    })
</script>
</body>
</html>


返回的是一一个对象 ，对象包裹着数据

4.v-for指令

用户数据进行循环并展示。

示例一

<div id="app">
    <ul>
        <li v-for="item in dataList">{{ item }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: ["郭德纲", "于谦", "三哥"],
        }
    })
</script>

示例二

<div id="app">
    <ul>
        <li v-for="(item,idx) in dataList">{{idx}} - {{ item }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: ["郭德纲", "于谦", "三哥"],
        }
    })
</script>

示例三

<div id="app">
    <ul>
        <li v-for="(value,key) in dataDict">{{key}} - {{ value }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataDict: {
                id: 1,
                age: 18,
                name: "xxx"
            }
        }
    })
</script>

示例四

<div id="app">
    <ul>
        <li v-for="(item,idx) in cityList">{{item.id}} - {{ item.text }}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            cityList: [
                {id: 11, text: "上海"},
                {id: 12, text: "北京"},
                {id: 13, text: "深圳"},
            ]
        }
    })
</script>

示例五

<div id="app">
    <ul>
        <li v-for="(item,idx) in cityList">
        	<span v-for="(v,k) in item">{{k}} {{v}}</span>
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            cityList: [
                {id: 11, text: "上海"},
                {id: 12, text: "北京"},
                {id: 13, text: "深圳"},
            ]
        }
    })
</script>

5.v-on指令 事件相关的指令

v-on:click
v-on:dblclick  双击事件触发
v-on:mouseover，鼠标进入触发
v-on:mouseout，鼠标离开触发
v-on:change  
在Vue中，change事件是针对表单元素（input、select、textarea）的一种触发机制。当用户在表单元素上进行改变操作（如输入文本、选择选项等）时，会触发change事件。
change事件可以用于监听表单元素的值是否发生了改变，从而触发相应的逻辑处理。例如，可以通过change事件来实现实时验证表单输入的合法性，或者根据输入的值进行相关的数据处理操作。
v-on:focus  在Vue中，focus是一个DOM事件，用于在元素获取焦点时触发。当用户点击输入框或通过Tab键切换到输入框时，该事件将被触发。

示例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-on:click="clickMe">点击</li>
        <li @click="clickMe">点击</li>
        <li v-on:dblclick="doSomething('双击')">双击</li>
        <li v-on:mouseover="doSomething('进入')" v-on:mouseout="doSomething('离开')">进入&离开</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {
            clickMe: function () {
                alert("点击了")
            },
            doSomething: function (msg) {
                console.log(msg);
            }
        }
    })
</script>
</body>
</html>

注意：事件可以简写为 `<div @click="xx">点击

案例：数据管理

数据的管理包括对数据：展示、动态添加、删除、修改。

  • 数据列表展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>   
</head>
<body>

<div id="app">
    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [
                {"name": "武沛齐", "age": 19},
                {"name": "alex", "age": 89},
            ]
        }
    })
</script>
</body>
</html>
  • 数据添加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <h3 class="penal">表单区域</h3>
    <div>
        <div>
            <label>姓名</label>
            <input type="text" v-model="user">
        </div>
        <div>
            <label>年龄</label>
            <input type="text" v-model="age">
            <input type="button" value="新建" @click="addUser">
        </div>
    </div>

    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: "",
            age: "",
            dataList: [
                {name: "武沛齐", age: 19},
                {name: "alex", age: 89},
            ]
        },
        methods: {
            addUser: function () {
                let row = {name: this.user, age: this.age};//关键代码
                this.dataList.push(row);
                this.user = "";
                this.age = "";
            }
        }
    })
</script>
</body>
</html>
  • 数据删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <h3 class="penal">表单区域</h3>
    <div>
        <div>
            <label>姓名</label>
            <input type="text" v-model="user">
        </div>
        <div>
            <label>年龄</label>
            <input type="text" v-model="age">
            <input type="button" value="新建" @click="addUser">
        </div>
    </div>

    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in dataList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <input type="button" value="删除" @click="deleteRow" v-bind:data-idx="idx"/>  //标准语法是data-xxx="xxx"  v-bind 可以省略
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: "",
            age: "",
            dataList: [
                {name: "武沛齐", age: 19},
                {name: "alex", age: 89},
            ]
        },
        methods: {
            addUser: function () {
                let row = {name: this.user, age: this.age};
                this.dataList.push(row);
                this.user = "";
                this.age = "";
            },
            deleteRow: function (event) {
                // 根据索引删除dataList中的值
                let idx = event.target.dataset.idx;//event.target.是获取对象里面的值
                this.dataList.splice(idx, 1);//删除的索引位置和删除值的个数
            }
        }
    })
</script>
</body>
</html>

  • 修改数据

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <h3 class="penal">表单区域</h3>
    <div>
        <div>
            <label>姓名</label>
            <input type="text" v-model="user">
        </div>
        <div>
            <label>年龄</label>
            <input type="text" v-model="age">
            <input type="button" :value="title" @click="addUser">
        </div>
    </div>

    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in dataList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <input type="button" value="删除" @click="deleteRow" :data-idx="idx"/>
                <input type="button" value="编辑" @click="editRow" :data-idx="idx"/>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            editIndex: undefined,
            title: "新建",
            user: "",
            age: "",
            dataList: [
                {name: "武沛齐", age: 19},
                {name: "alex", age: 89},
            ]
        },
        methods: {
            addUser: function () {
                if (this.editIndex) {
                    // 修改
                    this.dataList[this.editIndex].name = this.user;
                    this.dataList[this.editIndex].age = this.age;
                } else {
                    let row = {name: this.user, age: this.age};
                    this.dataList.push(row);
                }
                this.user = "";
                this.age = "";
                this.editIndex = undefined;
                this.title = "新建";
            },
            deleteRow: function (event) {
                // 根据索引删除dataList中的值
                let idx = event.target.dataset.idx;
                this.dataList.splice(idx, 1);
            },
            editRow: function (event) {
                let idx = event.target.dataset.idx;
                // let name = this.dataList[idx].name;
                // let age = this.dataList[idx].age;
                // let {id, name} = {id: 1, name: "武沛齐"};
                // console.log(id, name);
                let {name, age} = this.dataList[idx];//this.dataList[idx]这是获取到对象
                this.user = name;
                this.age = age;//双向绑定  点击编辑显示在页面上
                this.title = "编辑";
                this.editIndex = idx;
            }
        }
    })
</script>
</body>
</html>

6.v-if指令 进行条件判断

示例一

<div id="app">
    <a v-if="isLogin">{{user}}</a>
    <a v-else>登录</a>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isLogin: false,
            user: "武沛齐"
        }
    })
</script>

示例二

<div id="app">
    <h1 v-if="v1">阿里无人区</h1>

    
    <h1 v-if="v2">去西藏</h1>
    <h1 v-else>去新疆</h1>

    
    <div v-if="v3 === '北京'">
        <h1>天安门</h1>
    </div>
    <div v-else-if="v3 === '新疆'">
        <h1>乌鲁木齐</h1>
    </div>
    <div v-else-if="v3 ==='西藏'">
        <h1>拉萨</h1>
    </div>
    <div v-else>
        <h1>大理</h1>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            v1: true,
            v2: true,
            v3: "新疆"
        }
    })
</script>

7.v-show 根据条件显示或隐藏（标签都会渲染到页面）。

示例一

<div id="app">
    <h1 v-show="v1">可可西里</h1>
    <h1 v-show="!v1">罗布泊</h1>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            v1: false,
        }
    })
</script>

示例二

<div id="app">
    <input type="button" value="密码登录" @click="isSms=false"/>
    <input type="button" value="短信登录" @click="isSms=true"/>
    
    <div v-show="isSms">
        <p>
            <label>手机号</label>
            <input type="text" placeholder="手机号">
        </p>
        <p>
            <label>验证码</label>
            <input type="text" placeholder="验证码">
        </p>
    </div>
    <div v-show="!isSms">
        <p>
            <label>用户名</label>
            <input type="text" placeholder="用户名">
        </p>
        <p>
            <label>密码</label>
            <input type="password" placeholder="密码">
        </p>
    </div>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isSms: false,
        }
    })
</script>

案例 用户登录

在编写案例之前，现在来学下axios，他是一个HTTP 库，可以发送Http请求。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        method: "post",
        url: 'https://api.luf...ord/login/',
        params: {
			v1:123,
            v2:456
        },
        data: {
            name:"武沛齐",
            pwd:"123"
        },
        headers: {
            "Content-Type": "application/json"
        }
    }).then(function (res) {
        console.log(res.data);
    }).catch(function (error) {
		console.log(error);
    })
</script>

很重要的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        label {
            width: 60px;
            display: inline-block;
            text-align: right;
            margin-right: 8px;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="密码登录" @click="isSms=false"/>
    <input type="button" value="短信登录" @click="isSms=true"/>

    <div v-show="isSms">
        <p>
            <label>手机号</label>
            <input type="text" placeholder="手机号" v-model="sms.mobile">
        </p>
        <p>
            <label>验证码</label>
            <input type="text" placeholder="验证码" v-model="sms.code">
        </p>
    </div>
    <div v-show="!isSms">
        <p>
            <label>用户名</label>
            <input type="text" placeholder="用户名" v-model="info.username">
        </p>
        <p>
            <label>密码</label>
            <input type="password" placeholder="密码" v-model="info.password">
        </p>
    </div>

    <input type="button" value="登 录" @click="loginForm"/>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isSms: false,
            info: {
                username: "",
                password: "",
            },
            sms: {
                mobile: "",
                code: ""
            }
        },
        methods: {
            loginForm: function () {
                // 1.获取用户输入的值
                let dataDict = this.isSms ? this.sms : this.info;

                let url;
                if (this.isSms) {
                    url = "https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile";
                } else {
                    url = "https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password";
                }

                // 2.想某个地址发送网络请求 axios
                // https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password
                // {"username":"alex123","password":"999"}

                // https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile
                // {"mobile":"18630087660","code":"123123"}
                axios({
                    method: "post",
                    url: url,
                    data: dataDict,
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (res) {
                    if (res.data.code === -1) {
                        alert(res.data.msg);
                        return;
                    }
                    // 登录成功后跳转
                    window.location.href = "https://www.luffycity.com"
                }).catch(function (error) {
                    alert("请求异常，请重新操作。")
                })
            }
        }
    })
</script>
</body>
</html>
posted @ 2024-07-12 10:29  edeew  阅读(23)  评论(0)    收藏  举报