Vue.js笔记，从入门到精通

Vue.js笔记，从入门到精通

这是我总结的笔记，对今天的学习总结了一半，笔记后面再补上，由于以前会angular，因此学起来很简单。

Vue.js 是一种mvvm模式，与angular的区别是彻底没有controller的概念。

Vue实例

        构造器：每一个应用都是经过构造函数Vue建立一个根实例，实例化时，须要传入一个选项对象，能够包         含数据、模板、挂载元素、方法、生命周期钩子等。能够扩展Vue构造器，用预约义选项建立可复用的         组件构造器，全部Vue.js组件都是被扩展的Vue实例：
        var myComponent = Vue.extend({
            //扩展选项
        });
        //全部的‘myComponent’实例都将以预约义扩展选项被建立
        var myComponentInstance = new myComponent();

        属性与方法：每一个实例都会代理 data 对象里全部的属性，注意只有这些被代理的属性是响应的。若是           在实例建立以后添加新的属性到实例上，它不会触发视图更新。除了这些数据属性，Vue 实例暴露了一         些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分。

        实例生命周期：Vue实例在建立时有一系列初始化步骤，在此过程当中，将调用一些生命周期钩子，给自         定义逻辑提供运行机会。例如 created 钩子在实例建立后调用，也有其余的钩子，在实例生命周期的不         同阶段调用，compiled、ready、destroyed。钩子的 this 指向调用它的Vue实例，组件的自定义逻辑分         割在这些钩子中。

数据绑定语法
Vue.js的模板是基于DOM实现的，全部的Vue.js模板都是可解析的有效的HTML，经过一些特殊的特性作了加强，Vue模板于是从根本上不一样于基于字符串的模板。

        插值
                文本：数据绑定最基础形式是文本插值，使用“Mustache”语法（双大括号）
                <span>{{ msg }}</span>
                Mustache 标签会被相应数据对象 msg 属性的值替换，随属性变化而更新。处理单次插值，数据                   变化再也不更新。
                <span>{{ *msg }}</span>

                原始的HTML：双Mustache标签将数据解析为纯文本而不是HTML，输出真HTML字符串，须要用                 三Mustache标签。
                <div>{{{ raw_html }}}</div>
                内容以 HTML 字符串插入——数据绑定将被忽略。若是须要复用模板片段，应当使用 partials。
                注意在网站上动态渲染任意 HTML 是很是危险的，由于容易致使 XSS 攻击。记住，只对可信内容                 使用 HTML 插值，永不用于用户提交的内容。

                HTML特性：Mustache标签也能够用在HTML特性内,注意在Vue.js指令和特殊特性内不能用插值。                 若是用错Mustache标签Vue.js会给出警告。
                <div id="item-{{ id }}"></div>

        绑定表达式
        放在Mustache标签内的文本称为绑定表达式。在Vue.js中，一段绑定表达式由一个简单的JavaScript表         达式和可选的一个或多个过滤器构成。

                JavaScript表达式：目前为止，咱们的模板只绑定到简单的属性键。不过实际上Vue.js在数据绑定                 内支持全功能的JavaScript表达式。
                {{ number + 1 }}
                {{ ok ? 'YES' : 'NO' }}
                {{ message.split('').reverse().join('') }}
                这些表达式在所属的Vue实例的做用域内计算，每一个绑定只能包含单个表达式。

                过滤器：Vue.js容许在表达式后添加可选的“过滤器(Filter)”，以“管道符”指示。
                {{ message | caplitalize }}
                这个过滤器只是一个JavaScript函数，返回大写化的值。Vue.js提供数个内置过滤器，能够开发自                 己的过滤器。
                管道语法不是JavaScript语法，不能在表达式内使用过滤器，只能添加到表达式的后面。过滤器可                 以串联。
                {{ message | filter1 | filter2 }}
                {{ message | filterA 'arg1' age2 }}

        指令
        是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，所以JavaScript表达式及过滤器规则在这里         也适用。指令职责是当其余表达式的值改变时吧某些特殊的行为应用到DOM上。

        <p v-if="greeting">Hello!</p>
        这里 v-if 指令根据表达式 greeting 值的真假删除/插入 <p> 元素。

                参数：有些指令能够在名称后面带一个“参数”（Argument）,中间放一个冒号隔开。例如，v-bind                   指令用于响应地更新HTML特性。
                <a v-bind:href="url"></a>
                这里 href 是参数，它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到                  能够用特性插值 href="{{url}}" 得到一样的结果：这样没错，而且实际上在内部特性插值会转为 v-                  bind 绑定。
                v-on 指令，用于监听DOM事件：
                <a v-on:click="doSomething"></a>

                修饰符：修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑                      定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式。
                <a v-bind:href.literal="/a/b/c"></a>
                固然，这彷佛没有意义，由于咱们只须要使用 href="/a/b/c" 而没必要使用一个指令。这个例子只是                    为了演示语法。

                缩写：v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你须要在一些现有的 HTML 代                    码中添加动态行为时，这些前缀能够起到很好的区分效果。但你在使用一些经常使用指令的时候，你                    会感受一直这么写实在是啰嗦。并且在构建单页应用（SPA ）时，Vue.js 会管理全部的模板，此                  时 v- 前缀也没那么重要了。所以Vue.js 为两个最经常使用的指令 v-bind 和 v-on 提供特别的缩写。
                v-bind缩写
                <!-- 完整语法 -->
                <a v-bind:href="url"></a>
                <!-- 缩写 -->
                <a :href="url"></a>

                v-on缩写
                <!-- 完整语法 -->
                <a v-on:click="doSomething"></a>
                <!-- 缩写 -->
                <a @click="doSomething"></a>

计算属性

模板中绑定表达式很是便利，实际上只用于简单的操做。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板太重且难以维护。这就是为何 Vue.js 将绑定表达式限制为一个表达式。若是须要多于一个表达式的逻辑，应当使用计算属性。

        计算属性

        computed: {

            a: function(){

            },

            b: function(){

            }

        }

        计算属性默认getter，须要时能够提供一个setter。