Vue_ 组件的重要选项

一.初识Vue：
    我们常规编写的页面时HTML、css、JavaScript，但是在Vue中，我们编写静态页面在.vue中，webpack打包工具帮助我们解析Vue成html,css,javascript.

学习Vue主要是学习template、script、style标签,他们的对应关系：

一个简单的例子：

 var hello = new Vue({
        el: '#hello',
        data: {
            message: 'hello world!'
        }
    });

数据绑定：

 <div id="hello">
          {{message}}
     </div>

二.Vue对象的重要选项

1.Vue 对象：

(1).data: Vue所有的数据都是放在data里面的，data也是一个对象，与页面数据双向绑定。

new Vue（{
  data：   
  {
    message：‘hello vue!’
  }
 }）

(2).methods: 封装方法

message：{
  dosomething:function(){
     console.log(this.a)
}
}

(3).watch: 监听

watch：{
"a":function(){   
//监听数据a进行监听，数据a 改变，就会执行。
}
}

(4).computed:计算属性
在开发当中经常遇到数值计算，比如说有两个变量值，但是输出的是两者的计算值和

computed:{
   fullname:function(){
       return  this.firstname + ""+ this.lastname 
 }
}
// 页面使用：{{fullname}}
//当firstname和lastname没变的情况下，fullname会使用缓存的结果.
// 只有firstname和lastname任何一方发生变化时，才会去重新计算。
//这种只有依赖方发生改变才会去重新计算的模式，会大大提高效率

2.模板指令
(1).模板指令: -html和vue对象的粘合剂
数据渲染:v-text、v-html、{{}}(插值表达式)
模板指令是写在HTML当中。

(2)模板指令：v-if、v-show

附：他们都是控制元素的显示和隐藏，区别是什么？
v-if 如果条件不符合，直接不会渲染这个标签元素
v-show相当于css中的display为none的效果，元素还在，只是隐藏了
(3).模板指令:v-for
渲染循环列表：v-for

<div id="app">
         <ul>
             <li v-for="litext in litext">
                 {{ litext.text }}
             </li>
         </ul>
     </div>

(4).模板指令v-on：简写@
事件绑定：v-on，定义在methods

<input v-model='newItem'v-on:keyup.enter="addNew">
//在methods中：
addNew: function(){
     //事件处理函数
      this.items.push({
      label:this.newItem,
      isfinishing:false  
})

(5).模板指令:v-bind

 <div v-bind:class="{'isfinished':item.isfinishing}">
 //属性绑定v-bind：只对dom元素的属性一些操作：
 <img v-bind:src='imgsrc'>

最常用的绑定属性还是class
如果是是一个对象，{red:’isRed’} key 是class的名字，value是是否有这个class 变量是一个布尔值
如果是一个数组的话，[calssA ,classB] 变量是一个字符串，是直接展现出来的，绑定了两个class类
如果是混合的，[classA，{classB：isB，classC：IsC}] classA肯定是有的，classB和classC的展示要看布尔值

三.初识Vue小结
改变自己的思想，不是面向DOM对象的编程，而是面向数据的编程