typora/note/前端/vue3/vue语法.md

动态绑定

<script>
export default{
  data(){
    return {
      dynamicClass: "dyclass",
      msg: "Hello V-Bind",
      buttonDisabled: true,
      bindObjects: {
        id: 1,
        class: "dyclass"
      }
    }
  }
}
</script>

<template>
  <h3>动态绑定</h3>
  <!-- 动态绑定与简写 -->
  <div :class="dynamicClass" v-bind:title="msg">{{ msg }}</div>
  <!-- 动态绑定布尔值 -->
  <button :disabled="buttonDisabled">Button</button>
  <!-- 以属性的方式动态绑定多个值-->
  <div v-bind="bindObjects">动态绑定</div>
</template>

<style>
.dyclass {
  font-size: 50px;
  color: red;
}
</style>

条件渲染

• v-if：只有条件值为v-if的时候才会渲染
• v-else
• v-else-if
• v-show：每次都会渲染，v-show只会更改css的display属性

<script>
export default {
  data() {
    return {
      flag: false,
      type: "B"
    }
  }
}
</script>

<template>
  <h3>条件渲染</h3>
  <div v-if="flag">能看见我吗</div>
  <div v-else>那你还是看看我吧</div>
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else-if="type === 'C'">C</div>
  <div v-else>Not ABC</div>

  <!-- v-show -->
  <div v-show="flag">v-show</div>
</template>

列表渲染

• 简单数据

<script>
export default {
  data() {
    return {
      names: ["Sun", "Li", "Zhang"]
    }
  }
}
</script>

<template>
  <h3>列表渲染</h3>
  <div>
    <p v-for="(name, index) in names">
      {{ name }}-{{ index }}
    </p>
  </div>
</template>

• 复杂数据

<script>
export default {
  data() {
    return {
      names: [{
        "id": 1,
        "name": "Sun",
        "avatar": "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
      },
      {
        "id": 2,
        "name": "Li",
        "avatar": "https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF",
      },
      {
        "id": 3,
        "name": "Zhang",
        "avatar": "https://t7.baidu.com/it/u=2405382010,1555992666&fm=193&f=GIF",
      }]
    }
  }
}
</script>

<template>
  <h3>列表渲染</h3>
  <div v-for="name of names">
    <p>{{ name.id }} - {{ name.name }}</p>
  </div>
  <div v-for="name of names">
    <p>{{ name.id }} - {{ name.name }}</p>
    <img :src="name.avatar" alt="" width="10%">
  </div>
</template>

• 遍历一个对象的所有属性

<script>
export default {
  data() {
    return {
      userInfo: {
        id: 1,
        name: "Sun",
        avatar: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF"
      }
    }
  }
}
</script>

<template>
  <h3>列表渲染一个对象的所有属性</h3>
  <p v-for="item in userInfo">{{ item }}</p>
  <p v-for="(item, key, index) in userInfo">
    {{ item }} - {{ key }} - {{ index }}
  </p>
</template>

事件处理

• v-on
• 简写:on 或@
• 内联事件处理器

<template>
    <div>
        <button v-on:click="count++">按钮</button>
        {{ count }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        }
    }
}
</script>

• 方法事件处理器

<template>
    <div>
        <button v-for="(name, index) in names" v-on:click="clickName($event, name)">{{ name }} - {{ index }}</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            names: ["Sun", "Li", "Zhang"]
        }
    },

    methods: {
        clickName(e, name) {
            console.log(name)
            console.log(e)
        }
    }
}
</script>

事件修饰符

<template>
    <div>
        <a v-on:click="clickHandleByJS" href="https://www.baidu.com">访问百度</a>
        <br>
        <a v-on:click.prevent="clickHandleByVUE" href="https://www.baidu.com">访问百度</a>
    </div>
</template>

<script>
export default {
    methods: {
        clickHandleByJS(e) {
            e.preventDefault()
            console.log("点击")
        },

        clickHandleByVUE(e) {
            console.log("点击vue")
        }
    }
}
</script>

数组动态监听

• 数组调用以下方法是，会动态的更新循环列表

• push

• pop

• shift

• unshift

• splice

• sort

• reverse

<template>
    <div>
        <h3>数组动态监听</h3>
        <button @click="clickHandle">数组监听reverse</button>
        <ul>
            <li v-for="(name, index) in names" :key="index">{{ name }} - {{ index }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            names: ["Sun", "Li", "Zhang"]
        }
    },

    methods: {
        clickHandle() {
            this.names.reverse()
        }
    }
}
</script>

计算属性

• 计算属性会基于其响应式依赖被缓存，一个计算属性只会在其响应式依赖更新时重新计算

<template>
    <div>
        <h3>计算属性</h3>
        <p>{{ info.title }}</p>
        <p>{{ info.names.length > 0 ? "yes" : "no" }}</p>
        <p>{{ nameLengthGtZero }}</p>
        <p>{{ nameLengthGtZero }}</p>
        <p>{{ nameLengthGtZero }}</p>
    </div>
</template>
<script>
export default {
    data(){
        return {
            info: {
                names: ["sun", "li", "zhang"],
                title: "this is a title"
            }
        }
    },
    computed: {
        nameLengthGtZero() {
            console.log("computed run")
            return this.info.names.length > 0 ? "yes" : "no"
        }
    }
}
</script>

侦听器

<template>
    <div>
        <h3>监听器</h3>
        <p>{{ msg }}</p>
        <button @click="updateMessage">修改msg</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: "hello"
        }
    },
    methods: {
        updateMessage() {
            this.msg = "world"
        }
    },
    watch: {
        // 函数名必须与侦听的对象名保持一致
        msg(newValue, oldValue){
            // newValue 新值
            // oldValue 旧值
            console.log(newValue, oldValue);
        }
    }
}
</script>

表单输入绑定

<template>
    <div>
        <h3>表单输入绑定</h3>
        <form action="">
            <input type="text" v-model.lazy="message">
            <p>{{ message }}</p>
        </form>
    </div>
</template>
<script>
 export default {
    data(){
        return {
            message: ""
        }
    }
 }
</script>

• 修饰符
  • lazy：取消每次 input 事件后更新数据，改为在每次 change 事件后更新数据
  • trim：去除空格
  • number: 转为数字

模板引用

• 获取DOM

<template>
    <div ref="container" class="container"> {{ className }}</div>
    <button @click="getDivRef">加载div——dom</button>
</template>
<script>
export default {
    data() {
        return {
            className: "容器"
        }
    },
    methods: {
        getDivRef() {
            console.log(this.$refs.container)
            this.$refs.container.innerHTML = "啊哈"
        }
    }
}
</script>

组件传递数据

• props
• 只能父组件向子组件传递数据，不能反向传递
• 子组件

<template>
    <p>{{ title }}</p>
    <p>{{ age }}</p>
</template>
<script>
export default {
    data (){
        return {}
    },
    props: ["title", "age"]
}
</script>

• 父组件

<template>
    <h3>Parent</h3>
    <p>静态数据传递</p>
    <Child title="传递title" age="20"/>

    <p>动态数据传递</p>
    <Child :title = "message" :age="age"/>
    <button @click="updateDynamicProps">点击修改动态传递数据</button>
</template>
<script>
import Child from "./Child.vue"
export default {
    data() {
        return {
            message: "动态数据传递",
            age: 20
        }
    },
    components: {
        Child
    },
    methods :{
        updateDynamicProps() {
            this.message = "动态数据更新"
            this.age = 30
        }
    }
}
</script>
<style scoped>
</style>