01、VUE 选择器：

每个框架基于对DOM的操作，能对DOM进行操作都必须获取DOM元素；
vue获取DOM的方式为：el：'类名'

<div id="box" >{{name}}</div>
        <script>
          var oBox = new Vue({
              el: '#box',
          })
    </script>

vue 为构造函数必须先实例化；

console.log( oBox.$el )  规定是 $el

02、data对象属性

data为对象，本身没有数据，而是通过一些方法获取数据

<div id='#box' >{{ name }}</div>
var oBox = new Vue({
      el: '#box',
      data: {
          name: '明天您好‘
  }

})

{{ name }} 数据绑定的一种方法：
div 标签将会被替代为对应数据对象上 name 属性的值。无论何时，绑定的数据对象上 name 属性发生了改变，插值处的内容都会更新。

另外写法：

var obj = {                
      name: '明天您好'  // 这里相当于一个厂商 在生产一些数据
}
var oBox = new Vue({  
      el: '#box',
      data: obj     // vue data没数据 通过里面get name的函数 来访问json的
})

get name函数 相当于:

function fn(){
    return obj.name
}
fn();

v-html 会解析标签如 js中innerHTML

 <div id="box" v-html="name"></div>
    <script>
        var oBox = new Vue({
            el: '#box',
            data:{
                name: '<span>明天会更好的</span>'
            }
        })
    </script>

数据的修改

oBox.name = '明天会更好'   // 修改name数据
oBox.name === obj.name   // true

[v-once 指令]你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<div id='#box' v-once >{{ name }}</div>
var oBox = new Vue({
      el: '#box',
      data: {
          name: '明天您好‘
  }
})
oBox.name = '明天会更好'

$watch 观察对象数据变化

语法： obj.$watch( '观察的数据名'，function ( newVal , oldVal ){} )
newVal 为新的数据 oldVal 为旧的数据

<script>
          var oBox = new Vue({
              el: '#box',
              data:{
                  name: '明天您好'
              }
          })
          oBox.$watch( 'name' , function ( newVal , oldVal ) {
              console.log( newVal , oldVal );  将会打印修改后的数据，和修改前的数据
          } )
        </script>

数据的绑定

01、v-bind 绑定
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
v-bind:属性名 = 'vue data里的属性'

绑定属性：

      <div id="box">
          <a v-bind:href="href">点击转到百度上</a>
      </div>
        <script>
          var oBox = new Vue({
              el: '#box',
              data: {
                  href: 'http://www.baidu.com'
              }
          })
        </script>

v-bind:href="href"  绑定href这个属性 值为数据里data里的href属性

绑定class 几种方式

    <div id="box" v-bind:class="className">
        这里是div标签
        <a v-bind:href="href">点击转到百度上</a>
    </div>
        <script>
          var oBox = new Vue({
              el: '#box',
              data: {
                  href: 'http://www.baidu.com',
                  className: 'red'
              }
          })
        </script>

className: 'red green'  // 绑定多个className

[]绑定方法

<div id="box" v-bind:class="[redClass , greenClass, pinkClass]">
        这里是div标签
        <a v-bind:href="href">点击转到百度上</a>
    </div>
        <script>
          var oBox = new Vue({
              el: '#box',
              data: {
                  href: 'http://www.baidu.com',
                  redClass: 'red',
                  greenClass: 'green',
                  pinkClass: 'pink'
              }
          })
        </script>

v-bind:class="[redClass , greenClass, pinkClass]" // []绑定多个，绑定数组里的值

{}绑定方法

<div id="box" v-bind:class="{red: redClass,green: greenClass,pink: pinkClass}">
        这里是div标签
        <a v-bind:href="href">点击转到百度上</a>
    </div>
        <script>
          var oBox = new Vue({
              el: '#box',
              data: {
                  href: 'http://www.baidu.com',
                  redClass: false,
                  greenClass: true,
                  pinkClass: true
              }
          })
        </script>

{ red: redClass }
属性是css样式的名字red 值是data (类型 true false)
意思是: 是否添加red 这个css的属性名

v-model进行数据双向绑定

    <div id="box">
        <input type="text" v-model="date">
        <div v-html="date"></div>
    </div>
        <script>
            new Vue({
                el: '#box',
                data: {
                    date: '您好明天'
                }
            })
        </script>

v-bind 与 v-model 应用

<div id="box">
        <input type="checkbox" v-model="redClass">
        <input type="checkbox" v-model="greenClass">
        <input type="checkbox" v-model="pinkClass">
        <div :class="{red: redClass,green: greenClass,pink: pinkClass}">我是用来测试的div</div>
    </div>
        <script>
            var oBox = new Vue({
                el: '#box',
                data: {
                    redClass: true,
                    greenClass: true,
                    pinkClass: true,
                }
            })
        </script>