vue笔记-模板,计算属性,class与style,data属性

数据和方法

　　1:只有当实例被创建时 data 中存在的属性才是响应式的,也可以预定义一些空的属性,唯一的意外就是Object.freeze(obj),这会阻止修改现有的属性;也就是说一个数据在放到根实例的data对象之前被Object.freeze操作过，那么就不在动态响应

//存在的属性是响应式的,预定义空的属性
//Object.freeze(obj) 不再响应
data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  obj:{
     foo: 'bar'  
    }
  error: null
}

注意:Vue 不允许在已经创建的实例上动态添加新的根级响应式属性（root-level reactive properties）。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

data:{
  obj:{
      a:1  
    }      
}
//添加了一个响应属性了
Vue.set(vm.obj,b,2)

 

模板语法

　　1:原始HTML

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

//rawHtml :是一段html代码,双{{}}会把他当做一段文本进行输出,v-html则会将他当做html代码

　　2:{{}}的语法不能作用在html标签的特性上面,通过v-bind指令,可以绑定标签的特性(特性就是指元素的一些属性)

　　3:不管是标签文本的绑定,还是特性的绑定,都是支持表达式的,但是只能包含单个表达式

 

指令:指令特性的值预期是单个 JavaScript 表达式（结果还是个值）(v-for 是例外情况）

<p v-if="seen">现在你看到我了</p>//seen就是表达式

　　1:一些指令可以带参数和修饰符

//带参数
//v-bind指令的参数就是标签的特性
<a v-bind:href="url">...</a>
//v-on指令的参数就是事件名
<a v-on:click="doSomething">...</a>

//带修饰符
<form v-on:submit.prevent="onSubmit">...</form>

 

计算属性与侦听器

　　计算属性出现的目的:不管是文本,还是标签的特性,都属于模板的绑定,而且可以是单个js表达式,但是当表达式的逻辑太复杂就不易维护

　　1:计算属性vs方法

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessageA() }}"</p>
</div>
//效果是一样的,一个是计算属性,一个是方法,除了调用方式不一样之外,最大的区别就是计算属性是基于他们的依赖进行缓存的,简而言之就是message的值不改变,
那么reversedMessage的就不会改变,但是方法不同,每次重新渲染,方法都是执行一次
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },    
  computed: {
    // 计算属性的 getter
    reversedMessageA: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

 

　　2:计算属性看似只能被动的根据他所依赖的属性值改变,那是因为计算属性默认只有getter,你可以给他提供setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
vm.fullName = 'pan rui'; 一般情况下没有效果,但是设置setter以后,就会改变计算属性的值

　　3:侦听器watch只有才数据发生改变,执行异步或开销较大的操作的时候使用

 

 class与style的绑定

　　1:对象语法:作用似乎和addCLass和removeClass作用很像哦,不需要再去调用方法,直接切换布尔值就可以切换标签的class,

　　结合返回对象的计算属性方法更加哦,就是将classObject设置为一个计算属性,返回值是一个对象

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
  isActive: true,
  hasError: false
}
//{ active: isActive, 'text-danger': hasError } 完全可以由一个对象去代替
<div v-bind:class="classObject"></div>  那么data那里相应的也用classObject

　　2:数组语法:感觉没什么卵用

<div v-bind:class="[activeClass, errorClass]"></div>
//这里似乎只是为了设置class,那我干脆直接写calss,不知道有什么用
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

　　3:style的使用

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
<div v-bind:style="styleObject"></div>
//参照上面的对象语法,并且也可以结合返回对象的计算属性使用更加