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

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指令是用于表明元素或 组件只渲染一次,即便随后产生绑定数据的变动或更新,该元素或组件以及蕴含的子元素都不会再次被编译和渲染。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据