vue.js - 入门学习教程

作者: 红薯爱帅 | 来源:发表于2018-05-06 19:34 被阅读17次

1. 概述

相比另外两个JaveScript Frameworks（Angular.js by Google、React.js by Facebook），Vue.js高性能、更灵活、可维护性强。最关键的，Vue.js是国人设计开发的。
本文参考慕课的vue学习视频，整理总结完成。

javaScript框架(库)汇总
https://blog.csdn.net/Acmen_007/article/details/53020789

2. 入门学习

概念介绍

实例 - new Vue({})
挂载点 - Vue示例的el值对应的dom节点，例如div
模板 - 可以在dom节点中写，也可以在Vue实例中填写

备注：一般将模板写入到挂载点内部，便于代码走读

<body>
    <div id="root"></div>

    <script>
        new Vue({
            el: '#root',
            template: '<h1>{{msg}}</h1>',
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>

数据展示和方法绑定

{{msg}}, 插值表达式，显示msg数据
v-text='msg', 显示msg值，纯文本信息
v-html='msg', 显示msg值，支持html标签
v-on:click='handleClick', 绑定事件，对应vue实例的methods.handleClick

备注：v-on可以缩写为@

<body>
    <div id="root">
        <h1 v-on:click='handleClick'>{{content}}</h1>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                content: 'hello'
            },
            methods: {
                handleClick: function() {
                    this.content='world'
                }
            }
        })
    </script>
</body>

dom属性绑定

v-bind:title='"aa " + title', title是dom节点属性，此处绑定到vue实例的title变量，注意，这里可以写js代码

备注：v-bind可以缩写为:

<body>
    <div id="root">
        <div v-bind:title='"aa " + title'>
            {{content}}
        </div>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                content: 'hello world',
                title: 'this is hello world'
            }
        })
    </script>
</body>

双向数据绑定

v-model='content', 实现挂载点与vue实例的双向绑定，绑定的变量是content

<body>
    <div id="root">
        <div :title='"aa " + title'>
            {{content}}
        </div>
        <input v-model='content'/>
        <div>{{content}}</div>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                content: 'hello world',
                title: 'this is hello world'
            }
        })
    </script>
</body>

计算属性

computed，通过一个方法的return值，给某一个变量赋值。性能高，只有依赖的属性发生变化，才重新计算，并展示。如果依赖属性未变化，则不重新计算，用最近一次缓存结果。

侦听器

watch，监听某一个变量的数值变化，如果变化则可以修改其他变量，或者执行一些方法

<body>
    <div id="root">
        姓：<input v-model='firstName'/>
        名：<input v-model='lastName'/>
        <div>姓名：{{fullName}}</div>
        <div>改变次数：{{count}}</div>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                firstName: 'hello',
                lastName: 'world',
                count: 0
            },
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName
                }
            },
            watch: {
                fullName: function() {
                    this.count ++
                }
            }
        })
    </script>
</body>

简单逻辑处理

v-if，控制dom节点存在与否。当对应的变量值是true，则显示该dom节点，否则，删除该dom节点
v-show，控制dom节点显示与否。当对应的变量值是true，则显示该dom节点，否则，只是隐藏，'display: none;'
v-for, 循环展示list内容，可以通过v-for='item of list'实现。指定key值会提高遍历效率，key不能重复。

备注：频繁隐藏或展示，v-show效率更高

<body>
    <div id="root">
        <div v-show='show'>hello world</div>
        <button @click='handleClick'>toggle</button>
        <ul>
            <li v-for='item of list'>{{item}}</li>
            <!-- <li v-for='(item, index) of list' :key='index'>{{item}}</li> -->
        </ul>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                show: true,
                list: [3, 2, 3]
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

TodoList Demo

<body>
    <div id="root">
        <input v-model='todo'>
        <button @click='add'>提交</button>
        <ul>
            <li v-for='item of list'>{{item}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#root',
            data: {
                todo: '',
                list: []
            },
            methods: {
                add: function() {
                    this.list.push(this.todo)
                    this.todo = ''
                }
            }
        })
    </script>
</body>

TodoList组件拆分

全局组件，Vue.component，全局范围内定义一个组件对象，可以设置参数列表props（在dom中绑定属性，从dom中接收数据）
局部组件，定义一个组件变量，然后在vue实例中声明对他的使用

<body>
    <div id="root">
        <input v-model='todo'>
        <button @click='add'>提交</button>
        <ul>
            <!-- <li v-for='item of list'>{{item}}</li> -->
            <todo-item 
                v-for='(item, index) of list'
                :key='index'
                :content='item'
            >
            </todo-item>
        </ul>
    </div>

    <script>
        // 全局组件
        Vue.component('todo-item', { 
            props: ['content'],
            template: '<li>{{content}}</li>'
        })

        // 局部组件
        // var TodoItem = {
        //     template: '<li>{{content}}</li>'
        // }
        new Vue({
            el: '#root',
            // components: {
            //     'todo-item': TodoItem
            // },
            data: {
                todo: '',
                list: []
            },
            methods: {
                add: function() {
                    this.list.push(this.todo)
                    this.todo = ''
                }
            }
        })
    </script>
</body>

组件与实例的关系

任何一个vue项目是由一个个vue实例构成
每一个component都是一个vue实例

为了验证component是一个vue实例，我们可以在component里面写vue实例的属性，例如template、methods、data、computed、watch等

<body>
    <div id="root">
        <input v-model='todo'>
        <button @click='add'>提交</button>
        <ul>
            <!-- <li v-for='item of list'>{{item}}</li> -->
            <todo-item 
                v-for='(item, index) of list'
                :key='index'
                :content='item'
            >
            </todo-item>
        </ul>
    </div>

    <script>
        // 全局组件
        Vue.component('todo-item', { 
            props: ['content'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function() {
                    alert(this.content+' clicked')
                }
            }
        })

        // 局部组件
        // var TodoItem = {
        //     template: '<li>{{content}}</li>'
        // }
        new Vue({
            el: '#root',
            // components: {
            //     'todo-item': TodoItem
            // },
            data: {
                todo: '',
                list: []
            },
            methods: {
                add: function() {
                    this.list.push(this.todo)
                    this.todo = ''
                }
            }
        })
    </script>
</body>

实现TodoList的删除功能

父组件与子组件的通信，是vue的重点和难点，需要深入理解下

父->子，父组件通过变量赋值到template中，再通过template的绑定属性，将数值传入到子组件中
子->父，采用发布订阅模式，父组件提前绑定一个方法，当子组件emit一个事件时，父组件可以获取该事件，执行相应的method

<body>
    <div id="root">
        <input v-model='todo'>
        <button @click='handleSummit'>提交</button>
        <ul>
            <!-- <li v-for='item of list'>{{item}}</li> -->
            <todo-item 
                v-for='(item, index) of list'
                :key='index'
                :content='item'
                :index='index'
                @delete='handleDelete'
            >
            </todo-item>
        </ul>
    </div>

    <script>
        // 全局组件
        Vue.component('todo-item', { 
            props: ['content', 'index'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function() {
                    // alert(this.content+' clicked, will be deleted')
                    this.$emit('delete', this.index)
                }                
            }
        })

        // 局部组件
        // var TodoItem = {
        //     template: '<li>{{content}}</li>'
        // }
        new Vue({
            el: '#root',
            // components: {
            //     'todo-item': TodoItem
            // },
            data: {
                todo: '',
                list: []
            },
            methods: {
                handleSummit: function() {
                    this.list.push(this.todo)
                    this.todo = ''
                },
                handleDelete: function(index) {
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>

3. 总结

vue.js完美地将数据model的变化自动地反应到了view上，给coder提供很强的web前端开发框架。vue-cli脚手架提出vue生产项目的开发套路，接下来，我会继续总结介绍。

vue.js - 入门学习教程

1. 概述

2. 入门学习

概念介绍

数据展示和方法绑定

dom属性绑定

双向数据绑定

计算属性

侦听器

简单逻辑处理

TodoList Demo

TodoList组件拆分

组件与实例的关系

实现TodoList的删除功能

3. 总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

我爱编程