Vue基础语法二: 模板、计算属性、侦听器、class和Style

Vue 基础

这是Vue的基础，这些内容你都可以在Vue的官网中找到，所以这里就不记细节了。需要的话，去Vue官网查一下。

模板语法

插值表达式 ，将数据和Dom进行绑定

// 当然你要指定Vue接管这个span
<span>Message: {{ msg }}</span>
//使用 v-once 指令，你也能执行一次性地插值
<span v-once>这个将不会改变: {{ msg }}</span>
//插入html,绝不要对用户提供的内容使用插值。
<span v-html="rawHtml"></span>

js 表达式

{{ number + 1 }}
//三元表达式
{{ ok ? 'YES' : 'NO' }}
//直接写JS代码
{{ message.split('').reverse().join('') }}
//可以拼接字符串
<div v-bind:id="'list-' + id"></div>
//但是流控制不会生效，请使用三元表达式 
{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

v-bind 指令

//绑定title
<span v-bind:title="message"></span>
//绑定id
<div v-bind:id="dynamicId"></div>
//绑定url
<a v-bind:href="url">...</a>
//对于布尔特性 (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同
<button v-bind:disabled="isButtonDisabled">Button</button>

指令带有前缀 v-

v-on 指令

  <button v-on:click="reverseMessage">反转消息</button>
   //js 
   var app5 = new Vue({
      ...
	  methods: {
	    reverseMessage: function () {
	      this.message = this.message.split('').reverse().join('')
	    }
	  }
	})

动态指令

 <a v-bind:[attributeName]="url"> ... </a>
 //这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
 //例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
 //所以  v-on你可以这么用
 <a v-on:[eventName]="doSomething"> ... </a>

v-modal 指令 用于在表单创建双向数据绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
//js
data () {
 return {
   message:'默认值'
 }
}

单选、多选、文本都可用。
其他的修饰符

1. .lazy: 将数据同步从input改为change
2. .number 将用户输入的直接转为数字。
3. .trim 过滤用户输入的首尾空格。

指令缩写

//完整语法
<a v-bind:href="url">...</a>
//缩写
<a :href="url">...</a>

// 完整语法
<a v-on:click="doSomething">...</a>
// 缩写
<a @click="doSomething">...</a>

条件判断

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

1、如果想切换多个元素可以把一个 元素当做包裹元素，最终的渲染结果将不包含 元素
2、 使用key可以阻止Vue重用元素。

增强的if -else

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

还有 v-show

<h1 v-show="ok">Hello!</h1>

列表循环

//html
<li v-for="(item, index) in items">
   {{ index }} - {{ item.message }}
 </li>
//js
data () {
   return {
   	items: [
   		{...},
   		{...}
   	]
   }
}

还可以循环对象

<div v-for="(value, name, index) in object">
 {{ index }}. {{ name }}: {{ value }}
</div>

关于维护.这个很重要
如果数据项发生了顺序改变，Vue并不会维护Dom的顺序。
如果需要这种顺序维护，你需要指定一个唯一key

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

数组的更新监听

• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
  其他的方法，如合并会返回一个新的数组，可以替换当前数组达到更新的目的。

计算属性 和 侦听器

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

//html
<div>{{ plus}}</p>
//js
var vm = new Vue({
  ...
  data () {
  	return {
  		A: 1,
  		B: 2
  	}
  },
  computed: {
    // 计算属性的 getter
    plus: function () {
      // `this` 指向 vm 实例
      return this.A + this.B
    }
  }
})
//reversedMessage 可以直接使用 <span>{{ reversedMessage }}</span>
//当 this.message 发生变化，计算属性也会跟着变化

这里请注意，只有当计算属性的依赖值发生变化，计算属性才会重新计算，否则计算属性的函数，只会执行一次，除非该页面被重新渲染

//Date.now()并不是依赖项，所以这个函数只会执行一次
computed: {
  now: function () {
    return Date.now()
  }
}

侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性

//html
<div>{{ firstName}}</p>

//js
var vm = new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {  
    // 如果 `firstName` 发生改变，这个函数就会运行
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    }
  }
})

class 和 style的绑定

//html
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
//active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。
//同时可以与原生Class共存
data () {
	return {
		isActive: true,
		hasError : false
	}
}

再或者 class是个对象

//html
<div v-bind:class="classObject"></div>
//js
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

再或者…是个计算属性，三元表达式都可以
再或者，把对象拆分成数组

//html
<div v-bind:class="[activeClass, errorClass]"></div>
//js 
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

当然还可以用到组件上。

剩下的是内联样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
//js
data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

//html
<div v-bind:style="styleObject"></div>
//js
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

一个很牛的东西 - 自动添加前缀
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。