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用于监听数据变化，执行异步操作。