乐趣区

关于前端:前端开发之Vue学习笔记分享

jiezi

Vue.js 的倒退
前端倒退的行业十分快，大部分学习者赶不上倒退的速度，每天都在学习 Google 的 AngularJS，Fackbook 的 ReactJS，这些前端 MVC（MVVM）框架和组件化学习，加上 Vue.js 的呈现，越来越多的前端投入了学习中。
Vue.js 是一个用来开发 web 界面的前端库，轻量级，具备响应式编程和组件化的特点。
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
Vue 实例
vue.js 的应用是通过构造函数 Vue({option}) 创立一个 vue 的实例：var vm = new Vue({})。
一个 Vue 实例相当于一个 MVVM 模式中的 ViewModel，做图如下：

在实例化的时候，能够传入一个选项对象（数据，模板，挂载元素，办法，生命周期钩子）等。
模板
el 类型是字符串，DOM 元素或者是函数，作用是为实例提供挂载元素。前端培训一般来说咱们会应用 css 选择符，或是原生的 DOM 元素。
如：el:’#app’，指定了 el，实例将立刻进入编译过程。
template 类型为字符串，默认会将 template 值替换挂载元素，el 值对应的元素，合并挂载元素和模板根节点的属性。
数据
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>’
})
办法
在 methods 对象中来定义方法，示例：
<button v-on:click=”daBtn”>dadaqianduan</button>

new Vue({
el: ‘#app’,
data: {a:1},
methods: {
daBtn: function(){
console.log(this.a);
}
}
});
生命周期
beforeCreate，在实例开始初始化时同步调用，此时数据观测，事件等都尚未初始化。
created，在实例创立之后调用，此时已实现数据绑定，事件办法，但尚未开始 DOM 编译，即是未挂载到 document 中。
beforeMount，在 mounted 之前运行。
mounted，在编译完结时调用，此时所有指令已失效，数据变动已能触发 DOM 更新，但不保障 $el 已插入文档。
beforeDestroy，在开始销毁实例时调用。
destroyed，在实例被销毁之后调用，此时所有绑定和实例指令都曾经解绑，子实例也被销毁。
updated，在实例挂载之后，再次更新实例并更新完 DOM 构造后调用。
activated，须要配合动静组件 keep-live 属性应用，在动静组件初始化渲染的过程中调用该办法。
文本插值
数据绑定根底模式是文本插值，应用 {{}}，为 Mustache 语法：
<span>hello {{name}}</span>
单次插值：
<span v-once>{{name}}</span>
HTML 属性
示例：
<div v-bind:id=”‘id-‘+id”/></div>

<div :id=”‘id-‘+id”></div>
绑定表达式
放在 Mustache 标签内的文本内容称为绑定表达式。每个绑定中只能蕴含单个表达式，并不反对 JavaScript 语句，不反对正则表达式。
过滤器
vue 容许在表达式后增加可选的过滤器，以管道符 “|” 批示，能够有多个过滤器链式应用：
{{time | paramsTime}}
计算属性
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>
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);

}
}
}
});
表单控件
输入框示例：
<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>
绑定 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
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’>
内联款式绑定

  1. 对象语法：间接绑定合乎款式格局的对象

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

data: {
dada: {
color: ‘green’,
fontSize: ’10px’
}
}
<div v-bind:style=”{fontSize: color: ‘green’}”></div>

  1. 数组语法：v-bind:style 容许将多个款式对象绑定到对立元素上。

<div v-bind:style=”[styleObjectA, styleObjectB]”></div>
模板渲染
前端渲染的长处：
第一，业务拆散，后端只须要提供接口，前端在开发时也不须要部署对应得后端环境，通过一些代理服务器工具就能近程获取后端数据进行开发，可能晋升开发效率。
第二，计算量得转移，本来须要后端渲染得工作交给了前端，加重了服务器得压力。
后端渲染的长处：
第一，对搜索引擎比拟敌对。
第二，首页加载工夫端，后端渲染加载实现后就间接显示 html，但前端渲染在加载实现后还须要有段 js 渲染的工夫。
条件渲染
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 有更高的初始渲染耗费

列表渲染
示例：
<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 办法，批改数据的同时进行试图更新。
vm.$set(‘item[0]’, {title: ‘da’})
修饰符
.stop: 等同于调用 event. stopPropagation()。
.prevent: 等同于调用 event.preventDefault()。
.capture: 应用 capture 模式增加事件监听器。.self: 只当事件是从监听元素自身触发时才触发回调。
示例：
<form v-on:submit.prevent=”onSubmit”></form> // 阻止表单默认提交事件

<form v-on:submit.stop.prevent=”onSubmit”></form> // 阻止默认提交事件且阻止冒泡

<form v-on:submit.stop.prevent></form> // 也能够只有修饰符，并不绑定事件
Vue.extend()
Vue.js 提供了 Vue.extend(options) 办法，创立根底 Vue 结构器的“子类”
Vue.component(‘child’, Child) // 全局注册子组件
<child ….></child> // 子组件在其余组件内的调用形式

var Child = Vue.extend({
template : ‘#child’,
data : function() {
return {

….

}
}
….
})
内置指令
v-bind 用于动静绑定 DOM 元素属性 attribute，元素属性理论的值是由 vm 实例中的 data 属性提供的。
<img v-bind:src=”avatar”/>
new Vue({
data: {
avatar: ‘http://’
}
})
v-text 须要绑定在某个元素上，能防止未编译前的闪现问题。
v-ref 作用于子组件上，实例能够通过 $refs 拜访子组件。
示例：
<message v-re:title content=”title”></message>
<message v-ref:sub-title content=”subTitle”></message>

var Message = Vue.extend({
props: [‘content’],
template: ‘<h1>{{content}}</h1>’
});
Vue.component(‘message’, Message);
v-pre 指令，示意跳过编译这个元素和子元素，显示原始的 {{}}Mustache 标签，用来缩小编译工夫。
v-clock 指令相当于在元素上增加一个[v-cloak] 的属性，直到关联的实例完结编译。能够和 css 规定 [v-cloak]{display:none} 一起应用，能够暗藏未编译的 Mustache 标签直到实例筹备结束。
<div v-cloak>{{msg}}</div>
v-once 指令是用于表明元素或 组件只渲染一次，即便随后产生绑定数据的变动或更新，该元素或组件以及蕴含的子元素都不会再次被编译和渲染。

退出移动版