1. vue实例创建

html代码使用了变量a

<div id="app">{{a}}</div>

js代码中创建vue对象，获取包含a变量的容器，给变量a赋值

var obj={a:1}；
var vm=new Vue({
  el:"#app",
  data：obj // data可以是直接使用字面量 {a: 1} ；也可以使用变量obj
});
//加载后，界面显示 1

vue变量创建时的属性

1. el用来获取控件

使用dom对象获取的方式

vm.$el === document.getElementById(‘app‘) // => true

2. data用例设置值

用来生命定义的变量

vm.$data === obj// => true
//vm.a改变，obj.a也会改变
vm.a=2;// 显示 2
console.log(obj.a);// 打印2
//obj.a改变，vm.a也会改变
obj.a=3;// 显示3
console.log(vm.a);// 打印3
//通过Objec.freeze(obj)可以阻止改变
Objec.freeze(obj);
obj.a=4;// 显示3
console.log(vm.a);// 打印3

2. vue监听

1. 通过vm.$watch监听

var vm=new Vue({
  el:"#app",
  data:{a:1}
});
vm.$watch(‘a‘, function (newValue, oldValue) {
  // a值变化后的操作
})

2. 通过创建vm时在里面设置监听

var vm=new Vue({
  el:"#app",
  data:{a:1},
  watch:{
    a:function(newValue,oldValue){
      //a值变化后的操作
    }
   }
});

3. 绑定属性和命令

1. 绑定属性的4中方式

<!-- 1.使用 v-bind:attribute 的方式 -->
<div id="app">
  <button v-bind:class="btnCal">
</div>
<!-- 2.使用 :attribute 的方式 -->
<div id="app2">
  <button :class="btnCal">
</div>
<!-- 3.使用 动态参数 的方式 -->
<div id="app3">
  <button on-bind:[my-class]="btnCal"><!-- 需要在创建vue的时候，给变量‘my-class‘赋值为‘class‘ -->
</div>
<!-- 4.使用 精简动态参数 的方式 -->
<div id="app4">
  <button :[my-class]="btnCal"><!-- 需要在创建vue的时候，给变量‘my-class‘赋值为‘class‘ -->
</div>

2. 绑定命令的4中方式

<!-- 1.使用 v-on:attribute 的方式 -->
<div id="app">
  <button v-on:click = "btnCal">
</div>
<!-- 2.使用 @attribute 的方式 -->
<div id="app2">
  <button @click="btnCal">
</div>
<!-- 3.使用 动态参数 的方式 -->
<div id="app3">
  <button v-on:[my-click]="btnCal"><!-- 需要在创建vue的时候，给变量‘my-click‘赋值为‘click‘ -->
</div>
<!-- 4.使用 精简动态参数 的方式 -->
<div id="app4">
  <button @[my-click]="btnCal"><!-- 需要在创建vue的时候，给变量‘my-click‘赋值为‘click‘ -->
</div>

3. 使用动态变量

绑定属性或者事件的时候，可以使用动态变量的方式

<div id="app4">
  <button :[my-class]="btnCal"><!-- 需要在创建vue的时候，给变量‘my-class‘赋值为‘class‘ -->
</div>

这里的 my-class 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

new Vue({
  el:"#app4",
  data:{
    ‘my-class‘:‘class‘
  }
});

此时，:[my-class]="btnCal"等价于v-bind:class="btnCal"。

Vue2.0_基础01

原文：https://www.cnblogs.com/wlxb/p/15159430.html