vue3.0入门（三）

前言

• 最近在b站上学习了飞哥的vue教程
• 学习案例已上传，下载地址

class绑定

对象绑定

:class='{active:isActive}'  // 相当于class="active"
:class="'active'"  // 相当于class="active" ，这里绑定的是一个字符串
:class='classObject'  // 配合计算属性使用，绑定一个函数

Vue.createApp({
    data(){
        return {
            isActive: true
        }
    },
    computed: {
        classObject(){
            return{}
        }
    }
}).mount('dom节点')

数组语法绑定

.active{
    color: red;
}
.font{
    font-size: 20px;
}

:class='[activeClass, fontClass]'  // 绑定对应css
// 绑定三目运算，后者表示isFont为true则绑定(并上)后面的样式
:class='[isActive ? activeClass : "", isFont&&fontClass]'
:class='[{active: isActive}, fontClass]'  // 也可在数组中绑定对象

Vue.createApp({
    data(){
        return {
            isActive: true
            ,isFont: false
            ,activeClass: 'active'   // 绑定style
            ,fontClass: 'font'
        }
    }
}).mount('dom节点')

组件绑定class

• 单根组件绑定class，在组件上同样可使用数组语法绑定
• 多根组件绑定class，视图部分的组件需class绑定，脚本部分的模板使用:class='$attrs.class绑定的节点才起作用

<todo-item :class='[{active: isActive},fontClass]'></todo-item>
<my-component :class='[{active: isActive}]'></my-component>

const app = Vue.createApp({
    data(){
        return {
            isActive: true
            ,fontClass: 'font'
        }
    }
})

// 注册组件todo-item，模板中只有一个根节点元素是单根组件
app.component('todo-item', {
  template: `<li>这是文本</li>`
})

// 多根组件：模板中有多个元素节点的组件
app.component('my-component', {
  template: `<li :class='$attrs.class'>这是模板中li</li>
             <p>这是模板中p标签</p>`
})

const vm = app.mount('dom节点')

内联样式对象

:style='{color: colorStyle, font: fontStyle}'
:style='styleObject'  // 绑定一个样式对象
:style='[baseStyles, styleObject]'  // 在数组中绑定多个样式对象

Vue.createApp({
    data(){
        return {
            colorStyle: 'red'
            ,fontStyle: '24px'
            ,styleObject: {   // 样式对象
                color: 'red',
                fontSize: '13px'
            }
        }
    }
}).mount('dom节点')

列表渲染

<!-- v-if的优先级高于v-for，v-if在使用v-for的遍历对象时会报错，要想同时使用，需用template标签 -->
<ul>
    <template v-for="todo in todos">
        <!-- 显示所有要遍历的对象的id%2=0的对象名称 -->
        <li v-if='todo.id % 2== 0'>{{todo.name}}</li>
    </template>
</ul>

const vm = Vue.createApp({
    data(){
        return {
            todos: [
                {}，{}，{}  // 数组对象
            ]
        }
    }
}).mount('dom节点')

• 变更方法

vm.todos.push({id: 6, name: 'c++'})  // 例如push()可用于添加对象

• 替换数组

vm.todos = vm.todos.filter(item => item.id% 2==0)  // filter()用于过滤，item表示要遍历的对象

多事件处理

• 一个事件绑定多个方法

@click='one(1, $event), two($event)'  // 视图部分，同时绑定两个方法，参数$event表示事件状态

Vue.createApp({
    data(){
        return{}
    },
    methods: {
        one(id, e){
            console.log("id:", id, ",e:", e);
        },
        two(e){
            console.log("two:", e)
        }
    }
}).mount("dom节点")

表单输入绑定

• 单选框、复选框、下拉列表、修饰符绑定等，这里简单演示两个
• 更多详情可查看文档：https://v3.cn.vuejs.org/guide/forms.html

<h3>单个复选框，绑定boolean</h3>
<input type="checkbox" v-model='flag'>记住登录
<p>{{flag}}</p>
<h3>修饰符lazy，文本框失去焦点时解析</h3>
<input type="text" v-model.lazy='msg'>
{{msg}}

Vue.createApp({
    data(){
        return{
           flag: null
           ,msg: ''
        }
    }
}).mount("dom节点")