首页 > 其他分享 >vue特殊属性指令,vue条件渲染,vue列表渲染,vue双向数据绑定,vue事件处理

vue特殊属性指令,vue条件渲染,vue列表渲染,vue双向数据绑定,vue事件处理

时间:2022-10-25 20:34:43浏览次数:67  
标签:事件处理 vue console log 渲染 数组 key var name

  • 特殊的属性指令style和class
  • 条件渲染

  • 列表渲染

    • v-for循环数组,字符串,数字,对象

    • 数组的检测与更新

  • 双向数据绑定

  • 事件处理

    • 过滤案例

    • 事件修饰符

    • 按键修饰符


特殊的属性指令style和class

基本使用

 

进阶使用

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

        .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-color: aquamarine;font-size: 50px">-->
    <div :style="styleObj">
        我是style,的div
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // class的字符串用法
            classStr: 'red',
            // class的数组写法,因为类本身可以放多个,用数组最合适
            classList: ['red'],
            // class的对象
            classObj: {red: true, size: false},

            // style 的字符串写法,以后改不好改
            styleStr: 'background-color: aquamarine;font-size: 50px',
            // style的数组写法
            // styleList: [{'background-color': 'green'}, {'font-size': '80px'}]
            //样式如果是多个单词用- 链接的形式可以写成驼峰
            styleList: [{backgroundColor: 'green'}, {fontSize: '80px'}],
            // style的对象写法
            styleObj: {backgroundColor: 'blue', fontSize: '40px'}
        }
    })


</script>
</html>

条件渲染

写在标签上,控制标签的显示与不显示

v-if='布尔值/运算完是布尔值'

v-else-if='布尔值/运算完是布尔值'

v-else


列表渲染

v-for:放在标签上,可以循环显示多个此标签

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

</head>
<body>
<div id="baby">
    <h1>列表渲染</h1>
    <button @click="press">点我加载图表</button>
    <div class="bs-example" data-example-id="striped-table" v-if="list.length>0">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>性别</th>
                <th>口头禅</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="i in list">
                <th scope="row">{{i.id}}</th>
                <td>{{i.name}}</td>
                <td>{{i.gender}}</td>
                <td>{{i.talk}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div v-else>
        怎么什么都没有啊
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#baby',
        data: {
            list: []
        },
        methods: {
            press() {
                this.list = [
                    {id: 1, name: '大司马', gender: '男', talk: '瓜皮'},
                    {id: 2, name: '周姐', gender: '女', talk: '盖亚'},
                    {id: 3, name: 'giao哥', gender: '未知', talk: 'giao'},
                ]
            }
        }

    })
</script>
</html>

             

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的替换

注意!Vue中:

  • 数组indexvalue反的
  • 对象keyvalue也是反的

数组的检测与更新

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

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="handleClick">点我追加女生</button>
    |
    <button @click="handleClick1">点我追加一批女生</button>|
    <button @click="handleClick4">点我修改数组页面变化</button>|
    <p v-for="girl in girls">{{girl}}</p>

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


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            girls: ['刘亦菲', '迪丽热巴', '杨超越', '刘诗诗'],
            obj: {'name': 'lqz', age: 19}
        },
        methods: {
            handleClick() {
                this.girls.push('美女1号')
            },
            handleClick1() {
                var a = this.girls.concat(['美女99号', '美女88号', '美女77号'])
                console.log(a)
            },
            handleClick2() {
                this.obj.height = '180'  // 监控不到变化
                console.log(this.obj)
            },
            handleClick3() {
               Vue.set(this.obj,'height',180)  // 监控到变化了
            },
            handleClick4(){
                Vue.set(this.girls,0,'sdasdfas')
            }
        }
    })


</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>用户名: <input type="text" v-model="name"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <button @click="handleSubmit">提交</button>{{err}}


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            err:''
        },
        methods: {
            handleSubmit() {
                console.log(this.name, this.password)
                this.err='用户名密码错误'
            }
        }

    })


</script>
</html>

事件处理

事件绑定 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="name1" @blur="handleBlur"> ---->{{name1}}</p>
    <h2>change</h2>
    <p><input type="text" v-model="name2" @change="handleChange"> ---->{{name2}}</p>
    <h2>input</h2>
    <p><input type="text" v-model="name3" @input="handleInput"> ---->{{name3}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: ''
        },
        methods: {
            handleBlur() {
                console.log('失去焦点了,触发了', this.name1)
            },
            handleChange() {
                console.log('发生变化,触发了', this.name2)
            },
            handleInput() {
                console.log('输入了内容,触发了', this.name3)
            }
        }

    })


</script>
</html>

过滤案例

vue内置函数filter

indexOf

箭头函数

var f = 函数名=>{}

<!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="handleSearch"></p>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: [
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],
            newdataList:[
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],
        },
        methods: {
            handleSearch() {
                console.log('搜索的内容是:', this.search)
                // var _this=this
                // 复杂写法
                // this.dataList=this.dataList.filter(item=>{
                //     console.log(this)
                //     // 判断this.search是否在item中,如果在保留,return true,如果不在返回false
                //     if (item.indexOf(this.search)>=0){
                //         return true
                //     }else {
                //         return  false
                //     }
                // })

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


    })


    // 1 补充:数组过滤方法,内置的
    // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs',
    //     'csrf',
    //     'd',
    //     'dddd',
    // ]
    // // filter数组内置的,需要传一个匿名函数,接受一个参数,会循环的从数组中取出值,传入匿名函数,执行
    // // 匿名函数返回true或false,如果返回true,该值保留,如果返回false该值丢弃
    // l = l.filter(function (item) {
    //     console.log('进来一个值:',item)
    //     return false
    // })
    // console.log(l)


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


    // 3  es6 模板字符串  ``   对象写法    箭头函数
    // var f=function (){
    //     console.log('打印了')
    // }
    //3.1 不带参数的箭头函数
    // var f = () => {
    //     console.log('打印了')
    // }

    // 3.2 带一个参数,没有返回值得箭头函数
    // var f = name=>{
    //     console.log('打印了', name)
    // }
    // 3.3 多个参数,没有返回值
    // var f = (name,age) => {
    //     console.log('打印了', name,age)
    // }
    // 3.4 带一个参数,有返回值,函数体只有一行

    // var f = function (name) {
    //     return name+'nb'
    // }
    //  var f = name=> name+'nb'

    // 有什么用? 1 简洁  2 箭头函数没有自己的this,会用上一层的this


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

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


</script>
</html>

事件修饰符

.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="handleUl">
        <li @click.stop="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>


    <h2>事件冒泡--通过 事件修饰符 self加在父控件上,只处理自己的事件</h2>
    <ul @click.self="handleUl">
        <li @click="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>

    <h3>阻止a标签跳转</h3>
    <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

    <h4>once只执行一次</h4>
    <button @click.once="handleOnce">点我秒杀</button>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleUl() {
                console.log('ul被点了')
            },
            handleMn() {
                console.log('美女被点了')
            },
            handleSg() {
                console.log('帅哥被点了')
            },
            handleA() {
                console.log('a被点了')
            },
            handleOnce() {
                console.log('恭喜你,秒到了')
            }
        }

    })


</script>
</html>

按键修饰符

<!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>

 

标签:事件处理,vue,console,log,渲染,数组,key,var,name
From: https://www.cnblogs.com/scx-xiaochun/p/16826204.html

相关文章

  • Vue学习-02
    一、style和class数据的绑定语法:属性名=js变量/js语法  :class=‘js变量、字符串、js数组’class:三目运算符、数组、对象{red:true}  :style=‘js变量、字符串、......
  • vue 与 脚手架版本
    vue与cli版本怎么选择卸载npmuninstall[<@scope>/]<pkg>[@<version>]...[--save-prod|--save-dev|--save-optional][--no-save]点击查看代码npmuninstallvue......
  • vue3+vite+ts 项目配置 @/路径
    vite.config.ts文件中前置条件下载types/node下面引入的path会用到npminstall@types/node--save-dev原因:path模块是node.js内置的功能,但是node.js本身并不支持ts,......
  • vue中使用[email protected],分页器pagination不显示
     在网上搜索里一通发现这个博主写的有用:原文地址:在vue项目使用swiper@6,解决分页器pagination不显示,导航navigation点击不跳转问题-阿piu~ต-博客园(cnblogs.com)问......
  • vue中引入静态图片
    vue+webpack中,可以使用requireimageList:[{url:require('../image/pig.png')}]vue+vite没有require方法//静态图片一般放在src/a......
  • 记录--从原理分析vue开发环境搭建的全部过程
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助平时大家开发vue项目的时候,相信大部分人都是使用vue-cli脚手架生成的项目架构,然后npmruninstall安装......
  • VueRouter 实现登录后跳转到之前相要访问的页面的简单示例
    简介该功能主要用于判定用户权限,在用户无权限时重定向至登录页,并在用户完成登录后,再定向至用户之前想要访问的路由;或者用户在任意路由点击登录时,登录成功后返回当前路由。......
  • Vue组件样式穿透
    前情Vue是目前主流的前端框架之一,我是Vue框架的忠实老用户,平时开发中如果再依赖个第三方组件库那样开发效率就会事半功倍。第三方组件库可以很大提高开发效率,但是叫会有......
  • # 一篇文章了解 threejs 在 vue 项目中的基本使用(未完结)
    一篇文章了解threejs在vue项目中的基本使用Three.js是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。为啥突......
  • vue中加载three.js的gltf模型
    一、开始引入three.js相关插件。首先利用淘宝镜像,操作命令为:cnpminstallthree//npminstallthree也行二、three.js中所有的控件插件,都可以在node_modules下......