Vue初识

·  阅读 48

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第16天,点击查看活动详情

vue下载地址

cn.vuejs.org/v2/guide/in…

vue的引入

将下载的vue.js放到工程目录下的js目录

<script src="js/vue.js"></script>
复制代码

vue的使用

使用new Vue()来创建一个vue对象

里面传入对象参数, el对应的值为这个vue对象要管理的标签, data对应的值为vue对象要管理的数据

我们在输入框中修改数据, 在控制台中使用app.username, app.password来验证数据是否已经更改

<body>
    <div id="app">
        <input type="text" v-model="username">
        <br>
        <input type="password" v-model="password">
        <br>
        <span v-text="errMsg"></span>
        <br>
        <span>{{errMsg}}</span>
        <br>
      </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            username: 'shaosiming',
            password: '123456',
            errMsg: '用户名或密码错误'
        }
    })
</script>
复制代码

v-model数据绑定

双向绑定数据, 但是只适用于表单类型的标签, 如: input

如果是span这种非表单标签, 要使用v-text, 或者使用{{username}}

v-on事件监听

事件监听诸如: 获得焦点, 失去信息, 单击事件, 双击事件

v-on:click="方法名"绑定事件

也可以使用简写形式 @click="方法名"来绑定事件

当然绑定的方法要写法methods配置项里面

        <button v-on:click="click">click</button>
        <button @click="click2">click2</button>
        methods: {
            click() {
                alert('别点我了')
            },
            click2() {
                alert('别点我了2')
            },
        }
复制代码

事件冒泡

如果一个父标签有单击事件, 而父标签下的子标签也有自己的单击事件, 当我们点击子标签时, 控制台会打印输出两条语句, 也就是父标签和子标签的事件都调用了

        <div @click="parentClickMe">
            <button @click="childClickMe">click me</button>
        </div>

            childClickMe() {
                console.log('childClickMe');
            },
            parentClickMe() {
                console.log('parentClickMe');
            }
复制代码

使用.stop修饰符可阻止事件的冒泡, 也就是当我们点击子标签时, 就不再触发父标签的事件了

        <div @click="parentClickMe">
            <button @click.stop="childClickMe">click me</button>
        </div>
复制代码

使用.prevent修饰符, 阻止页面的跳转或提交, 适用于form标签和a标签

        <a href="https://www.baidu.com" @click.prevent="">跳转</a>

        <form action="xxx" @click.prevent="parentClickMe">
            <button @click="childClickMe">click me</button>
        </form>
复制代码

使用.capture修饰符, 设置当多个事件一起触发时的优先级

        <div @click.capture="parentClickMe">
            <button @click="childClickMe">click me</button>
        </div>
复制代码

.self修饰符, @click绑定事件, 默认就是这个修饰符

        <div @click.self="parentClickMe">
            <button @click="childClickMe">click me</button>
        </div>
复制代码

.once修饰符, 事件只会触发一次

        <div @click.once="parentClickMe">
            <button @click="childClickMe">click me</button>
        </div>
复制代码

v-for v-bind

v-for用来遍历data中定义的数组, 生成多个标签元素

v-bind用来进行属性绑定

        <select v-model="role">
            <option v-for="role in roleList" v-bind:value="role.value">{{role.value}}.{{role.label}}</option>
        </select>
        <select v-model="role">
            <option v-for="role, index in roleList" :value="role.value">{{index + 1}}.{{role.label}}</option>
        </select>
复制代码

vue中的组件

使用Vue.component来创建一个新的组件, 第一个参数为新组件的名字, 第二个参数为新的组件的配置项, 如data, methods等

在父组件中我们就可以使用新的组件名当标签名来使用就可以了

可以向子组件传递参数和自定义事件, 使用props来接收传递来过的参数, 使用this.$emit('event-name')来调用自定义事件

    <login-btn :username="username" :password="password" @login-click="login"/>

    // 定义一个名为 logn-btn 的新组件
    Vue.component('login-btn', {
        props: ['username', 'password'],
        methods: {
            click() {
                console.log(this.username, this.password);
                this.$emit('login-click')
            },
        },
        template: '<div><button @click="click" username="username" password="password">登录</button></div>'
    })
复制代码

当然我们也可以将js部分放入一个js文件中, 然后通过script标签引入即可

computed - 计算属性

在计算属性中可以写一些复杂的业务逻辑, 计算属性的值是通过data的基本数据和一些业务逻辑来计算出来的

    <div id="app">
        请输入商品价格 <input v-model="price" type="text"><br>
        请输入商品折扣
        <select v-model="discount">
            <option v-for="item in discounts" :value="item.value">{{item.label}}</option>
        </select><br>
        实际付款 <span>{{payment}}</span>
    </div>

    var app = new Vue({
        el: '#app',
        data: {
            price: 0,
            discount: 0.9,
            discounts: [
                {value: 0.9, label: '9折'},
                {value: 0.8, label: '8折'},
                {value: 0.7, label: '7折'},
            ]
        },
        computed: {
            payment() {
                var today = new Date();
                var month = today.getMonth() + 1;
                var day = today.getDate();
                console.log(month, day);
                if (month == 5 && day == 17 && this.price > 500) {
                    return this.price * this.discount - 50
                } else {
                    return this.price * this.discount
                }
            }
        },
    })
复制代码

watch

我们每点击一次按钮让进度增加10, 当然可以在increment()方法里实现全部的逻辑, 但是这样可能会让这个方法显得稍微有点臃肿, 我们可以借助监听属性来使用increment()方法变得更加简洁

        <h2>{{progressMsg}}{{progressValue}}</h2>
        <span class="progress" :style="spanStyle"></span>
        <br>
        <button @click="increment()">增加进度</button>

        methods: {
            increment() {
                if (this.progressValue < 100) {
                    this.progressValue += 10;
                }
            }
        },
        watch: {
            progressValue() {
                if (this.progressValue >= 100) {
                    return
                    this.progressMsg = '当前任务已完成'
                }

                this.spanStyle = {
                    width: this.progressValue + 'px',
                    background: "green"
                }
            }
        }
复制代码

filter

我们有时候在使用数据的时候, 可能不会直接使用原数据, 而是在此基础上进行一些加工处理, 再交给用户使用, 这个操作在本质上不属于业务逻辑的范畴, 而应该使用过滤器去处理. 如: 当我们使用时候的时候, 会将时间格式化多种多样的形式展示给用户

    Vue.filter('dateFormat2', (date)=>{
        return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate()
    })
复制代码

filters

            dateFormat(date) {
                return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate()
            }
复制代码

不管是局部过滤器还是全局过滤器, 在使用上没有区别

<h2>{{today | dateFormat2}}</h2>
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改