简略地说下Vue

突发奇想, 有建立一个小网站的想法, 这个想法其实有了好久了, 但是一直没有去实践, 我给别人说, 别人总认为想法不太现实, 其实原因总归在自己身上, 趁着年轻, 多应该去实现这些想法, 无论别人认为是怎么样, 或许这样到头来才不会后悔.

其实, 只是有这个想法, 具体怎么去做, 网站里面有什么, 还真没太清楚. 直觉上总想去先从前端开始做,但是这样从理性上是很不合理的. 这总归来说都是直觉, 爱好, 所以让理性滚蛋吧.

我之前跟一个学妹, 我们做小程序的时候, 其实我就看过vue的教程, 但是时间过去好久, 已经忘的差不多了, 这次就重新的去大略看一遍.

首先, 我只是要使用Vue这个框架, 把它当作一项工具, 而对于它究竟是怎么进行实现, 我不做过多了解, 当然, 除非它勾引起了我的兴趣. 我会为了我更好使用Vue, 用自己的认知去理解Vue中的一些概念, 以便记忆. 如果理解错了, 请见谅.

MVVM 模型

Vue 实现了MVVM模型, 但是官方说并不是完全按照MVVM模型来做的.
MVVM 说白了就是数据模型与DOM数据的动态绑定.

    <div id="demo1">
        <p>
            {{message}}
        </p>
        <input v-model="message">
    </div>
    <script type="text/javascript">
        var demo1 = new Vue({
            el: '#demo1',
            data:{
                message: 'hello javascript'
            }
        })
    </script>

在input当中修改message, 会同时更改引用到message的这个值.

组件化

组件化这个概念, 有点像"面向对象"的概念, 相当于你创建了一个对象在你创建的Vue实例, 当然这个概念可以递归的.

嵌套的组件树

    <div id="demo2">
        <blog-post
            v-for="(item, index) in posts" :key="index" :title="item.title">

        </blog-post>
    </div>
    <script type="text/javascript">
        Vue.component('blog-post', {
            props: ['title'],
            template: '<h3>{{title}}</h3>'
        })
        var demo2 = new Vue({
            el: '#demo2',
            data:{
                posts:[
                    {id: 1, title: 'hello1'},
                    {id: 2, title: 'hello2'},
                    {id: 3, title: 'hello3'}
                ]
            }
        })
    </script>

计算属性

计算属性其实跟方法差不多, 区别在于计算属性会缓存结果, 在下次调用, 如果相关参数没有发生变化时, 直接返回. 所以在一些场景优于方法.

    <div id="demo3">
        <p>
            {{message}}
        </p>
        <p>
            {{reverseMessage}}
        </p>
    </div>
    <script type="text/javascript">
        var demo3 = new Vue({
            el: '#demo3',
            data: {
                message: 'hello'
            },
            computed:{
                reverseMessage: function(){
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

对于Vue其他的一些东西, 就不再说了, 那些都是一些语法api, 如果忘记直接去doc查就欧克了. 我从第一次看Vue教程, 就对Vue的感觉非常好, 感觉它很好上手, 很简洁, 而且很多语法糖对于开发者来说很友好. 更重要是的随着前端框架的发展, MVVM模型, 解放了Javascript对于dom的操作, 这简直不要太爽.