前端开发Vue教程笔记

Posted 2021-08-20 hugo233

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发Vue教程笔记相关的知识，希望对你有一定的参考价值。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油。

这几年Vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用Vue.js开发。是开源世界华人的骄傲，其作者是我国尤雨溪，为了给个人开发提供更多的机遇打造出门槛低、成本低、跨设备和多平台的Vue.js。

Vue.js有什么优点呢？

1、Vue 更容易上手。目前Vue是排名第三的前端框架。正式因为他简单易学，很多前端开发工程师可以很快掌握并且应用到实际开发中。

2、Vue 的语法很自由。前期不需要认识复杂的生命周期函数，可能只关心 mounted 和 Vue.nextTick；熟悉的前端模板；父子组件间通信更灵活。slot，可以大尺度地扩展组件（但也不要过度使用哦）；v-model，mvvm 的方式处理表单更方便；官网中文文档。

作为一名Vue开发使用者，必须了解其使用规则。本文为连载文章，持续更新中~

1.Vue.js的发展

前端发展的行业非常快，大部分学习者赶不上发展的速度，每天都在学习Google的AngularJS，Fackbook的ReactJS，这些前端MVC（MVVM）框架和组件化学习，加上Vue.js的出现，越来越多的前端投入了学习中。❤️

Vue.js是一个用来开发web界面的前端库，轻量级，具有响应式编程和组件化的特点。

2.hello world

引入vue.js

<script src="http://cdnjs.xxx"></script> // 使用CDN方法

通过NPM进行安装：

npm install vue

示例：

<div id="#app">
 <h1>{{message}}</h1>
</div>

var vm = new Vue({
 el: '#app',
 data: {
  message: 'hello world, 我是飘哥'
 }
})

特点：数据绑定

在浏览器控制台vm.message='hello vue'，输出结果hello vue，表示vm.message和视图中{{message}}是绑定的。

绑定用户输入的数据，视图会随着用户的输入而变化❤️

<div id="app">
 <h1>dadaqianduan is {{message}}</h1>
 
 <input type="text" v-model="message">
</div>

vm.message的值会随着用户在input中输入的值的变化而变化，而无需我们手动去获取DOM元素的值再同步到js中。

特点:组件化

可以自己定义html标签，在模板中使用它

示例：

<div id="app">
 <message content="dadaqianduan"></message>
</div>

<script type="text/javascript">
 var Message = Vue.extend({
  props: ['content'],
  template: '<h1>{{content}}</h1>'
 })
 
 Vue.component('message', Message);
 
 var vm = new Vue({
  el: '#app',
 })
</script>

命令行工具：

$npm install --global vue-cli

$vue init webpack my-project

$cd my-project

$npm install

$npm run dev

3.Vue实例

vue.js的使用是通过构造函数Vue({option})创建一个vue的实例：var vm = new Vue({})。

一个Vue实例相当于一个MVVM模式中的ViewModel，做图如下：

在实例化的时候，可以传入一个选项对象（数据，模板，挂载元素，方法，生命周期钩子） 等。

4.模板

el类型是字符串，DOM元素或者是函数，作用是为实例提供挂载元素。一般来说我们会使用css选择符，或是原生的DOM元素。

如：el:'#app'，指定了el，实例将立即进入编译过程。

template类型为字符串，默认会将template值替换挂载元素，el值对应的元素，合并挂载元素和模板根节点的属性。

5.数据

vue实例中可以通过data属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。

示例：

var data = {a:1}


var vm = new Vue({
 data: data
})

vm.$data === data // true
vm.a === data.a // true

vm.a = 2
data.a // 2

data.a = 3
vm.a // 3

在模板中使用{{a}}就会输出vm.a的值，修改vm.a的值，模板中的值会随之改变，称为响应式数据。

组件类型的实例可以通过props获取数据，同data一样，也需要在初始化时预设好。

<my-component title="myTitle" content="myContent"></my-component>

var myComponent = Vue.component("my-component",{
 props: ['title','content'],
 template: '<h1>{{title}}</h1><p>{{content}}</p>'
})

6.方法

在methods对象中来定义方法，示例：

<button v-on:click="daBtn">dadaqianduan</button>

new Vue({
 el: '#app',
 data: {a:1},
 methods: {
  daBtn: function(){
   console.log(this.a);
  }
 }
});

7.生命周期

beforeCreate，在实例开始初始化时同步调用，此时数据观测，事件等都尚未初始化。

created，在实例创建之后调用，此时已完成数据绑定，事件方法，但尚未开始DOM编译，即是未挂载到document中。

beforeMount，在mounted之前运行。

mounted，在编译结束时调用，此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档。

beforeDestroy，在开始销毁实例时调用。

destroyed，在实例被销毁之后调用，此时所有绑定和实例指令都已经解绑，子实例也被销毁。

updated，在实例挂载之后，再次更新实例并更新完DOM结构后调用。

activated，需要配合动态组件keep-live属性使用，在动态组件初始化渲染的过程中调用该方法。

8.文本插值

数据绑定基础形式是文本插值，使用{{}}，为Mustache语法：

<span>hello {{name}}</span>

单次插值：

<span v-once>{{name}}</span>

9.HTML属性

示例：

<div v-bind:id="'id-'+id"/></div>

<div :id="'id-'+id"></div>

10.绑定表达式

放在Mustache标签内的文本内容称为绑定表达式。每个绑定中只能包含单个表达式，并不支持JavaScript语句，不支持正则表达式。

11.过滤器

vue允许在表达式后添加可选的过滤器，以管道符 "|"指示，可以有多个过滤器链式使用：

{{time | paramsTime}}

12.计算属性

var vm = new Vue({
 el: '#app',
 data: {
  firstName: 'da',
  lastName: '飘哥',
 }
 computed: {
  fullName: function() {
   // this 指向vm实例
   return this.firstName + ' ' + this.lastName
  }
 }
});

<p>{{firstName}}</p><p>{{lastName}}</p><p>{{fullName}}</p>

13.Setter

示例：

var vm = new Vue({
 el: '#el',
 data: {
  num: 100,
 }
 computed: {
  price: {
   set: function(newValue){
    this.num = newValue * 100;
   },
   get: function() {
    return (this.num/100).toFixed(2);
   }
  }
 }
});

14.表单控件

输入框示例：

<input type="text" v-model="message"/>

<span>dadaqianduan {{message}}</span>

单选框示例：

<label><input type="radio" value="male" v-model="gender"> 男 </label>
<label><input type="radio" value="famale" v-model="gender"> 女 </label>

<p>{{gender}}</p>

checkbox复选框，单个勾选框和多个勾选框

<input type="checkbox" v-model="checked"/>

<span>dadaqianduan{{checked}}</span>

多个勾选框，v-model使用相同的属性名称，且属性为数组：

<label><input type="checkbox" value="1" v-model="multiChecked">1</lable>
<label><input type="checkbox" value="2" v-model="multiChecked">2</lable>
<label><input type="checkbox" value="3" v-model="multiChecked">3</lable>
<p>{{multiChecked.join('|')}}</p>

select:

单选：

<select v-model="selected">
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>dadaqianduan: {{selected}}</span>

多选：

<select v-model="multiSelected" multiple>
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>dadaqianduan: {{multiSelected.join('|')}}</span>

15.绑定value

表单控件的值同样可以绑定在vue实例的动态属性上。

// checkbox
<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">

选中：vm.checked==vm.a

未选中：vm.hchecked==vm.b

16.class与style绑定

class属性，绑定的数据可以是对象和数组

<div class="da" v-bind:class="{'active':active, 'unactive':!active}"></div>

vm实例中需要包含：
data: {
 active: true
}

渲染结果：<div class="tab active"></div>

数组语法

<div v-bind:class="[classA, classB]"></div>

data: {
 classA: 'class-a',
 classB: 'class-b',
}

渲染结果：`<div class="class-a class-b’>

17.内联样式绑定

对象语法：直接绑定符合样式格式的对象

<div v-bind:style="dada"></div>

data: {
 dada: {
  color: 'green',
  fontSize: '10px'
 }
}

<div v-bind:style="{ fontSize: color: 'green' }"></div>

数组语法：v-bind:style允许将多个样式对象绑定到统一元素上。

<div v-bind:style="[ styleObjectA, styleObjectB ]"></div>

18.模板渲染

前端渲染的优点：

第一，业务分离，后端只需要提供接口，前端在开发时也不需要部署对应得后端环境，通过一些代理服务器工具就能远程获取后端数据进行开发，能够提升开发效率。

第二，计算量得转移，原本需要后端渲染得任务交给了前端，减轻了服务器得压力。

后端渲染的优点：

第一，对搜索引擎比较友好。

第二，首页加载时间端，后端渲染加载完成后就直接显示html，但前端渲染在加载完成后还需要有段js渲染的时间。

19.条件渲染

v-if和v-else的作用是根据数据值来判断是否输出该DOM元素，以及包含的子元素。

v-else必须紧跟v-if，不然该指令不起作用。

v-show元素的使用会渲染并保存在DOM中。只是切换元素的css属性display。

v-if和v-show的条件发生变化时，v-if引起了dom操作级别的变化，而v-show仅仅发生了样式的变化，从切换的角度来说，v-show消耗的性能要比v-if小。

v-if切换时，vue.js会有一个局部编译/卸载的过程，因为 v-if 中的模板也可能包括数据绑定或子组件。v-if 会确保条件块在切换当中适当地销毁与中间内部的事件监听器和子组件。

v-if 是惰性的，如果在初始条件为假时，v-if 本身什么都不会做，而v-show 则仍会进行正常的操作，然后把 css 样式设置为 display:none。

v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗

20.列表渲染

示例：

<ul>
<li v-for="item in items">
　　 <h3>{{item.web}}</h3>
　　 <p>{{item.da}}</p>
 </li>
</ul>
var vm = new Vue({
el : '#app',
 data: {
　　 items : [
　　　 { title : 'web-1', description : 'da-1'},
　　　 { title : 'web-2', description : 'da-2'},
　　　 { title : 'web-3', description : 'da-3'},
　　　 { title : 'web-4', description : 'da-4'}
　　 ]
 }
});

v-for 内置了 $index 变量，输出当前数组元素的索引，也可以自己指定索引的别名。<li v-for="(index,item) in items">{{index}} – {{$index}} – {{item.title}}</li>

在vue.js中提供了$set方法，修改数据的同时进行试图更新。