vue3快速入门

一. Vite 和 创建项目

用来代替vue cli的新工具，官方推荐

创建新项目只需要一行命令 npm init vue@latest

二. 语法

1.模板语法

文本插值

<span>{{msg}}</span>

原始html

上例中的msg不能为html代码，会被当成纯文本，要解析为html代码，需使用v-html，v-html的值会替换原来的div元素包裹的内容。

<template>
  <header>
    <div>{{msg}}</div>
    <div id="dv" v-html="msg"></div>
  </header>
</template>
<script>
export default {
  data(){
    return {
      msg:`<div class='dvcls'><a href='http://www.baidu.com'>链接</a></div>`//
    }
  }
}
</script>

v-html所在的div还是会存在，不可再包裹别的内容，否则报错，如
<div id="dv" v-html="msg">内容。。。</div>

Attribute 绑定

属性绑定

• v-bind 用于绑定 HTML attributes
  • 绑定id:

    <div v-bind:id='myid'></div> 
    

    简写,v-bind可以省略

    <div :id='myid'></div> 
    

  • 动态绑定多个属性

    <template>
    <header>
        <div>{{msg}}</div>
        <div id="dv" v-html="msg"></div>
        <div v-bind="myobj">myobj</div>
    </header>
    </template>
    <script>
    export default {
    data(){
        return {
        msg:`<div class='dvcls'><a href='http://www.baidu.com'>链接</a></div>`,
        myobj:{
            id:'myid',
            class:'myclass'
        }
        }
    }
    }
    </script>
    

    

使用javascript表达式

<template>
<header>
    <div>{{count+1}}</div>
</header>
</template>
<script>
export default {
data(){
    return {
    count:10
    }
}
}
</script>

指令

指带有v-的特殊attribute

例如：v-bind,v-html,v-on,v-if,等等

2. 响应式基础

<template>
  <header>
    <div>{{ count }}</div>
  </header>
</template>
<script>
export default {
  data() {
    return {
      count: 10
    }
  },
  mounted() {
    this.count = this.count + 10 //此时div里的值也会同时+10
  }
}
</script>

3. 计算属性

<template>
  <header>
    <div>{{ count }}</div>
    <div>{{ cnt2 }}</div>
  </header>
</template>
<script>
export default {
  data() {
    return {
      count: 10
    }
  },
  mounted() {
    this.count = this.count + 1
  },
  computed:{
    cnt2(){
      return this.count * 2;
    }
  }
}
</script>

4. 类与样式绑定

Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

5. 条件渲染

v-if,v-else,v-else-if,v-show

6. 列表渲染

v-for

• 数组
  • v-for='item in list'
  • v-for='(item,index) in list'
• 对象
  • v-for='item in list'
  • v-for='(item,key) in list'
  • v-for='(item,key,index) in list'
• key
  • v-for='item in list' :key='item.id'

7. 事件处理

• 点击事件 @click='fun'
• 修饰符 @click.left='fun'

8. 表单输入

v-model

9. 生命周期

10. 侦听器

watch，this.$watch()

11. 模板引用

ref,this.$refs.

12. 组件基础

props,$emit,<slot />