Vue官网基础知识讲解-笔记

Vue优点

1. 体积小 : 压缩后33k;
2. 运行效率高: 基于虚拟dom,一种可以预先通过JavaScript各种计算,把最终的dom计算出来并优化的技术,由于这个dom操作属于预先处理,并没有操作真实的dom,所以叫做虚拟的dom
3. 双向数据绑定: 开发者不用去操作dom,把更多尽力投入到业务逻辑上.
4. 生态丰富、学习成本低: 市场上有大量成熟、稳定的基于vue.js的ui框架及常用组建,拿来即用,实现快速开发.

---

Vue 安装与部署

安装方式

1. 直接使用<script>标签引入
   vue.js引入之后会在全局暴露一个Vue()函数
2. 使用命令行工具(CLI)创建复杂的vue应用(单文件组建)

---

数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

var data = {'a':1}
var vm = new Vue({
	el:'#app',
	data:data,
})
vm.a='test...'
vm.$data === data    //true
vm.$watch('a', function(newVar, oldVar){
	console.log(oldVar, newVar)
}

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。

---

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    //整个页面创建之前
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
    // 实例创建之后
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);

生命周期钩子函数执行顺序,如下图

模版语法

插值

• 文本插值: 使用Mustache语法 , {{ msg }},
• 插 入html: 使用v-htm: <span v-html="rawHtml"></span>

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

• 在模版语法中使用JavaScript表达式:
  对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：<p v-if="seen">现在你看到我了</p>

• 参数: 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">...</a>
在这里参数是监听的事件名。

• 修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>
<div @click="click1">
	<div @click.stop="click2"></div>
</div> // 使用修饰符,就只执行click2方法,否则会先执行click2 然后 click1;

---

class与style绑定

绑定class

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

• 对象语法 <div v-bind:class="{ active: isActive }"></div>

<div v-bind:class="classObject"></div>
//另外一种:
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
// 还有一种通过计算属性:
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

• 数组语法 <div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

数组语法中可以用三元表达式;<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
在数组语法中也可以使用对象语法<div v-bind:class="[{ active: isActive }, errorClass]"></div>

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

---

条件渲染

v-if、v-else、v-else-if和v-show
v-show方式也会渲染进dom元素里面,只是设置了display=none,v-if则不会.

---

列表渲染

v-for如果需要索引,可以直接在item后面加上index用,号分开;items 可以是数组,可以是对象,对象时,可以通过(value,name,index) in items获取对象属性名和值,以及索引号

<li v-for="item,index in items" :key="item.message">
    {{ item.message }}
  </li>
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }