04-vue组件的重要选项

一、vue的参数

    一个new的vue对象包含很多中间选项，小括号中是一个参数(对象)，指定实例化的vue的特性

1、data：vue所有的数据源都放在data中（所有的方法、其他选项，包括页面上都可以取到data中的数据） ，通常的Module层

2、methods：与页面绑定的事件的方法

3、watch：数据监听的方法，确定数据改变后进行的操作

    new Vue ({

        data:  {

            a: 1,

            b: [ ]

        },

        methods: {

            doSomething: function() {

                this.a ++; // data字段在vue中可以通过this.xxx取到数据

            }

        },

        watch: {

            'a': function(val, oldVal) {

                console.log(val, oldVal);

            }

        }

    })

二、模板指令（写在html中）   -- vue对象和页面展现的联系

1、数据渲染： v-text、v-html、 {{ }}

{{ }}：与v-text类似，但{{xxx}}在第一次页面(vue)没有初始化完成之前，{{xxx}}会呈现在页面上

v-text：格式处理了html。渲染页面多使用v-text

v-html：保存了html结构

2、控制模块隐藏：v-if、v-show

v-if：直接不渲染该DOM元素（该DOM元素不存在）

v-show：通过css的 display: none 来对其进行隐藏（能看到该DOM元素，但被隐藏了）

3、渲染循环列表：v-for，主要用于表格或<li>循环数据

4、事件绑定：v-on（简写 @ ）

5、属性绑定：v-bind（简写 : ）

v-bind最常用的是class属性

<p>{{ a }}</p>    // a在页面上可以双向绑定

<p v-text="a"></p>

<p v-html="a"></p>

<p v-if="isShow"></p>

<p v-show="isShow"</p>

<ul>

    <li v-for="item in items">

        <p v-text=" item.label"></p>    //页面上的展现：第一行是apple，第二行是banana

    </li>

</ul>

data: {

    items: [

        {

            label:  "apple"

        },

        {

            label: "banana"

        }

    ]

}

<button v-on:click="doThis"><.button>    // click button时，执行doThis方法

<button @:click="doThis"><.button>    //简写

method: {

    doThis: function (someThing) {

    }

}

<img v-bind:src="imageSrc">    //src属性赋值为imageSrc（字符串）

<div :class="{ red: isRed }"></div>    //里面是对象{ key: value }，对是否有red这个class的判断（判断red这个class是否展现），<style>中有 .red{ xxx } ，data中有 isRed 

<div :class="[ classA, classB]"></div>    //里面是数组[ ]，classA和classB在data中是字符串，是class属性的值，会直接展现出来

<div :class="[ classA, { classB: isB, classC: isC } ]"></div>    // 混合