02 Vue 基础介绍

199次阅读
没有评论

共计 21975 个字符,预计需要花费 55 分钟才能阅读完成。

引入

1.vue 基本使用的三个注意事项

  • 一个 html 页面中可以存在多个 vue 实例对象, 但是实例对象的变量名强烈建议唯一, 而且每一个 vue 对象负责一个特效功能
  • js 中所有的变量和语法都是区分大小写的, new Vue()
  • 建议实例化 vue 对象的代码写在 body 的最后面或者 head 里面, 免得出现 html 元素无法获取的错误出现

一. 模板语法

插值语法 : {{}}

  • 三目运算符(与三元表达式类似) 语法 : [条件] ? '条件成立显示左' : '条件不成立显示右'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
    <ul>
        <li> 字符串:{{msg}}</li>
        <li> 数值:{{phone}}</li>
        <li> 数组:{{array1}}</li>
        <li> 对象:{{obj1}}</li>
        <li> 字符串:{{link}}</li>
        <li> 运算:{{(10+10)*10}}</li>
        <li> 三目运算符:{{10>20?'true':'false'}}</li>
    </ul>
</div>
</body>
<script>
    // 对 vue 的核心对象 vm 进行实例化: vue.js 的代码开始于一个 Vue 对象, 所以每次操作数据都要声明 Vue 对象开始
    var vm = new Vue({
        el:'#app',  // 设置当前 vue 对象要控制的标签范围, 方便接下来 vue 要操作的元素的选择符 element 的缩写,表示元素
        data:{      // 可用于展示在 HTML 页面上的数据
            msg:'Hello word!',  // 字符串
            phone:15979302285,  // 数值
            array1:[1,2,3,4,5], // 数组
            obj1:{name:'shawn',age:333},  // 对象
            // 这里 link 展示的是字符串, 后边有方法渲染成标签
            link:'<a href="http://www.baidu.com"> 摆渡一下 </a>'  
        }
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

二. 指令

文本指令

指令 说明
v-html 让 HTML 渲染成页面
v-text 标签内容显示 js 变量对应的值
v-show 放 1 个布尔值:为真, 标签就显示;为假, 标签就不显示
v-if 放 1 个布尔值:为真, 标签就显示;为假, 标签就不显示

0.v-showv-if 的区别

  • v-show : 当值为 false 时, 标签还存在, 只是不显示, 因为设置了 display:none 属性
  • v-if : 直接进行的 DOM 操作, 对标签进行删除或插入

1.v-html : 渲染 HTML

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app2">
    <h1 v-html="link"> 链接渲染:{{link}}</h1>
</div>
</body>
<script>
    var vm2 = new Vue({
        el:'#app2',
        data: {link:'<a href="http://www.baidu.com"> 摆渡一下 </a>'}
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

2.v-text : 标签内容显示 js 变量所对应的值

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app3">
    <h2 v-text="link"></h2>
    <h1 v-text="link2"></h1>
</div>
</body>
<script>
    var vm3 = new Vue({
        el: '#app3',
        data: {
            link: '<a href="http://www.baidu.com"> 摆渡一下 </a>',
            link2:'人面不知何处去, 桃花依旧笑春风'
        }
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

3.v-show : 显示 / 隐藏内容

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app4">
    <!--@click: 点击触发 handleClick 方法 -->
    <button @click="handleClick()">{{msg}}</button>
    <!--isShow 为 true 则显示, 为 false 则隐藏, 隐藏只是增加了 display:none 属性 -->
    <h3 v-Show="isShow"> 梦里有我曾见过的月光⭐也有我如初待我的模样 </h3>
</div>
</body>
<script>
    var vm4 = new Vue({
        el: '#app4',
        data: {isShow: true, // 默认为 true(显示)
            msg:'点击隐藏(display:none)'
        },
        methods:{handleClick(){
                this.isShow = !this.isShow  // this 指的是当前的 vue 对象, 对其取反
                if (!this.isShow){this.msg = '点击显示'  // 改变按键的文字显示}else {this.msg = '点击隐藏(display:none)'
                }
            },
        },
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

对于按钮的字体显示也可以不使用 if 判断, 直接使用三目运算符来完成

html
<button @click="handleClick()" v-text='isShow?" 隐藏 ":" 显示 "'></button>

4.v-if : 显示 / 删除内容

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app5">
    <!--@click: 点击触发 handleClick 方法 -->
    <button @click="handleClick()">{{msg}}</button>
    <!-- 如果 isCreated 为 false 则将该标签删除, 如果为 true 则正常显示 -->
    <h3 v-if="isCreated"> 梦里有我曾闻过的花香🌙也有你和我初遇的地方 </h3>
</div>
</body>
<script>
    var vm5 = new Vue({
        el: '#app5',
        data: {isCreated: true,  // 默认为 true(显示)
            msg: '点击删除标签(隐藏)'
        },
        methods: {handleClick() {
                this.isCreated = !this.isCreated  // this 指的是当前的 vue 对象, 取反
                if (!this.isCreated) {  // 改变按键的文字显示
                    this.msg = '点击新建标签(显示)'
                } else {this.msg = '点击删除标签(隐藏)'
                }
            },
        },
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

事件指令

指令 说明
v-on 触发事件(不推荐)
@ 触发事件(简写 推荐
@[event] 触发 event 事件(可以是其他任意 事件

1. 代码演示

  • v-on:click 可以简写成@click
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 事件指令 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <style>
    button{background-color: cyan;}
    </style>
</head>
<body>
<div id="box">
    <button v-on:click="handleClick1">v-on:click</button>
    <!--v-on:click 的简写,@用的比较多 -->
    <button @click="handleClick2">@click</button>
    <!-- 加括号的不传入参数其实与上面的写法效果一样 -->
    <button @click="handleClick3()">@click(方法带括号)</button>
    <!-- 传入参数 -->
    <button @click="handleClick3(1,2,3)">@click(方法带括号 + 参数)</button>
    <!-- 传入事件 -->
    <button @click="handleClick4($event)">@click(方法传事件参数)</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {},
        methods: {handleClick1() {alert('第一个按钮')
            },
            handleClick2() {alert('第二个按钮')
            },
            handleClick3(a, b, c) {alert('a:' + a + '\n' + 'b:' + b + '\n' + 'c:' + c)
            },
            handleClick4(event) {
                var ev = '';
                for (i in event) {  // 循环取出 event 内事件
                    ev += i + '\n'
                }
                alert(ev)
                // console.log(ev)
            }
        }
    })
</script>
</html>

2. 效果展示

02 Vue 基础介绍

属性指令

指令 说明
v-bind 直接写 js 的变量或语法(不推荐)
: 直接写 js 的变量或语法(简写 推荐

1. 代码示例

  • v-bind:class='[js 变量]'可以缩写成::class='[js 变量]'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <style>
        .red {color: #f55f9c;}
        .green {color: #68f587;}
    </style>
</head>
<body>
<div id="box">
    <!-- 设置 img 标签的 src 属性, 可以简写成 :src='url'-->
    <img v-bind:src="url" alt="" height="300">
    <hr>
    <button @click="handleClick"> 点击变色 </button>
    <!-- 三目运算符,true 为 red,false 为 green-->
    <h2 :class="isActive?'red':'green'"> 几回花下坐吹箫🌕银汉红墙入望遥 </h2>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            url: "./1122q.jpg",
            isActive: true,
        },
        methods: {handleClick() {this.isActive = !this.isActive  // 取反},
        },
    })
</script>
</html>

2. 展示

02 Vue 基础介绍

三.style 和 class

0. 数据绑定语法

  • style 绑定样式
:style="[js 变量]"
:style="[数组]"
:style="[对象]"
:style="[三目运算符]"
  • class 绑定类
:class="[js 变量]"
:class="[数组]"
:class="[对象]"
:class="[三目运算符]"

1. 代码示例, 绑定不同的属性和类

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <style>
        .red {color: rgba(255, 104, 104, 0.7);
        }
        .font-20 {font-size: 20px;}
        .be-bold {font-weight: bold;}
    </style>
</head>
<body>
<div id="box">
    <p> 普通的 p 标签 </p>
    <hr>
    <p :class="class_obj"> 设置了 class_obj 的 p 标签(字符串)</p>
    <hr>
    <p :class="class_obj2"> 设置了 class_obj2 的 p 标签(数组)</p>
    <hr>
    <button @click="handleClick"> 点击放大字体 </button>
    <hr>
    <p :style="style_obj"> 设置了 style_obj 的 p 标签 </p>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            class_obj: 'red',    // 放的是字符串
            class_obj2: ['red', 'font-20', 'be-bold'],    // 放 2 个是数组
            // class_obj: {red:true, be-bold:false},    // 也可以放对象

            // 字符串写法
            // style_obj:'color : red; font-size : 40px'

            // 对象的写法
            style_obj: {
                color: 'red',
                fontSize: '20px'
            }
            // 或者数组套字典
            // style_obj: [{background:'red'}, {fontSize:'20px'}]
        },
        methods: {handleClick() {this.style_obj['fontSize'] = '30px'
            }
        }
    })
</script>
</html>

四. 条件渲染

指令 释义
v-if 相当于:if
v-else 相当于:else
v-else-if 相当于:else if

1. 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<body>
<div id="box">
    <h2 v-if="type==='1'">(if type==='1')展示我 </h2>
    <h2 v-else-if="type==='2'">(else-if type==='2')展示我 </h2>
    <h2 v-else>(else)展示我 </h2>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {type: '1',}
    })
</script>
</html>

2. 展示

02 Vue 基础介绍

五. 列表渲染

1.v-if + v-for + v-else 控制书籍信息

  • 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <h2> 我的书单 </h2>
    <!-- 点击按钮展示书单 -->
    <button @click="showBook"> 展示书单 </button>
    <hr>
    <!-- 如果书单列表不为空 -->
    <table class="table table-striped" v-if="!book_list.length==0">
        <tr>
            <td> 书籍名称 </td>
            <td> 价格 </td>
        </tr>
        <!--for 循环取出书籍对象展示 -->
        <tr v-for="item in book_list">
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>
    <!-- 书籍列表为空的情况下 -->
    <table v-else class="table table-striped">
        <tr>
            <td> 书籍名称 </td>
            <td> 价格 </td>
        </tr>
        <tr>
            <td> 空空如也 </td>
            <td> 空空如也 </td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isActive: false,
            book_list: []},
        methods: {showBook() {
                this.book_list = [{title: '《边城》', price: '29 元'},
                    {title: '《城南的猫》', price: '59 元'},
                    {title: '《猫》', price: '99 元'},
                ]
            }
        }
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

2.v-for 遍历数组、对象、数组套对象

  • 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 剛剛 </title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="box">
    <h2> 数组 for 循环遍历 </h2>
    <ul>
        <li v-for="(value,index) in num_list">{{index}} —— {{value}}</li>
    </ul>

    <h2> 对象 for 循环遍历 </h2>
    <ul>
        <li v-for="(value,key) in user_info">{{key}} —— {{value}}</li>
    </ul>

    <h2> 数组套对象 for 循环遍历 </h2>
    <table class="table table-striped">
        <tr>
            <td> 书名 </td>
            <td> 价格 </td>
            <td> 数量 </td>
            <td> 出版社 </td>
        </tr>
        <tr v-for="info in book_list">
            <td>{{info.title}}</td>
            <td>{{info.price}}</td>
            <td>{{info.count}}</td>
            <td>{{info.publish}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {num_list: ['First', 'second', 'Third', 'Forth', 'Fifth'],
            user_info:{name: 'shawn', age: 18, gender: 'male'},
            book_list: [{title: '边城', price: 23, count: 8, publish: '南京出版社'},
                    {title: '薛定谔', price: 45, count: 5, publish: '北京出版社'},
                    {title: '茶花女', price: 32, count: 2, publish: '南京出版社'},
                    {title: '城南旧事', price: 48, count: 3, publish: '南京出版社'},
                    {title: '最后一枝花', price: 66, count: 6, publish: '北京出版社'},
                ]
        }
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

ps :

  • Python 中取列表或字典的 index / key 一般在前面, value 在后面

  • 在 vue 中数组的 index 与 value 位置是反过来的

  • 对象的 key 和 value 也是反过来的

3.Key 值的作用

  • key 的作用主要是为了高效的更新虚拟 DOM(虚拟 DOM 用了 diff 算法)
  • v-for 循环数组、对象时,建议在控件 / 组件 / 标签写 1 个 key 属性,属性值唯一
  • 页面更新之后,会加速 DOM 的替换(渲染)
:key="[变量]"

4. 数组的更新与检测

尤雨溪对数组的部分操作方法进行了重写, 重写的方法对数据进行操作也将会触发视图更新

  • 可以检测到变动的数组操作
push()     # 最后位置添加
pop()      # 最后位置删除
shift()    # 第一个位置删除
unshift()  # 第一个位置添加
splice()   # 切片
sort()     # 排序
reverse()  # 反转
  • 检测不到变动的数组操作
filter()  # 过滤
concat()  # 追加另一个数组
slice()   # 切片
map()     # 映射 

六. 事件处理

事件 说明
input 当输入框 内容变化 的时候, 实时触发 的事件(一般用作检索)
change 当输入框内容发生改变并失去焦点时, 触发的事件
blur 当输入框失去焦点的时候, 触发的事件
  • change 和 blur 最本质的区别

如果输入框为空, 失去焦点后, change 不会触发, 但是 blur 会触发

1. 代码示例 : 实现搜索框过滤数据功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-4">
                <!--input 框数据双向绑定使用 v -model-->
                <p><input type="text" v-model="myText" @input="handleInput" placeholder=" 请输入查找内容 "></p>
                <!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder=" 请输入查找内容 "></p> -->
                <!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder=" 请输入查找内容 "></p> -->
                <ul>
                    <!-- 循环从 newList 中取出需要展示的数据 -->
                    <li v-for="data in newList">{{data}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: '',
            // 所有的数据
            oldList: ['边城', '城南旧事', '薛定谔的猫', '黑猫警长', '猫和老鼠', '最后一枝花', '茶花女'],
            // 需要展示的过滤后的数据(先默认全部展示, 过滤后就只展示过滤后的数据)
            newList: ['边城', '城南旧事', '薛定谔的猫', '黑猫警长', '猫和老鼠', '最后一枝花', '茶花女'],
        },
        methods: {handleInput() {
                // 过滤 oldList 里的每一个元素, 判断 myText 这个字符串在不在元素里, 在, 则返回 true 加入 newList
                this.newList = this.oldList.filter(item => {
                   // 输入框中输入的字符串在筛选元素中的索引, 找不到返回 -1, 大于 -1 就表示包含在其中
                    if (item.indexOf(this.myText) > -1) {return true  // 返回 true 则展示} else {return false  // 返回 false 则不展示}
                })
            },
        },
    })
</script>
</html>

2. 展示

02 Vue 基础介绍

3. 补充箭头函数

  • 箭头函数是 ES6 版本的语法 =>

  • 箭头函数可以替换函数表达式,但是不能替换函数声明

  • 至关重要的一点 : 在 箭头函数中, 没有 this; 如果你在箭头函数中使用了 this, 那么该 this 一定就是外层的 this
list: ['边城', '城南旧事', '薛定谔的猫', '黑猫警长', '猫和老鼠', '最后一枝花', '茶花女']
// 正常写法
let newList = list.filter(function (item) {if (item.length >= 3) {return true} else {return false}

})
// 箭头函数 ES6 版本的语法
let newList = list.filter(item => {if (item.length >= 3) {return true} else {return false}
})
// es5
var fn = function(a, b) {return a + b;}

// es6 箭头函数写法,当函数直接被 return 时,可以省略函数体的括号
const fn = (a, b) => a + b;

七. 事件修饰符

事件修饰符 说明
.stop 只处理自己的事件,父控件冒泡的事件不处理(阻止事件冒泡)
.self 只处理自己的事件,子控件冒泡的事件不处理
.prevent 阻止 a 链接的跳转
.once 事件只会触发一次(适用于抽奖页面)

ps:

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生

因此,用 v-on:click.prevent.self 会阻止 所有的点击

v-on:click.self.prevent 只会阻止对 元素自身的点击

1. 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<style>
    ul {
        background-color: #9de5c8;
        width: 300px;
        list-style-type:none;
    }

    li {
        background-color: #e389ae;
        width: 230px;
    }
</style>
<body>
<div id="box">
    <!-- 阻止子控件事件 -->
    <ul @click.self="handleUl">
        <!-- 阻止父控件事件(冒泡) -->
        <li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
        <br>
        <!-- 正常 a 链接, 点击跳转 -->
        <li><a href="http://www.baidu.com"> 不拦截 </a></li>
        <br>
        <!-- 点击先触发了一个方法, 方法里面进行拦截 -->
        <li><a href="http://www.baidu.com" @click="handleLink($event)"> 点击拦截 </a></li>
        <br>
        <!-- 点击被拦截并触发一个方法 -->
        <li><a href="https://www.baidu.com" @click.prevent="handleLink"> 点击拦截 </a></li>
        <br>
        <!-- 点击只能执行一次(刷新页面可以再执行)-->
        <li>
            <button @click.once="test"> 只执行一次 </button>
        </li>
        <br>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {dataList: ['i am son1', 'i am son2', 'i am son3', 'i am son4']
        },
        methods: {handleUl() {console.log('ul 被点击了')
            },
            handleLi(ev) {console.log('li 被点击了')
                ev.stopPropagation()  // 点击事件停止, 冒泡(向父组件传递事件)},
            handleLink(ev) {ev.preventDefault()  // 阻止 a 链接跳转
            },
            test() {alert('只触发 1 次')
            }
        }
    })
</script>
</html>

2. 展示

  • 阻止冒泡事件

02 Vue 基础介绍

  • a 链接不拦截、拦截、拦截再执行方法

02 Vue 基础介绍

  • 点击只执行一次

02 Vue 基础介绍

八. 按键修饰符

1. 监听键盘事件

  • v-on:keyup / v-on:keydown 简写 @keyup / @keydown
.enter  # 常用
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

2. 代码示例 : 监听键盘实现跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>

<div id="app">
    <!-- 任意按键弹起触发 -->
    <!-- <input type="text" @keyup="handle" v-model="search">-->
    <!-- 任意按键按下就触发 -->
    <!-- input type="text" @keydown="handle" v-model="search">-->
    <!--enter 按键弹起触发(还有很多其他按键自定义)-->
    <input type="text" @keyup.enter="handle" v-model="search">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {search:''},
        methods: {handle(){alert('enter 键弹起, 并跳转页面')
                location.href='https://www.baidu.com/s?wd='+this.search
            }
        }
    })
</script>
</html>

3. 展示

02 Vue 基础介绍

九. 数据的双向绑定

1.input 输入框的数据的双向绑定

  • input 输入框使用 v-model='[js 变量]' 来实现

2. 代码展示 : 前端验证用户信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
    <!-- 名字绑定 name, 密码绑定 password-->
    请输入您的名字:<input type="text" v-model="name" class="form-control">
    <hr>
    请输入您的密码:<input type="password" v-model="password" class="form-control">
    <hr>
    欢迎:{{name}}
    <hr>
    <span>{{error}}</span>  <!-- 用来展示错误信息 -->
    <button @click="submit_1" class="btn btn-info btn-block"> 登录 </button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name:'',
            password:'',
            error:''
        },
        methods:{
            // 直接在前端进行判断
            submit_1(){if(this.name=='shawn' && this.password=='123'){location.href='http://www.baidu.com'}else {this.error='用户名或密码错误'}
            }
        }
    })
</script>
</html>

3. 展示

02 Vue 基础介绍

十. 表单控制

1.checkbox 选中

2. 单选框

3. 多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
    <hr>
    <h3>checkbox 选中 </h3>
    <input type="checkbox" v-model="check_1" value="check_1"> ✅请勾选以确认阅读!<br>
    <span>{{check_1?'已勾选':'未勾选'}}:{{check_1}} </span>
    <hr>

    <h3> 单选框 </h3>
    性别:<input type="radio" v-model="radio_1" value="1: 男 "> 男 ♂️
    <input type="radio" v-model="radio_1" value="2: 女 "> 女 ‍♀️
    <input type="radio" v-model="radio_1" value="3: 未知 "> 未知 ❗
    <br>
    <span> 您的性别 : {{radio_1}}</span>
    <hr>

    <h3> 多选框 </h3>
    <span v-for="hobby in hobbys">
        <!-- 传给后端一般传 id 而不是汉字 -->
        <!--<input type="checkbox" v-model="many" :value="hobby.id"> {{hobby.name}}-->
        <input type="checkbox" v-model="many" :value="hobby.name"> {{hobby.name}}
    </span>
    <br>
    您的爱好:<span v-for="hob in many">{{hob}}、</span>
    <hr>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            check_1: false,  // checkbox
            radio_1: '',     // 单选框
            hobbys: [{id: 1, name: '📖阅读'}, {id: 2, name: '🏃‍跑步'}, {id: 3, name: '🎯游戏'}, {id: 4, name: '🍖食物'}],
            many: [],  // 多选框},
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

4. 购物车结算案例 : 数量 * 价格

  • 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-hover">
                    <tr>
                        <td> 书籍名称 </td>
                        <td> 价格 </td>
                        <td> 数量 </td>
                        <td> 选择 </td>
                    </tr>
                    <tr v-for="item in dataList">
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.count}}</td>
                        <!-- 选中之后 checkGroup 会发生变化, 自动触发函数计算价格 -->
                        <td><input type="checkbox" :value="item" v-model="checkGroup"></td>
                    </tr>
                </table>
                <br>
                已选书籍:<!-- 循环取出购物车的书籍 -->
                <span v-for="book in checkGroup">
                    {{book.name}} : {{book.count}} 个、</span>
                <br> 总价:{{getPrice()}}  <!-- 执行计算价格的函数返回总价格 -->
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [{name: '边城', price: 20, count: 2},
                {name: '受戒', price: 30, count: 1},
                {name: '南行记', price: 40, count: 5},
                {name: '竹林的故事', price: 50, count: 3},
                {name: '呼兰河传', price: 60, count: 4},
            ],
            checkGroup: [],},
        methods: {getPrice() {
                let sum_price = 0
                // 基于下标 (索引) 循环(Python 中只有迭代循环, 没有索引循环,Java 和 go 中都有
                // for (i=0;i<this.checkGroup.length;i++){for (i in this.checkGroup) {    // 这里的 i 是索引
                    // 单价 * 数量计算价格
                    sum_price += this.checkGroup[i]['count'] * this.checkGroup[i]['price']
                }
                return sum_price  // 返回总价格
            }
        },
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

5. 购物车结算案例 : 增加全选与取消全选按钮

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-hover">
                    <tr>
                        <td> 书籍名称 </td>
                        <td> 价格 </td>
                        <td> 数量 </td>
                        <td>{{allChecked?'取消全选':'全选操作'}}
                            <!-- 点击该选择框发生变化失焦后触发 checkAll 函数 -->
                            <input type="checkbox" v-model="allChecked" @change="checkAll">
                        </td>
                    </tr>
                    <tr v-for="item in dataList">
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.count}}</td>
                        <!-- 选中之后 checkGroup 会发生变化, 自动触发函数计算价格, 并触发 checkOne 的执行去判断是否已经全部选中了 -->
                        <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
                    </tr>
                </table>
                <hr>
                已选书籍:<!-- 循环取出购物车的书籍 -->
                <span v-for="book in checkGroup">
                    {{book.name}} : {{book.count}} 个、</span>
                <br> 总价:{{getPrice()}}  <!-- 执行计算价格的函数返回总价格 -->
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [{name: '边城', price: 20, count: 2},
                {name: '受戒', price: 30, count: 1},
                {name: '南行记', price: 40, count: 5},
                {name: '竹林的故事', price: 50, count: 3},
                {name: '呼兰河传', price: 60, count: 4},
            ],
            checkGroup: [],
            allChecked:false,
        },
        methods: {
            // 计算总价格
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {    // 这里的 i 是索引
                    // 单价 * 数量计算价格
                    sum_price += this.checkGroup[i]['count'] * this.checkGroup[i]['price']
                }
                return sum_price  // 返回总价格
            },
            // 点击全选 / 取消全选按钮
            checkAll(){
                // 如果所选书籍长度不等于所有书籍程度, 说明不是全选, 于是我们将其全选
                if (this.checkGroup.length != this.dataList.length){this.checkGroup = this.dataList}else{
                    // 否则将 checkGroup 置空实现取消全选
                    this.checkGroup = []}
            },
            // 判断购物车书籍是否已经全部选中
            checkOne(){if (this.checkGroup.length != this.dataList.length){
                    // 如果长度不相等, 那么就不是全选, 将按钮取消选中
                    this.allChecked = false
                }else{
                    // 如果全部选中则将全选按钮也变成激活状态
                    this.allChecked = true
                }
            },
        },
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

6. 购物车结算案例 : 实现书籍数量可进行加减

  • 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <style>
        button{
            outline: none;
            background-color: #ddeac6;
            color: #757a78;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-hover">
                    <tr>
                        <td> 书籍名称 </td>
                        <td> 价格 </td>
                        <td> 数量 </td>
                        <td>{{allChecked?'取消全选':'全选操作'}}
                            <!-- 点击该选择框发生变化失焦后触发 checkAll 函数 -->
                            <input type="checkbox" v-model="allChecked" @change="checkAll">
                        </td>
                    </tr>
                    <tr v-for="item in dataList">
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>
                            <!-- 每点击一次加一次 -->
                             <button type="button" class="btn btn-xs" @click="item.count++">+🧡</button>
                            {{item.count}}
                            <!-- 每点击一次减一次, 但不能减到零(与加不一样, 要专门建函数处理一下)-->
                             <button type="button" class="btn btn-xs" @click="reduce(item)">-💔</button>
                        </td>
                        <!-- 选中之后 checkGroup 会发生变化, 自动触发函数计算价格, 并触发 checkOne 的执行去判断是否已经全部选中了 -->
                        <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
                    </tr>
                </table>
                <hr>
                已选书籍:<!-- 循环取出购物车的书籍 -->
                <span v-for="book in checkGroup">
                    {{book.name}} : {{book.count}} 个、</span>
                <br> 总价:{{getPrice()}}  <!-- 执行计算价格的函数返回总价格 -->
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [{name: '边城', price: 20, count: 2},
                {name: '受戒', price: 30, count: 1},
                {name: '南行记', price: 40, count: 5},
                {name: '竹林的故事', price: 50, count: 3},
                {name: '呼兰河传', price: 60, count: 4},
            ],
            checkGroup: [],
            allChecked:false,
        },
        methods: {
            // 计算总价格
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {    // 这里的 i 是索引
                    // 单价 * 数量计算价格
                    sum_price += this.checkGroup[i]['count'] * this.checkGroup[i]['price']
                }
                return sum_price  // 返回总价格
            },
            // 点击全选 / 取消全选按钮
            checkAll(){
                // 如果所选书籍长度不等于所有书籍程度, 说明不是全选, 于是我们将其全选
                if (this.checkGroup.length != this.dataList.length){this.checkGroup = this.dataList}else{
                    // 否则将 checkGroup 置空实现取消全选
                    this.checkGroup = []}
            },
            // 判断购物车书籍是否已经全部选中
            checkOne(){if (this.checkGroup.length != this.dataList.length){
                    // 如果长度不相等, 那么就不是全选, 将按钮取消选中
                    this.allChecked = false
                }else{
                    // 如果全部选中则将全选按钮也变成激活状态
                    this.allChecked = true
                }
            },
            // 数量减少
            reduce(item){
                // 数量最少为 1
                if(item.count === 1){alert('宝贝不能再少了')
                }else{item.count--}
            }
        },
    })
</script>
</html>
  • 展示

02 Vue 基础介绍

十一. v-model 进阶

1.v-model 之 lazy、number、trim

  • lazy:等待 input 框的数据绑定失去焦点之后再变化
  • number:数字开头,只保留数字,后面的字母不保留;字母开头,都保留
  • trim:去除开头结尾的空格

2. 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="box">
    <hr>
    <input type="text" v-model="myText1" placeholder="normal"> {{myText1}}
    <hr>
    <!--input 框失去焦点后数据才会发生变化 -->
    <input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}
    <hr>
    <!-- 数字开头后面只保留数字, 字母开头后面全部保留, 汉字当字母处理 -->
    <input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}
    <hr>
    <!-- 取出开头结尾空格 -->
    <input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText1: '',
            myText2: '',
            myText3: '',
            myText4: '',
        },
    })
</script>
</html>

3. 展示

02 Vue 基础介绍

正文完
 
shawn
版权声明:本站原创文章,由 shawn 2023-06-16发表,共计21975字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)