Vue2.0——基础01

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"。

4. v-model的使用

使用 v-model 指令可以在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

1. text 和 textarea 元素使用 value property 和 input 事件；
2. checkbox 和 radio 使用 checked property 和 change 事件；
3. select 字段将 value 作为 prop 并将 change 作为事件。

<!-- 在text控件上使用 -->
<input v-model="searchText" />
<!-- 相当于 -->
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value" />

PS：补充几个v-model的修饰符

.lazy,.number,.trim

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">