【2022-10-25】前端Vue框架(二)

一、Style和class

数据绑定

语法

:属性名=js变量/js语法

:class=’js变量、字符串、js数组’
class：三目运算符、数组、对象{red: true}

:style=’js变量、字符串、js数组’
style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .background_blue {
            background-color: aliceblue;
        }

        .size {
            font-size: 40px;
        }
    </style>
</head>

<body>
<div id="app">
    <h1>class的使用</h1>
    <div :class="classObj">
        我是class的div
    </div>

    <h1>style的使用</h1>
    <!--    <div style="background: darkcyan;font-size: 30px">-->
    <div :style="styleObj">
        我是style的div
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // class的字符串写法
            classStr: 'background_blue',
            // class的数组写法比较常用，因为类本身就是多个，用数组最合适
            classList: ['background_blue'],
            // class的对象写法
            classObj: {background_blue: true, size: false},

            // style的字符串写法
            styleStr: 'background: darkcyan;font-size: 30px',

            // style的数组写法
            // styleList: [{'background-color': 'green'}, {'font-size': '80px'}]
            // 如果是多个单词连接的形式，可以写成驼峰体格式，如下：
            styleList: [{backgroundColor: 'green'}, {fontSize: '60px'}],
            // style的对象写法
            styleObj: {backgroundColor: 'orange', fontSize: '60px'}
        }

    })
</script>
</html>

二、条件渲染

指令	释义
v-if	相当于：if
v-else	相当于：else
v-esle-if	相当于：else if

# 写在标签上，控制标签是否显示
    v-if='布尔值/运算完是布尔值'
    v-else-if='布尔值/运算完是布尔值'
    v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>

<body>
<div id="app">
    <h1>条件渲染</h1>
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80 && score<90">良好</p>
    <p v-else-if="score>=60 && score<80">及格</p>
    <p v-else>不及格</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 99,
        }

    })
</script>
</html>

三、列表渲染

# v-for：放在标签上，可以循环显示多个此标签

3.1 列表渲染之购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
    <style>
        .top {
            margin-top: 50px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="container-fluid">
        <div class="row top">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center" style="margin-bottom: 20px">
                    <button @click="handlerClick" class="btn btn-danger">点击加载购物车</button>
                </div>

                <div v-if="goodList.length>0">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>商品id</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList">
                            <td>{{good.id}}</td>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td>{{good.count}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div v-else>
                    啊哦~ 购物车里啥都没有 你个穷bi 试试点击上方按钮吧
                </div>

            </div>
        </div>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: []
        },
        methods: {
            handlerClick() {
                this.goodList = [
                    {id: 1, name: 'Threadripper 3990X', price: '29999元', count: 2},
                    {id: 2, name: 'Threadripper 3990X', price: '29999元', count: 2},
                    {id: 3, name: 'Threadripper 3990X', price: '29999元', count: 2},

                ]
            }
        }

    })
</script>
</html>

3.2 V-for遍历数组、对象、数字、字符串

# v-for 可以循环数组，数字，字符串，对象
	v-for="key in obj"
    	-如果是数组：key就是数组的一个个元素
        -如果是数字：key就是从1开始的一个个数字
        -如果是字符串：key就是一个个字符
        -如果是对象：key就是一个个value的值
	v-for="(key,value) in obj" 
		-如果是数组：key就是数组的一个个元素,value就是索引
        -如果是数字：key就是从1开始的一个个数字,value就是索引
        -如果是字符串：key就是一个个字符,value就是索引
        -如果是对象：key就是一个个value的值，value就是一个个key
        
        
        
 # 每次循环的标签上，一般都会带一个属性：      :key='值必须唯一'
	-key值得解释：为了加速虚拟dom的替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>

<body>
<div id="app">
    <h1>循环数字</h1>
    <ul>
        <li v-for="(i, a) in num">
            {{i}}-------------索引值{{a}}
        </li>
    </ul>

    <h1>循环数组</h1>
    <p v-for="(girl, a) in girls">我的第{{a}}任女友{{girl}}</p>


    <h1>循环字符串</h1>
    <ul>
        <li v-for="(i, a) in str">
            {{i}}-------------索引值{{a}}
        </li>
    </ul>

    <h1>循环对象</h1>
    <!--    // key在后面，value在前面-->
    <div v-for="(value, key) in obj">
        key值为：{{key}}, value值为：{{value}}

    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            num: 10, // 循环数字，从1开始，到10结束
            str: '大鹏一日同风起，扶摇直上九万里',   // 循环字符串循环的是字符
            obj: {name: 'jason', age: 18, hobby: ['running', 'basketball']},
            girls: ['刘亦菲', '迪丽热巴', '古力娜扎', '白梦妍']
        },

    })
</script>
</html>

3.3 数组的检测与更新

可以检测到变动的数组操作

push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转

检测不到变动的数组操作

filter()：过滤
concat()：追加另一个数组
slice()：
map()：

解决方法

// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(vm.arrayList, 0, 'Darker')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>

<body>
<div id="app">


    <h1>数组检测与更新</h1>
    <button @click="handlerClick">点我追加女生</button>
    <br>
    <button @click="handlerClick1">点我追加一批女生</button>
    <button @click="handlerClick4">点我修改数组页面变化</button>
    <p v-for="girl in girls">{{girl}}</p>

    <h1>对象的检测与更新</h1>
    <button @click="handlerClick2">点我追加身高</button>
    <button @click="handlerClick3">点我追加身高解决方法</button>
    <p v-for="(value, key) in obj">{{key}}---------{{value}}</p>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            girls: ['刘亦菲', '迪丽热巴', '古力娜扎', '白梦妍'],
            obj: {name: 'jason', age: 18}
        },
        methods: {
            handlerClick() {
                this.girls.push('美女1号')
            },
            handlerClick1() {
                var a = this.girls.concat(['美女66号', '美女88号', '美女99号'])
                console.log(a)
            },
            handlerClick2() {
                this.obj.heighe = '180'  // 页面无法正常显示信息
                console.log(this.obj)
            },
            handlerClick3() {
                Vue.set(this.obj, 'height', 180)  // 使用Vue内置方法解决
            },
            handlerClick4() {
                Vue.set(this.girls, 0, '杨幂')
            }
        }
    })
</script>
</html>

四、数据双向绑定

# input标签，v-model：数据双向绑定
	-使用 属性指令绑定 :value='变量'  是数据的单向绑定
    - v-model="name" ：数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>

<body>
<div id="app">


    <h1>数据双向绑定</h1>
    <p>username：<input type="text" v-model="name"></p>
    <p>password：<input type="password" v-model="password"></p>
    <button @click="handlerSubmit">用户注册</button>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
        },
        methods: {
            handlerSubmit() {
                console.log(this.name, this.password)
            }
        }

    })
</script>
</html>

五、事件处理

事件	释义
input	当输入框进行输入的时候触发的事件
change	当元素的值发生改变时触发的事件
blur	当输入框失去焦点的时候触发的事件

# 事件绑定 v-on:事件名='函数'---》@事件名='函数'
# input 也有很多事件
	-blur：失去焦点触发
    -change：发生变化触发
    -input：输入触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>

<body>
<div id="app">


    <h1>input事件处理</h1>
    <h2>blur</h2>
    <p><input type="text" v-model="username" @blur="handlerBlur">----------{{username}}</p>
    <h2>change</h2>
    <p><input type="text" v-model="username01" @change="handlerChange">----------{{username01}}</p>
    <h2>input</h2>
    <p><input type="text" v-model="username02" @input="handlerInput">----------{{username02}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            username01: '',
            username02: '',
        },
        methods: {
            handlerBlur() {
                console.log('失去焦点后触发了执行', this.username)
            },
            handlerChange() {
                console.log('数据值发生了变化触发执行', this.username01)
            },
            handlerInput() {
                console.log('输入数据时自动触发执行', this.username02)
            }
        }

    })
</script>
</html>

5.1 过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>

<body>
<div id="app">


    <h1>过滤案例</h1>
    <p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handlerSearch"></p>
    <ul>
        <li v-for="item in newList">{{item}}</li>
    </ul>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: [
                'a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'day', 'data', 'e', 'eye'
            ],
            newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'day', 'data', 'e', 'eye']
        },
        methods: {
            handlerSearch() {
                console.log('搜索的内容是:', this.search)
                // 复杂写法

                // var _this = this
                // this.dataList = this.dataList.filter(item => {
                //     console.log(this)
                //     // 判断this.search是否在item中，如果在则值保留，如果不在则返回false
                //     if (item.indexOf(this.search) >= 0) {
                //         return true
                //     } else {
                //         return false
                //     }
                // })

                // 简单写法
                this.newList = this.dataList.filter(item => item.indexOf(this.search) >= 0)


   			 }
    	}

    })

5.2 事件修饰符

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>

<body>
<div id="app">


    <h1>事件修饰符</h1>
    <h2>事件冒泡------通过事件修饰符stop 加在子控件上，阻止事件冒泡</h2>

    <ul @click="handlerUl">
        <li @click.stop="handlerClick">美女</li>
        <li @click.stop="handlerClick01">帅哥</li>
    </ul>


    <h2>事件冒泡------通过事件修饰符self(加在父控件上) 表示只处理自己的事件</h2>

    <ul @click.self="handlerUl">
        <li @click="handlerClick">美女</li>
        <li @click="handlerClick01">帅哥</li>
    </ul>

    <h3>阻止a标签跳转</h3>
    <a href="http://www.baidu.com" @click.prevent="handlerA">点我去百度</a>

    <h4>once只执行一次</h4>
    <button @click.once="handlerOnce">点我秒杀</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handlerUl() {
                console.log('点击了ul')

            },
            handlerClick() {
                console.log('点击了美女')

            },
            handlerClick01() {
                console.log('点击了帅哥')
            },
            handlerA() {
                console.log('点击了A')
            },
            handlerOnce() {
                console.log('点击了一次')
            }
        }


    })
</script>
</html>

5.3 按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: ''
        },
        methods: {
            handleUp(event) {
                console.log('回车键被按了')
                // if (event.code == 'Enter') {
                //     console.log('回车键被按了', event)
                // }
            }
        }

    })


</script>
</html>

5.4 箭头函数及语法补充

	// 箭头函数的作用： 1，简洁   2.箭头函数没有自己的this，它会用上一层的this 即window里的this

    // var f = function () {
    //     console.log('匿名函数的this', this)
    // }
    // f()
    //
    // var f1 = () => {
    //     console.log('执行了箭头函数的this', this)
    // }
    // f1()


    // var obj = {
    //     f: function () {
    //         console.log('匿名函数的this', this)
    //     },
    //     f1: () => {
    //         console.log('箭头函数的this', this)
    //     }
    // }
    // obj.f()
    // obj.f1()
    
    
    
    // 1.数组的过滤方法
    // var list = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'day', 'data', 'e', 'eye']
    // filter是数组内置的，需要传一个匿名函数，接收一个参数，会循环的从数组中取值，传入匿名函数，执行
    // 匿名函数返回布尔值，如果返回true，该值保留，反之则丢弃
    // l = list.filter(function (item) {
    //     console.log(item)
    //     return false
    // })
    // console.log(l)

    // 2.判断子字符串是否在字符串中
    // var s = 'jasonNb'
    // var a = 'a'
    // console.log(s.indexOf(a))

    // 3.es6模板字符串使用 ``  还有一种是对象的写法  以及箭头函数
    // var f=function () {
    //     console.log('执行了该语句')
    // }
    // 3.1 不带参数的箭头函数
    // var f = () => {
    //     console.log('执行了箭头函数')
    // }
    // f()
    // 3.2 带一个参数，且没有返回值的箭头函数
    //  var f = fusion (name) {
    //     console.log('执行了箭头函数', name)
    // }
    // f('jason')
    // var f = name => {
    //     console.log('执行了箭头函数', name)
    // }
    // f('jason')
    // 3.3 带多个参数，且没有返回值的箭头函数
    // var f = function (name, age) {
    //     console.log('执行了箭头函数', name, age)
    //
    // }
    // f('jason', 18)
    // var f = name, age => {
    //     console.log('执行了箭头函数', name, age)
    //
    // }
    // f('jason', 18)
    // 3.4 带一个参数，且有返回值，函数体只有一行的箭头函数
    // var f = function (name) {
    //     return name + 'NB'
    // }
    // f('jason')
    // var f = name => name + 'NB'
    // console.log(f('jason'))

原文地址：http://www.cnblogs.com/dy12138/p/16826200.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性