侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论
vue

vue中的指令和组件化

woku
2022-03-07 / 0 评论 / 0 点赞 / 70 阅读 / 4,007 字

声明式渲染

vue的核心是通过模板语法将数据渲染到DOM上,在原生开发中我们经常需要自己去操作Dom,使用声明式渲染的方式可以让我们只关注业务逻辑的开发,而不用手动的去更新DOM

vue将数据和DOM进行关联,并建立响应式关联(数据改变,视图更新)

简单的例子:

    <div id="app">
        <div class="home">{{ msg }}</div>
    </div>
    <script>
        const Home = {
            data() {
                return {
                    msg: 'hellow Vue3'
                }
            }
        }
        const { createApp } = Vue
        createApp(Home).mount('#app')
    </script>
  • 逻辑结构 Home ,是一个对象,里面有一个msg的data数据
  • 通过mount方法挂载在id为app的元素内,#app里面的内容就是模板。
  • 数据和DOM已经建立了关联
  • 渲染DOM,将模板中的 {{msg}} 渲染成hellow vue3

{{}}这种是插值表达式

v-bind绑定

使用v-bind可以动态的绑定元素属性

    <div id="app">
        <div class="home" v-bind:data-msg="msg">{{ msg }}</div>
    </div>

data-msg是元素的一个属性,如果属性值要获取vue中的数据,使用v-bind(简写是 :), 引号内部是表达式,vue会对它进行解析。

如果不使用v-bind,直接使用data-msg="msg", 那么这个msg就当做字符串看待。

v-on指令

v-on指令是事件监听器,比如click点击事件,mousemove鼠标移动事件等等。

在vue中使用v-on:click 来监听点击事件,简写@click

view视图部分:

    <div id="app">
        <div class="home" v-bind:data-msg="msg">{{ msg }}</div>
        <!-- 简写 -->
        <div class="home" :data-msg="msg">{{ msg }}</div>
        <div class="home" v-on:click="clickHandle">{{ msg }}</div>
        <!-- 简写 -->
        <div class="home" @click="clickHandle">{{ msg }}</div>
    </div>

逻辑部分:

    <script>
        const Home = {
            data() {
                return {
                    msg: 'hellow Vue3'
                }
            },
            methods: {
                clickHandle() {
                    console.log('我被点击啦')
                }
            }
        }
        const { createApp } = Vue
        createApp(Home).mount('#app')
    </script>

v-if和v-for

  • v-if指令来控制元素是否要渲染显示

  • v-for用来循环数据渲染列表

组件化

组件化的核心:组件系统

利用了ES模块化思想来构建组件系统,一个组件相当于是一个模块,可以将一个页面拆分成不同的组件,通过ES6的导入和导出将各个组件组合到一起,然后viewModel将整个组件渲染成DOM树。

这种组件化方式的优势在于:

  • 小型化:每个页面都拆分成不同的小单元
  • 独立化:每个组件尽可能的都独立开发
  • 预先定义:提前将组件定义好,需要使用的时候直接导入
  • 可配置:组件可以接收配置的数据,让组件更灵活,功能更强大。
  • 可复用:一个组件可以在多处使用

一个组件的抽离,并不单单只关注其可复用性,有时候组件确实是不需要复用的,组件的可复用性是需要适当考量的。
组件最大的作用是独立开发,可配置,提高可维护性和扩展性。

举例:todoList

<body>
    <div id="app">
        <div class="todo-list">
            <todo-form @add-todo="addTodo"></todo-form>
            <ul>
                <todo-item v-for="item in todoList" :data="item"></todo-item>
            </ul>
        </div>
    </div>
    <script>
        const todoList = {
            data() {
                return {
                    todoList: [{
                        id: 1,
                        title: '学习JS'
                    }, {
                        id: 2,
                        title: '学习Vue'
                    }]
                }
            },
            methods: {
                addTodo(value) {
                    this.todoList.push({
                        id: new Date().getTime(),
                        title: value
                    })
                }
            }
        }
       const { createApp } = Vue
       const app = createApp(todoList)
       app.component('todo-form', {
            data() {
                return {
                    inputVal: ''
                }
            },
            template: `
              <input v-model='inputVal' type="text" />
              <button @click="addTodo">增加</button>
            `,
            methods: {
                addTodo() {
                    this.$emit('add-todo', this.inputVal)
                }
            }
        })
        app.component('todo-item', {
            props: {
                data: {
                    type: Object,
                    default: () => {
                        return {}
                    }
                }
            },
            template: `
               <li>
                 {{data.title}}
               </li>
            `
        })
        app.mount('#app')
    </script>
</body>

上面的案例中,将功能拆分成了todoList组件,里面放初始化列表数据,做增加数据的操作

拆分了todo-form组件,专门负责表单数据的输入与提交

拆分了todo-item组件, 专门负责渲染列表数据


分工独立

通过props来实现可配置

好维护,每个组件有每个组件单独的逻辑。

应用实例,根组件和组件实例

应用实例

通过createApp创建一个实例,返回的是一个应用实例。

    <script>
        let app = Vue.createApp({})
        console.log(app)
    </script>

这个应用实例可以调用component来注册全局组件,调用directive来注册全局指令。

        let app = Vue.createApp({})
        // 注册全局组件
        app.component('my-header', {
            template: '<h1>我是header</h1>'
        })

应用实例暴露的大多数方法都会返回该同一实例,允许链式

        const app = Vue.createApp({})
        const app2 = app.component('my-header', {
            template: '<h1>我是header</h1>'
        })
        console.log(app === app2)  // true

链式起来就是:

        Vue.createApp({}).component('my-header', {            template: '<h1>我是header</h1>'        }).directive('my-focus', {}).use()

根组件

使用createAPP创建应用实例时候,需要传一个根组件对象,至少是一个{}(空对象),这样才能形成一颗完整的组件树。

        // 根组件        const rootComponent = {                    }        Vue.createApp(rootComponent).mount('#app')

此时应用实例通过mount挂载到id为app的元素上,这个元素称为根元素,vue解析完毕的DOM结构要放在#app这个根元素里。

调用mount返回的是根组件。

组件实例

每一个组件都有自己的组件实例

一个应用内的所有组件都共享一个应用实例

无论是根组件还是组件实例,配置选项和组件行为都是一样的

    <script>        const myResult = {            props: ['a', 'b'],            data() {                return {                    total: 0                }            },            mounted() {                this.total = this.a + this.b            },            template: '<div>{{total}}</div>'        }        // 根组件        const rootComponent = {            components: {                myResult            },            data() {                return {                    a: 1,                    b: 2                }            },            template: `<my-result :a="a" :b="b"></my-result>`        }        const vm = Vue.createApp(rootComponent).mount('#app')        console.log(vm)      </script>
0

评论区