Vue模板语法

Vue的Api风格有两种

选项式

<template>
    <button @click="increment">Count is: {{ count }}</button>
</template>
<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++
        }
    },
    mounted() {
        console.log()
    }
}
</script>

组合式API

<template>
    <button @click="increment">Count is: {{ count }}</button>
</template>

<script setup>
import { ref , onMounted } from "vue";
const count = ref(0)
function increment() {
    count.value++
}
onMounted(() => {
    console.log();
})
</script>

Vue的项目工程结构

.vscode			-vscode工具的配置文件夹
node_modules	vue项目的运行依赖文件夹
public			资源文件夹(浏览器图标)
src				源码文件夹
.gitignore		git忽略文件
index.html		--- 入口HTML文件
package.json	信息描述文件
README .md		注释文件
vite.config.js	vue配置文件

模板语法

插值表达式

{{ count }}

v-bind 属性绑定

<template>
    <div v-bind:class="">属性绑定</div>
</template>
<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {}
}
</script>

注意：如果v-bind绑定的是null或undefined，那么该元素将会被移除

v-bind:class=""的简写形式：:class=""

布尔型 Attribute

布尔型 Attribute依据true/fasle值来决定attribute是否应该存在该元素上

<template>
    <button :disable="isButtonDisabled">Button</button>
</template>
<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {}
}
</script>

动态绑定多个值
只需要绑定一个js对象

<template>
    <div v-bind="objectOfAttrs"> 绑定多个属性 </div>
</template>
<script>
export default {
    data() {
        return {
            objectOfAttrs: {
            	id: 'container',
                class: 'wrapper'
            }
        }
    },
    methods: {}
}
</script>

列表渲染

可以使用v-for基于一个数组来渲染一个列表。v-for指令的值需要使用item in items形式的特殊语法

其中的items是源数据的数组，item是迭代后的每一项的别名

<template>
    <div v-for="item in hobbies"> {{item}} </div>
</template>
<script>
export default {
    data() {
        return {
            hobbies: ["唱","跳","rap","篮球"]
        }
    },
    methods: {}
}
</script>

渲染复杂的JSON数据

<template>
    <div v-for="item in result"> 
    	<div> {{item.id}} </div>
        <div> {{item.name}} </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            result: [{id: 1, name: '张三'},{id: 2, name: '李四'}]
        }
    },
    methods: {}
}
</script>

v-for也支持第二个参数表示当前项的位置索引

<template>
    <div v-for="(index,item) in result"> 
    	<div> {{index}}{{item.id}} </div>
        <div> {{item.name}} </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            result: [{id: 1, name: '张三'},{id: 2, name: '李四'}]
        }
    },
    methods: {}
}
</script>

in也可以使用of来代替

v-for可以遍历对象中的属性

<template>
    <div v-for="item in result"> {{item}} </div>
</template>
<script>
export default {
    data() {
        return {
            result: {
            	id: 1,
            	username: 'zhangsan',
            	password: '123456'
            }
        }
    },
    methods: {}
}
</script>

通过key管理状态

Vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项发生变化时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保他们在原本指定的索引位置上渲染。
为了给Vue一个提示，以便于它跟踪每个节点的标识，而重新排序现有的元素。

<template>
    <div v-for="(index,item) in hobbies" :index="index"> {{item}} </div>
</template>
<script>
export default {
    data() {
        return {
            hobbies: ["唱","跳","rap","篮球"]
        }
    },
    methods: {}
}
</script>

一般不直接使用index作为key，而是使用数据中的简单值来做key，如id

事件处理

v-on或者简写为@来监听DOM事件，并在事件触发时执行对应的JavaScript。

语法： v-on:click=“methodName” 或 @click=“handler”

事件处理器可以是内联事件处理器或者方法事件处理器

<template>
    <button @click="count++">Add 1</button>
    <p>count is: {{ count }}</p>
</template>
<script>
export default {
    data(){
        return {
        	count:0
        }
    }
}
</script>

<template>
    <button @click="addCount">Add 1</button>
    <p>count is: {{ count }}</p>
</template>
<script>
export default {
    data(){
        return {
        	count:0
        }
    },
    methods: {
        addCount(){
    		this.count+=1
    	}
    }
}
</script>

事件参数

事件参数可以获取event对象和通过事件传递数据

<template>
    <button @click="addCount">Add 1</button>
    <p>count is: {{ count }}</p>
</template>
<script>
export default {
    data(){
        return {
        	count:0
        }
    },
    methods: {
        addCount(e){
             console.log(e)
    		this.count+=1
    	}
    }
}
</script>

传递参数

<template>
    <button @click="addCount("Hello",$event)">Add 1</button>
    <p>count is: {{ count }}</p>
</template>
<script>
export default {
    data(){
        return {
        	count:0
        }
    },
    methods: {
        addCount(msg,e){
             console.log(msg)
            constle.log(e)
    		this.count+=1
    	}
    }
}
</script>

事件修饰符

在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的

为了简化这一操作，v-on提供了事件修饰符：（都是实现的通过event对象调用的方法）

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .once 事件只会被触发一次
• .enter 回车按键触发

@click.privent="clickHandler"

数组变化侦听

Vue能够侦听响应式数组的变更方法，并在他们被调用时触发相关的更新。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换数组

filter()、concat()、slice()这些方法不会更改原数组，而是返回一个新数组。

计算属性

<template>
    <p>{{ countMethod }}</p>
</template>
<script>
export default {
    data(){
        return {
        	count:[]
        }
    },
    //计算属性
    computed:{
    	countMethod(){
    		return this.count.length > 0 ? 'Yes' : 'No'
    	}
    }
}
</script>

绑定对象

<template>
	<div :style="{ color: activeColor, fontSize: fontSize + 'px'}">
        
    </div>
</template>

侦听器

<template>
    <p>{{ msg }}</p>
</template>
<script>
export default {
    data(){
        return {
        	msg:"你好"
        }
    },
    //侦听器对象
    watch: {
    	// 函数名必须于侦听的数据对象保持一致
    	msg(newValue,oldValue) {
    		console.log(newValue,oldValue);
    	}
    }
}
</script>

表单输入绑定

v-model 双向绑定

<template>
    <input type="text" v-model="password">
	<p>{{password}}</p>
	<input type="checkbox" id="checkbox" v-model="checkbox" />
	<label for="checkbox">{{ checked }}</label>
</template>
<script>
export default {
    data() {
        return {
            password: "",
            checkbox: true
        }
    }
}
</script>

v-model的修饰符

.lazy

默认会在每次input事件后更新数据。使用lazy在每次change事件后更新数据

.number

.trim

模板引用

• 内容改变使用插值表达式

• 属性改变使用v-bind：

• 事件使用:v-on:click @click

虽然Vue的声明性渲染模型抽象了大部分的DOM的直接操作，如要访问底层DOM元素。

要实现这点，要使用特殊的ref属性

挂载结束后引用会暴露在this.$refs之上

<template>
    <div ref="container" class="container">{{ content }}</div>
	<button @click="getElementHandle"></button>
</template>
<script>
export default {
    data() {
        return {
            content: ""
        }
    },
    methods: {
        getElementHandle(){
            console.log(this.$refs.container)
            
        }
    }
}
</script>