Vue 0_1项目实战

环境配置

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++