🍖Vue 基础介绍

引入

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>

展示

二.指令

文本指令

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

0.`v-show` 与 `v-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>

展示

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>

展示

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>

展示

对于按钮的字体显示也可以不使用if判断, 直接使用三目运算符来完成
<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>

展示

事件指令

指令	说明
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.效果展示

属性指令

指令	说明
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.展示

三.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.展示

五.列表渲染

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>

展示

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>

展示

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.展示

input111

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.展示

阻止冒泡事件

pppppppmmm111

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

pppppppmmm11122222

点击只执行一次

ppppppp33333333333

八.按键修饰符

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.展示

keyup

九.数据的双向绑定

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.展示

inpu23123t111

十.表单控制

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>

展示

checkboxssi22222222222222222

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>

展示

bookshop111111111112

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>

展示

allandone222

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>

展示

加减asd

十一. 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.展示

v-mode21312

posted @ 2021-04-26 23:02 给你骨质唱疏松阅读(202) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

给你骨质唱疏松

明哩子会更好

🍖Vue 基础介绍

引入

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

一.模板语法

插值语法 : {{ }}

二.指令

文本指令

0.v-show 与 v-if 的区别

1.v-html : 渲染 HTML

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

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

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

事件指令

1.代码演示

2.效果展示

属性指令

1.代码示例

2.展示

三.style 和 class

0.数据绑定语法

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

四.条件渲染

1.代码示例

2.展示

五.列表渲染

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

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

3.Key 值的作用

4.数组的更新与检测

六.事件处理

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

2.展示

3.补充箭头函数

七.事件修饰符

1.代码示例

2.展示

八.按键修饰符

1.监听键盘事件

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

3.展示

九.数据的双向绑定

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

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

3.展示

十.表单控制

1.checkbox 选中

2.单选框

3.多选框

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

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

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

十一. v-model 进阶

1.v-model 之 lazy、number、trim

2.代码示例

3.展示

公告

插值语法 : `{{ }}`

0.`v-show` 与 `v-if` 的区别

1.`v-html` : 渲染 HTML

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

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

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

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

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