Vue介绍

最新推荐文章于 2024-06-01 15:46:07 发布

GG_Bonin

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量275

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript html

本文链接：https://blog.csdn.net/weixin_52596593/article/details/127513540

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

style和class

数据的绑定

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

$\bullet$ :class='js变量、字符串、js数组'

class：三目运算符、数组、对象{red:true}

$\bullet$ :style='js变量、字符串、js数组'

style：三目运算符、数组[{backgreound:'red'},]、对象{background:'red'}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .red{
            background-color: red;
        }
       .size{
           font-size: 40px;
       }
    </style>
</head>
<body>
    <div id="app">
        <h1>class的使用</h1>
        <div :class="classStr">
            我是class的字符串方式
        </div>
        <div :class="classObj">
            我是class的数组方式
        </div>
        <h1>style的使用</h1>
        <div :style="styleList">
            我是style的div
        </div>
        <div :style="styleObj">
            我是style的Obj
        </div>
    </div>

</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            // class放一个是字符串放两个是数组
            classStr:'red',
            classObj:{red:true,size:false},
            // style如果是多个单词用-链接的可以写成驼峰
            styleList:[{backgroundColor:'red'},{fontSize:'60px'}]
            // style对象的写法
            styleObj:{backgroundColor:'red',fontSize:'60px'}
        }
    })
</script>
</html>

拓展知识：

vm.classObj.pop()：删除数组最后1个元素并返回

vm.classObj.push()：从数组尾部添加1个元素

条件渲染

写在标签上根据条件渲染一块内容，通过表达式返回的值true或false控制标签的显示与不显示

$\bullet$ v-if：指令的表达式返回布尔值，true时才会渲染

$\bullet$ v-else-if：指令的表达式返回布尔值，true时才会渲染

$\bullet$ v-else：表示v-if的else块，v-else元素必须紧跟在带v-if或v-else-if的元素后面不然不会被识别
<!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>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80 && score<90">良好</div>
    <div v-else-if="score>=60 && score<80">及格</div>
    <div v-else>不及格</div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 98
        }
    })


</script>
</html>

列表渲染

v-for：放在标签上，可以循环显示多个此标签，可以循环数组、数字、字符串、对象

$\bullet$ v-for="item in obj"

- 如果是数组：item就是数组的一个个元素

- 如果是数字：item就是从1开始的一个个数字

- 如果是字符串：item就是一个个字符

- 如果是对象：item就是一个个value的值

$\bullet$ v-for="(item,num) in obj"

- 如果是数组：item就是数组的一个个元素，num就是索引

- 如果是数字：item就是从1开始的一个个数字，num就是索引

- 如果是字符串：item就是一个个字符，num就是索引

- 如果是对象：item就是一个个value的值，num就是一个个key

<!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">
    <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: 30px">
                    <button @click="handleClick" class="btn btn-danger">加载购物车</button>
                </div>

                <div v-if="goodList.length>0">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品id号</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList" :key="good.id">
                            <th>{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td>{{good.count}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    购物车空空如何
                </div>


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

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: []
        },
        methods: {
            handleClick() {
                // 假设去后端加载的数据
                this.goodList = [{id: 1, name: '小汽车', price: '29999元', count: 1},
                    {id: 2, name: '钢笔', price: '9元', count: 2},
                    {id: 3, name: '铅笔', price: '4元', count: 10},
                    {id: 4, name: '苹果', price: '2元', count: 3},]
            }
        }
    })


</script>
</html>

双向数据绑定

用v-model实现数据的双向绑定，主要用于父子组件中，其中可作用于表单元素，如input、textarea、select

<!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>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
        },
        methods: {
            handleSubmit() {
                console.log(this.name, this.password)
            }
        }

    })


</script>
</html>

事件处理

知识补充

$\bullet$ 内置数组过滤方法

- filter：数组内置的需要传一个匿名函数接受一个参数，会循环的从数组中取出值传入匿名函数执行；匿名函数返回true或false，返回true该值保留，返回false该值丢弃

var a = ['a','abca','and','bay','be','cs','cf','db']
a = a.filter(function(item){
    console.log(item)
    return false
})
console.log(a)

$\bullet$ 判断一个字符是否在字符串中

var a = 'hello world'
var b = 'o'
console.log(a.indexOf(b)>=0)

$\bullet$ 箭头函数

- 不带参数的箭头函数

var f =() =>{
    console.log('hello')
}

- 带参数没有返回值的箭头函数

// 带一个参数，没有返回值
var f = name=>{
    console.log('hello',name)
}
// 带多个参数，没有返回值
var f = (name,age)=>{
    console.log('hello',name,age)
}

- 带参数有返回值

// 带一个参数，有返回值
var f = name=> name+'nb'

ps：使用箭头函数可以使代码简介，箭头函数没有自己的this会用上一层的this

// 当上一层没有定义的时候，箭头函数this为windows
var f = () => {
    console.log('箭头函数的this'，this)
}

$\bullet$ 事件处理方法

事件绑定语法： 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>

过滤案例

- 通过上述补充知识点，我们可以写一个类似于搜索引擎中当你输入文字时下方会根据你输入的文字进行过滤推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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','and','aout','db','bey','asddfd','safdc',],
            newdataList:['a','and','aout','db','bey','asddfd','safdc',],
        },
        methods: {
            handleSearch() {
                console.log('搜索的内容是：', this.search)
                this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }

    })
</script>
</html>

事件修饰符

$\bullet$ .stop：只处理自己的事件，不向父控件冒泡

$\bullet$ .self：只处理自己的事件，子控件冒泡的事件不处理

$\bullet$ .prevent：阻止a链接的跳转

$\bullet$ .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>

按键修饰符

-在日常中我们需要通过输入框来搜索一些内容时，当输入数据后都会下意识的通过按Enter键来执行下一步，而键盘装饰器就可以来完整这个操作定义每一个键盘的执行任务

Vue中常用的按键修饰符
键盘修饰符别名:
         $\circ$ 回车 => enter键
         $\circ$ 删除 => delete键
         $\circ$ 退回 => esc
         $\circ$ 空格键 => space
         $\circ$ 换行 => tab (特殊键, 必须配合keydown 去使用)
         $\circ$ 上 => up 键
         $\circ$ 下 => dpwn 键
         $\circ$ 左 => left 键
         $\circ$ 右 => right 键

<!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) {
                if (event.code == 'Enter') {
                    console.log('回车键被案例', event)
                }
            }
        }

    })


</script>
</html>

GG_Bonin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue介绍

class='js变量、字符串、js数组'class：三目运算符、数组、对象{red:true}:style='js变量、字符串、js数组'style：三目运算符、数组[{backgreound:'red'},]、对象{background:'red'}
复制链接

扫一扫