Vue入门（三）

Vue实例及选项

el绑定模板

data数据

在组件中data和props不能重名

methods函数集合

watch观察和相应Vue实例上的数据变动

extend的用法

<div  id="app">
    <todo :todo-data="groceryList"></todo>
</div>


<script type="text/javascript">

    var todoItem=Vue.extend({
        template:`
        <li>{{text}}</li>
        `,
        props: {
            text: {
                type: String,
                default: ''
            }
        }
    });
    var todoWarp=Vue.extend({
        template:`
        <ul>
        <todo-item v-for="(item,index) in todoData" v-text="item.text"></todo-item>
</ul>
        `,
        props:{
            todoData:{
                type:Array,
                default: []
            }
        },
        components:{
            todoItem:todoItem
        }

    });
    Vue.component('todo',todoWarp);
    new Vue({
        el:"#app",
        data:{
            groceryList:[
                {id:1,text:"苹果"},
                {id:2,text:"香蕉"},
                {id:3,text:"你好"},
                {id:4,text:"阿达"}
            ]
        }
    })
</script>

定义的组件中所用数据为两部分，一个是父组件传入，或外界传入，第二个就是自身事先定义好的一些数据，自身的数据一定要是通过data()函数返回的一个json串，里面可以放入很多值。

可参考组件数据通信

计算属性computed

有时候在页面渲染时，会一些数据需要处理之后才渲染，因此，Vue提供了一个计算属性computed，该计算属性，将处理函数写入其中，调用即可。

当然将处理函数写入methods也可以实现，为什么要用computed呢，因为computed提供了一个缓存机制，对于重复的操作有缓存记录，下次相同操作则会立即返回记录中的数据，而不是耗费资源重新计算。

v-model结合表单使用

文本框，和普通标签的v-model很简单，绑定变量名就可以直接使用，这里主要学习涉及到操作的元素。

单选框，复选框应用：

<div  id="app">
    <label  v-for="item in groceryList" >
       <input type="checkbox" :value="item.id" v-model="fu">{{item.text}}
    </label>
    <br>
    <label  v-for="item in groceryList" >
        <input type="radio" :value="item.id" v-model="check">{{item.text}}
    </label>
</div>
<script type="text/javascript">
    var app= new Vue({
        el:"#app",
        data:{
            check:"03",
            fu:['03'],
            groceryList:[
                {id:'01',text:"苹果"},
                {id:'02',text:"香蕉"},
                {id:'03',text:"你好"},
                {id:'04',text:"阿达"}
            ]
        }
    })
</script>

效果：

select应用：（使用的上方例子数据）

  <label>单选下拉框</label>
    <select v-model="selectonce">
        <option label="---请选择---"></option>
        <option v-for="item in groceryList" :label="item.text" :value="item.id" ></option>
    </select>
    <br>
    <label>多选下拉框</label>
    <select multiple  v-model="selectmultple">
        <option v-for="item in groceryList" :label="item.text" :value="item.id" ></option>
    </select>

原生的单选下拉框还正常，多选的简直没法看，需要自己做一个或者引用插件。

Vue v-model修饰指令

Vue v-model同步数据很快，页面没渲染的时候就已经同步了，可是频繁的同步，有时候并不是我们需要的，

Vue提供了lazy特性，设置之后，文本框需要按下回车键或者失去焦点才同步数据，类似原生onchange方法。

 <input type="text" v-model.lazy="selectonce">

number暂时没看出来

  <input type="text" v-model.number="selectonce">

debounce延时函数在Vue2.0被弃用。

v-bind结合style使用 4种方式

<div  id="app">
    <button width="300px" height="80px" :style="mystyle">你好</button>
    <button width="300px" height="80px" :style="{color:redback,fontSize:fontsize}">你好</button>
    <button width="300px" height="80px" :style="[redback2,fontsize2]">你好</button>
    <div :style="{display: ['-webkit-box','-ms-flexbox-','flex']}"></div>
</div>
<script type="text/javascript">
    var app= new Vue({
        el:"#app",
        data:{
            redback:'red',
            fontsize:'33px',
            redback2:{color:'red'},
            fontsize2:{'font-size':'33px'},
            mystyle:{
                backgroundColor:"orange",
                fontSize:'33px'
            }
        }
    });
</script>