Vue2基础

Vue特性

1. 数据驱动视图

单向绑定，vue监听数据的变化，从而自动的重新渲染页面 页面依赖的数据---变化-->vue监听数据的变化---自动渲染-->页面结构

2. 双向数据绑定

在操作表单时，自动把用户填写的内容同步到数据中

基础

构建基本页面

<div id="app">{{ username }}</div>

const vm = new Vue({
    el: '#app',
    data: {
    username: 'xxx'
})

vue的指令

1. 内容渲染(v-text/{{}}/v-html)

<!-- v-text会重写p标签中的值：原有值被覆盖-->
<p v-text="username"></p>
{{}} // 插值表达式式(Mustache),解决v-text覆盖问题
v-html渲染html文本

2. 属性绑定(v-bind/:)
3. 事件绑定(v-on/@):响应函数声明在Vue实例的methods属性中

// 参数问题
1. 只有事件参数
<button @click="addCount">add</button>
methods: {
    addCount(e) {
        console.log(e.target.nodeName)
        this.count++
    }
}
2. 只有一般参数
<button @click="addCount(2, 'li')">addTwo</button>
methods: {
    addCount(num, name) {
        this.count += 2
        console.log(name)
    }
}
3. 事件参数+一般参数：$event
<button @click="addCount($event, 2, 'li')">addTwo</button>
methods: {
    addCount(e, num, name) {
        console.log(e.target)
        this.count += 2
        console.log(name)
    }
}

4. 双向绑定(v-model)

// v-model用于绑定的常见
text-->绑定value
checkbox/radio--->绑定checked，用于表示是否选中

5. 条件渲染((v-ifv-else-if/v-else)/v-show)

v-if是通过建立和移除DOM元素来控制显示，v-show则是通过控制display样式

6. 列表渲染(v-for：key值必须，涉及到diff算法) 问题

循环带有label标签的input时需要注意for必须绑定，类似下面这种会出现，无论点击哪个label触发的永远是第一个

<div v-for="(item, index) in items" :key="index">
    <input type="checkbox" v-model="item.use" id="q">
    <label for="q">111<label>
</div>

侦听器(watch) VS 计算属性

侦听器(watch)

监视data中的数据变化,从而针对数据的变化进行操作

// 1.函数格式
watch: {
    data(newVal, oldVal) {
        ...
    }，
    // 对象子属性
    'data.xxx'() {}
}

// 2.对象格式：可以设置配置项
data: {
    handler: () {
        ...
    },
    immediate: true, // 进入页面立即触发
    deep: true // 如果是对象，监听对象中的每个值，默认监只监听对象
}

应用：用户名是否被占用

data: {
    username: "" // 通过v-model绑定在input上
}
watch: {
    username(newVal) {
        // 通过Ajax向后端验证，是否被占用
    }
}

计算属性

通过一系列运算得到的一个属性值，定义时格式为方法，使用时为属性，可以用于模板结构中或methods方法,只有当计算属性的依赖项变化时，才会重新计算，不然使用缓存结果

<div id="app">
        <div>
            r:<input type="text" v-model="r">
            g:<input type="text" v-model="g">
            b:<input type="text" v-model="b">
        </div>
        <div :style="{width: '100px', height: '100px', backgroundColor: rgb}">
            {{ rgb }}
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                r: 0,
                g: 0,
                b: 0
            },
            computed: {
                rgb() {
                    return `rgb(${this.r},${this.g},${this.b})`
                }
            }
        })
    </script>