环境配置
npm install pnpm
pnpm create vue@latest
pnpm install
pnpm run dev
pnpm run build
v-指令
响应式DOM更新
<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 A/B/C
</div>v-on:[click]="doSomething"
v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px'} ,{ color: activeColor2, fontSize: fontSize2 + 'px']}] "
v-show="ok"
v-for="(item, index) in items"
v-for="(value, key, index) in jsonObject"
<input :value="text" @input="event => text = event.target.value"> 简化为 <input v-model="text">
<!-- currentTab 改变时组件也改变 -->
<component :is="tabs[currentTab]"></component>
<tr is="vue:blog-post-row"></tr>
Template属性值
import { ref } from 'vue'
export default {
// `setup` 是一个特殊的钩子,专门用于组合式 API。
components: {
ComponentA
},
props: ['title'],
emits: ['enlarge-text'], // v-on 的事件名称,都需要转换为相应等价的 kebab-case (短横线连字符) 形式
setup(props, ctx) {
const count = ref(0)
console.log(props.title) // 使用外部属性,只读,支持:title动态给
ctx.emit('enlarge-text') // 抛出事件
// 将 ref 暴露给模板
return {
count
}
}
}
<div>{ { count }}</div>
v-on:[click]="count++