vue学习笔记（一）

一 Vue.js是什么

Vue是一套JavaScript的渐进式框架，可以自底向上逐层应用，Vue的核心库只关注视图层，Vue可以将单页面分割成多个组件并包含多个html、css、js文件。

二 安装

.html文件中，cdn引入：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!--原生ES Modules-->
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

三 生命周期

四 创建Vue实例

var vm = new Vue({
	//api
	el: '#example' //绑定html元素，相当于document.getElemnetById('example');
	data: {
		a: 1	
	},
	created: function(){ //生命周期钩子函数
		console.log('a is' + this.a) //this指vm
	}
})

使用vm属性时，属性前加$符号。eg：vm.$el

vm找到id为example的元素，将data中的值插入，期间执行生命周期函数。

五 模板

1 插值

双大括号用于文本插值：

<span v-once>Message: {{ msg }}</span>

v-html用于插入html(易受XSS攻击)

<span v-html="rawHtml"></span>

模板支持JavaScript表达式。

2 指令

v-前缀的特殊特性，一些指令可以携带参数:

<p v-if="seen">hello</p>
<a v-on:click="toDoFunction">ClickMe</a>
<!--动态参数，attribute可以是Vue实例中的属性，eg:href，参数名尽量为小写-->
<a v-bind:[attribute]="url">...</a>	
<!--修饰符，以特定方式绑定-->
<form v-on:submit.prevent="onSubmit">...</form>

3 缩写

<!-- v-bind 和 v-on -->
<a v-bind:href="url" v-on:click:"doSomething">...</a>
<a :href="url" @click="doSomething">...</a>

六 计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: {
      //getter
      get: function () {
      	return this.message.split('').reverse().join('')
    	},
      //setter
      set: function(newValue){
        return message+newValue.toString()
      }
    }
  }
})
console.log(vm.reversedMessage) //将函数用作属性的getter函数

结果：

Original message: “Hello”

Computed reversed message: “olleH”

computed是响应式依赖，依赖改变时才重新求值，methods不是。

七 侦听器

var watchVM = new Vue({
	el: '#watch-example',
	data: {
		question: '',
		answer: 'yes'
	},
	watch: {
		question: function(new,old){
			this.answer = 'no'
		}
	}
})

watch用于监听数据变化，执行异步操作。