Vue个人笔记

{}相当于new object，
先把基础的Vue学好，之后再用脚手架，就能够融会贯通了！！！

vue对象中的几个主要对象：
new Vue({
    el:'app',           //作用于哪个模板
    data:{}             //存放vue组件的数据
    methods:{}         //dom绑定事件的书写区
    computed:{}        //计算属性,对于任何复杂逻辑，你都应当使用计算属性
    directives: {}       //自定义指令
    components：{}        //自定义组件
});

//根组件
new Vue({
data:{}             //存放vue组件的数据
    methods:{}         //dom绑定事件的书写区
    computed:{}
    
        //子组件
    component:{
            data:{}             //存放vue组件的数据
        methods:{}         //dom绑定事件的书写区
        computed:{}
    }
});

一：页面渲染（ Rendering ） 
1,数据绑定
    数据绑定最常见的形式就是使用“ Mustache” 语法 ( 双大括号 ) 的文本插值
    {{msg}}
    可以在双大括号中使用 Javascript 表达式
    {{ message.split('').reverse().join('') }}
2,计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的
逻辑会让模板过重且难以维护。
    

{{ message.split('').reverse().join('') }}

    对于任何复杂逻辑，你都应当使用计算属性
    

        

Computed reversed message: "{{ reversedMessage }}"

    

    var app = new Vue({
        el: '#example',data: {message: 'Hello'},
        computed: {
        reversedMessage: function ()
        {
                return this.message.split('').reverse().join('')
        }
    }})
3，属性的绑定
指令 (Directives) 是带有 v- 前缀的特殊属性,指令的职责是，当表达式的值改变时，将
其产生的连带影响，响应式地作用于 DOM 。一些指令能够接收一个“ ” 参数 ，在指令名称
之后以冒号表示。

v-bind 指令可以用于响应式地更新 HTML 属性，简写形式为 ":"


4,事件的绑定
v-on 指令用于监听 DOM 事件，参数为事件名称，引号内为绑定的事件处理函数或者是
Javascript 代码（不推荐）。简写形式为 "@"


4-2
事件修饰符

类似的还有停止冒泡（ .stop ） , 只当事件在当前元素本身时触发（ .self ），仅触发一次 事件（ .once ）
键值修饰符
13 可以使用 .submit 代替
.enter 、 .tab 、 .delete 、 .esc 、 .space 、 .up 、 .down 、 .left 、 .right

5,条件渲染（ v-if ）
    根据给定条件判断决定是否显示元素
    

A

    

B

    

C

条件渲染（ v-show ）
    与 v-if 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 是简单地切换元素的 CSS 属性 display
    注意， v-show 不支持