前端培训丁鹿学堂：每天五分钟，轻松入门vue3（三）

vue中的数据使用

vue中的数据都在data函数里。页面上通过双大括号去使用数据。{{data}}

 <span :id="dataId">你好，{{name}}</span>
1

vue中的组件的创建和使用

通过app.component方法可以创建一个组件。组件里面也有data和template等一些属性。相当于一个独立的完整个体。下面的组件名字就是 zl

app.component('zl',{
    data(){
        return {
            name:'zhsngsan2'
        }
    },
    template:`
      <div style="background:red">{{name}}</div>
    `
})
1
2
3
4
5
6
7
8
9
10

使用：只需要在模版中使用html标签一样使用组件名就好了。

const app = Vue.createApp({
    data(){
        return {
            name:'zhangsan'
        }
    },
    template:`
        <div>你好我是vue组件</div>
        <zl/>
       
    `
})
1
2
3
4
5
6
7
8
9
10
11
12

组件可以重复使用。所以我们以后开发会大量写组件，应用组件。

我们开发页面，就是把页面不同的区域划分成不同的组件去开发。

vue中的app

app就是应用，是由vue对象通过createApp方法创建的对象。我们开发vue就是操作这个对象，他会挂载到页面对应的id容器上，进行各种展示效果给用户使用。

createApp方法里第一个参数是一个对象，里面有很多配置项。

data(){} 函数返回的又是一个对象，是vue使用的数据

template是一个模版字符串，里面是vue渲染到页面的html

动态绑定属性和指令

vue中的属性比如id，class类名，都是可以动态绑定的。语法是v-bind：也可以简写成：id，就是去掉v-bind保留冒号

<span :id="dataId">你好，{{name}}</span>
1

指令：vue中的指令就是v-开头的一些特殊属性。用来控制dom的渲染。常用指令：

v-show=“true” 用来控制dom的显示和隐藏

v-if 跟v-show的效果一样，只是他完全是移除了dom

v-for 循环dom，可以通过循环生成多个dom

v-model 和input配合，进行数据的双向绑定

以上就是vue的一些基础概念，指令，数据绑定的小知识，希望对你有帮助~