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

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

我之前跟一个学妹, 我们做小程序的时候, 其实我就看过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的操作, 这简直不要太爽.