Vue.js初探

1. Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
2. Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
3. Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
4. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
   ————————VueJS————————

---

个人总结：关注数据，数据驱动页面

---

基本套路

1.使用<script>引用Vue.js文件。

2.body或div#appName，设置Vue的控制区域，与angular中ng-app一样。

<element id='appName'> 
    comtent
</element>

%注意：Vue2.0中最好不要绑到body元素上。

3.在body内添加script，或独立的js文件。常用固定套路如下：

<script>
     var vm = new Vue({
           el: '#appName',        # (1)
           data: {                # (2)
                  name: 'Allen',
                  age: 18,
                  artical: {
                       title: 'Welcome',
                       content: 'Hello world!'
                   },
                   jobs: ['engineer', 'assistant', 'teacher']
            }，
            methods: {            # (3)
                    functionName: function(){
                           alert(this.artical.title)
                    }
            },
            ready: function() {   # (4)
                   return this.functionName()
            }，
            computed: {            # (5)
                    something: function(){
                             return otherthing
            }
      })
#(1)Vue所控制的区域
#(2)数据，可在appName范围内通过{{}}语法引用, data可以是任意类型
#(3)可选，Vue方法都放置在methods内，形式如上
#(4)可选，在页面加载完成时，调用ready函数。
#(5)可选，动态计算，其函数必须有返回值。可在需要的地方直接引用函数名{{something}}
</script>

> %注意：Vue版本1和2在appName的位置有所不同，Vue2不再支持绑定到body以及html

4.在HTML中使用{{ varName }} 方式引用data内的数据，如：

        <div>
            {{name}}
            {{article.title}}
            {{ jobs[0] }}
        </div>

5.指令v-model，进行数据绑定，在控制区域内使用，如：

<!-- 在input输入框内输入数据，会在p内实时显示 -->
        <div class="vModel">
            <input v-model="message" placeholder="edit me">
            <p>Message is: {{ message }}</p>
        </div>

%注意：单纯的这种方式，在Vue2版本下并未实现，Vue1版本支持。message必须在data内才有效。

6.指令v-for，对可迭代对象进行遍历，array object string number如：

        <div class="vFor">
            <span v-for='item in jobs'>{{item}}</span>
            <span v-for='(key, value) in artical'>{{key}}:{{value}}</span>
        </div>

> %注意：指令也是扩展了HTML属性，与Angular是一样的

7. 事件绑定使用v-on: eventHandler='doSomething', 如：

<!--  如果a有初始值，那么在点击时，a就会改变当前值 -->
        <button v-on:click='a+=1'>{{a}}</button>

    doSomething也可以是一个函数的调用，通常用法也是这样的
> %注意：如果想直接改变style样式的属性值，需要将style放置在appName的范围之内才能起作用

8.数据遍历的几种形式：

______一定要注意参数的顺序:

<!-- 遍历数组内的项 -->
<div v-for='item in array'>{{item}}</div>

<!-- 遍历数组内的项, 索引值index是第二个参数，Vue2.0 -->          
<div v-for='(item, index) in array'>{{index}} : {{item}}</div>

<!-- 遍历对象内的键和值 -->            
<div v-for='(key, value) in object'>{{key}} : {{value}}</div>
            
<!-- 遍历对象内的值 -->
<div v-for='value in object'>{{value}}</div>
            
<!-- 遍历对象内的值和键，已及第三个参数作为索引值 -->
<div v-for='(value, key, index) in object'>{{key}} : {{value}}:{{index}}</div>

<!-- 整数迭代     -->     
<div v-for='n in 10'>{{ n = n * 2 }}</div>

9.computed可用于制作过滤器：

#可用于过滤掉身高小于等于10的人，在相应出直接使用biggerThan即可。        
        computed: {
            biggerThan: function() {
                var men = function(height){
                    return height > 10
                }

                return this.array.filter(men)
            }
        }
        

10.Vue.js没有ajax方法，可用如下方法替代：

    # 原生JS的XHR
    # jQuery库的ajax方法
    # fetch方法（以后可能会替代AJAX）
    # 及其他

总结：

使用上述介绍，使用localStorage来保存数据，可以做一个TODOlist的单页应用了。还蛮有意思的。