Vue3基础知识学习

Vue3

声明式渲染

使用模板语法

<div id="counter">
  Counter: {{ counter }}
</div>

创建vue应用并且挂载

const Counter = {
    data() {
        return {
            counter: 0
        }
    }
}

Vue.createApp(Counter).mount('#counter')

绑定属性

v-bind: attribute

简写

:attribute

事件监听

v-on: event

简写

@: event

双向数据绑定

v-model

条件与循环

条件：v-if="条件" v-else

循环：v-for: item in any[]

组件化应用构建

//创建组件
const todoItem = {
    template: '<li>123</li>'
}

//创建vue实例
const app = Vue.createApp({
    components: {
        todoItem
    }
})

app.mount(...)

在别的组件导入并且使用

<ol>
  <!-- 创建一个 todo-item 组件实例 -->
  <todo-item></todo-item>
</ol>

父传子

创建子组件

const TodoItem = {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
}

<ol>
  <!-- 创建一个 todo-item 组件实例 -->
  <todo-item :todo="传入值"></todo-item>
</ol>

根组件

把一个vue应用挂载到<div id="app"></div>

const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

生命周期

xxxx

Data Property

组件的data是一个函数，组件调用的时候执行并且返回一个对象，vue通过响应系统将其包裹起来，并且以$data的形式存储；

const app = Vue.createApp({
    data() {
        return {
            count: 3
        }
    }
})

const vm = app.mount('#app');

console.log(vm.$data.count); // 3

方法methods

Vue自动为methods绑定this，指向组件的实例

计算属性

<div>
	<p>
        {{ publicFunc }}
    </p>
    <p>
        {{ Func() }}
    </p>
</div>

Vue.createApp({
    data() {
        return {
            count: 0
        }
    },
    computed: {
        publicFunc() {
            return this.count > 0 ? 'yes' : 'no'
        }
    },
    methods: {
        Func() {
            return this.count > 0 ? 'yes' : 'no'
        }
    }
}).mount('#app')

计算属性和方法的区别就是计算属性跟响应依赖相关联，多次调用计算属性只要相关联的响应依赖没有发生改变的情况下就不会调用，函数则无论有无改变都会调用。

计算属性存取器

//...
computed: {
    fullName: {
        get() {
            return this.xxxx
        },
        set(newValue) {
            执行的方法
        }
    }
}

当我们对fullName的值修改的时候就会执行set方法

侦听器watch

xxxxx

class绑定

<div :class="{ active: isActive， text-danger: !isActive }">
    
</div>

active的类名是否存在取决于isActive

:class可以和普通的class共存

还有数组语法

<div :class="[activeclass, activeclass2]">
    
</div>

data: {
    return {
        activeclass: 'active',
        activeclass2: 'active2'
    }
}

组件上使用

创建一个组件

const app = Vue.createApp({})

app.component('my-component', {
    template: '<p class="foo"> </p> '
})

使用的时候添加class不会覆盖原有的class

<div>
    <my-component class="boo"></my-component>
</div>

渲染为

<div>
    <p class="foo boo">
        
    </p>
</div>