目前主流前端框架
Vue.js
Vue.js是由国人尤雨溪带领开发的一款前端框架,主要思想为关注度分离,一个组件负责一个功能。
Vue.js基于Node.js运行,他的基本语法是基于ECMAScript语法进行开发的。
是目前最火的(关注度高)的一款渐进式前端框架。
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
官网:Vue.js
React
React naive是FackBook公司开源的一款前端框架,它比Vue.js出身好,所以React社区的功能提供更完善。
React是基于JavaScript XML(JSX)语言开发的。
是目前最流行(使用人数最多,但相对于国内中小型公司Vue.js更多,大公司会考虑转向React)的一款前端框架。
官网:React native
Angular
Angular 是基于 TypeScript 的 Javascript 框架。因为在Angular的第二版本做了大规模的重构,导致国内很多公司弃用了。但是在国外使用依然很多,采用了Java的一些东西(如:依赖注入),对后台人员很友好。
官网:Angluar
对比(不包含Angular):
框架名称 | Vue2.X | React |
---|---|---|
监听数据 | getter/setter以及函数劫持 | 通过比较引用获取 |
数据流 | 组件与数据双向绑定,父子组件通过事件修改(Vue1.0版本支持父子组件双向绑定,已移除) | 提倡单向数据流,并称之为称之为 onChange/setState()模式。 |
框架量级 | 轻量级 | 相对Vue重 |
基于语法 | EMCAScript | JavaScript XML |
使用人群 | 国内居多 | 国外居多 |
手机端开发支持 | 通过Weex支持 | 支持 |
优势 | 1.上手容易;2.轻小灵活 | 1.可扩展性高;2.社区丰富 |
GitHub统计(2019-12-1)
框架名称 | Vue.js | React | Angular |
---|---|---|---|
People(团队人员) | 36人 | 提供者为facebooku公司账号无法统计 | 55人 |
Repositories(存储库,即提供组件) | 104个 | 提供者为facebooku公司账号无法统计 | 192个 |
Star(收藏) | 153k(153000+) | 140K(140000+) | Angular(54.9K)+Angular.js(59.6K) |
Contributors(贡献者) | 282人 | 1340人 | Angular(1059人)+Angular.js(1578人) |
设计 | 自定义模板 | 尽可能偏原生 | Angular(基于TypeScript)Angular.js(基于JavaScript),习惯偏向Java |
从以上数据可以看出,Vue.js不如其它两家名门出身,贡献者少的可怜。但是从收藏来看,充分的证明了目前Vue.js的火热程度。相对于Vue和React而言,Angular在数据上(或国内)已经落后前两者。从开发习惯上,Angular对后端友好一些,React对原生Js习惯保留的多。
选择:国内中小型公司使用Vue.js偏多,考虑到扩展性,大型公司会有使用React。
Vue.js环境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
vue数据加载
vue通过el绑定id,通过{{}}加载data里的值。
<style>
#通过属性选择器赋予属性
[v-cloak]{
display: none;
}
</style>
<!-- vue数据加载 -->
<div id="app">
数据加载:
<!-- 可以拼接,但在网速缓慢时会出现插值表达式闪烁的问题 -->
<p>+++{{message}}+++</p>
<!-- 插值不会闪烁,但会覆盖元素中原有的内容 -->
<P v-text="message">++++++</P>
<!-- 会处理绑定值的HTML标签 -->
<P v-html="message">++++++</P>
</div>
var app = new Vue({
el: '#app',
data: {
message: '<h1>hello vue</h1>'
}
})
vue数据绑定
vue的v-bind是数据的单向绑定,可以展示但修改不影响vue里面存储的值,简写可以用 : 代替。
v-model是双向绑定,修改了v-model里面的值,vue里面存储的值也会修改。
<!-- vue数据绑定 -->
<div id="app-2">
v-bind数据绑定:
<span v-bind:title='message'>
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
<br />
<!-- 简写 -->
:简写:
<span :title='message'>
Vue语法简写:鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
<br />
<!-- 双向绑定 -->
v-model双向绑定:<input type="text" v-model='message' style="width: 400px;">
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
v-if判断
vue里的判断用v-if 条件用双引号包括,比较值为字符串时需要用单引号包括,===表示绝对等于。
<!-- v-if判断 -->
<div id="app-3">
v-if判断:
<span v-if="seen === 'a'">显示结果:A</span>
<span v-else-if="seen === 'b'">显示结果:B</span>
<span v-else="seen === 'c'">显示结果:C</span>
<!-- v-if与v-show -->
<!-- v-if:在元素切换时重新加载,频繁切换消耗较大 -->
<!-- v-show:在元素切换时进行隐藏,但初始化消耗较大 -->
<!-- <span v-show="seen === 'a'">显示结果:A</span> -->
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: 'a'
}
})
v-for遍历
v-for通过in进行遍历别名与遍历集合的连接,然后使用{{}}输出即可。
<!-- v-for遍历 -->
<div id="app-4">
v-for遍历1:
<p v-for="(value,key,index) in user">
键:{{ value }} --- 值:{{ key }} --- 下标:{{index}}
</p>
v-for遍历2:
<ol>
<!-- 使用key的时候必须为:key,即要给属性进行v-bind绑定,指定key的值 -->
<li v-for='item in arr' :key='item.id'>
{{item.show}}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
user:{
id:1,
name:'超快是我的小名'
},
arr: [
{ id:1, show: 'str-1' },
{ id:2, show: 'str-2' },
{ id:3, show: 'str-3' }
]
}
})
v-on事件
v-on绑定vue的事件,如单击事件、悬停事件等。可以使用 @ 代替简写。
<!-- v-on事件 -->
<!-- 简写@,如@click -->
<div id="app-5">
v-on事件:
<input type="text" name="type" id="app-5-type">
<button v-on:click='search()'>查询</button>
<p>
查询结果:<a :href="result.value">{{result.key}}</a>
</p>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
result: {}
},
methods: {
search() {
var type = document.getElementById('app-5-type').value;
if (type == 1) {
this.result = {
key: 'CSDN超快是我的小名 - 主页',
value: 'https://me.csdn.net/qq_33277249'
}
} else if(type == 2) {
this.result = {
key: 'CSDN超快是我的小名 - 前端',
value: 'https://blog.csdn.net/qq_33277249/category_9477767.html'
}
}else{
this.result = {
key: '请输入现有的查询类型:1.主页;2.前端'
}
}
}
}
})
CSS样式
<style>
.color-red {
color: red;
}
.thin {
font-weight: normal;
}
.italic{
font-style: italic;
}
.font-size{
font-size: 12px;
}
</style>
<!-- vue css样式 -->
<!-- 添加:标记 -->
<div id="app-css">
<!-- 传统样式 -->
<h1 class="thin color-red italic">超快是我的小名</h1>
<!-- vue css样式 -->
<h1 :class="['thin','color-red','italic']">超快是我的小名</h1>
<!-- vue css样式 三元表达式 -->
<h1 :class="['thin','color-red',flag?'italic':'']">超快是我的小名</h1>
<h1 :class="['thin','color-red',{'italic':flag}]">超快是我的小名</h1>
<!-- vue css样式 使用实例 -->
<h1 :class="calssA">超快是我的小名</h1>
<h1 :class="calssB">超快是我的小名</h1>
</div>
var appcss = new new Vue({
el: '#app-css',
data: {
flag:false,
calssA:{ 'color-red':true,'thin':false,'italic':false,'font-size':true },
calssB:{ 'color-red':false,'thin':true,'italic':true,'font-size':false }
}
})
filter过滤器
<!-- vue filter 过滤器 -->
<div id="app-filter">
过滤前:
<p>
{{msg}}
<br />
{{date}}
</p>
过滤后:
<p>
{{msg | msgFormat(arg)}}
<br />
{{date | dateFormat(param)}}
</p>
</div>
// 全局过滤器
Vue.filter('msgFormat', function (msg,arg) {
// replace方法,替换
// /text/g 正则,获取所有text
return msg.replace(/-/g,arg)
})
var appfilter = new Vue({
el: '#app-filter',
data: {
msg: '1-2-3-4-5-6-7-8-9-0',
arg: '、',
date: new Date,
param: 'yyyy-MM-dd hh:mm:ss'
},
//局部过滤器
filters: {
// 参数可以设置为空时的默认值
dateFormat:function(dateStr,pattern = ''){
var dt = new Date(dateStr)
//获取年月日
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2,'0')
var d = dt.getDate().toString().padStart(2,'0')
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
// return y + '-' + m + '-' + d
return `${y}-${m}-${d}`
}else{
//获取时分秒
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')
// 如果时间中月日时分秒只有一位数,则通过padStart进行前置补充,当然也有endStart后置补充
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
}
})
整体demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-study</title>
<style>
#通过属性选择器赋予属性 [v-cloak] {
display: none;
}
.color-red {
color: red;
}
.thin {
font-weight: normal;
}
.italic {
font-style: italic;
}
.font-size {
font-size: 12px;
}
</style>
</head>
<body>
<!-- vue数据加载 -->
<div v-cloak id="app">
数据加载:
<!-- 可以拼接,但在网速缓慢时会出现插值表达式闪烁的问题 -->
<p>+++{{message}}+++</p>
<!-- 插值不会闪烁,但会覆盖元素中原有的内容 -->
<P v-text="message">++++++</P>
<!-- 会处理绑定值的HTML标签 -->
<P v-html="message">++++++</P>
</div>
<!-- vue数据绑定 -->
<div id="app-2">
v-bind数据绑定:
<span v-bind:title='message'>
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
<br />
<!-- 简写 -->
:简写:
<span :title='message'>
Vue语法简写:鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
<br />
<!-- 双向绑定 -->
v-model双向绑定:<input type="text" v-model='message' style="width: 400px;">
</div>
<!-- v-if判断 -->
<div id="app-3">
v-if判断:
<span v-if="seen === 'a'">显示结果:A</span>
<span v-else-if="seen === 'b'">显示结果:B</span>
<span v-else="seen === 'c'">显示结果:C</span>
<!-- v-if与v-show -->
<!-- v-if:在元素切换时重新加载,频繁切换消耗较大 -->
<!-- v-show:在元素切换时进行隐藏,但初始化消耗较大 -->
<!-- <span v-show="seen === 'a'">显示结果:A</span> -->
</div>
<!-- v-for遍历 -->
<div id="app-4">
v-for遍历1:
<p v-for="(value,key,index) in user">
键:{{ value }} --- 值:{{ key }} --- 下标:{{index}}
</p>
v-for遍历2:
<ol>
<!-- 使用key的时候必须为:key,即要给属性进行v-bind绑定,指定key的值 -->
<li v-for='item in arr' :key='item.id'>
{{item.show}}
</li>
</ol>
</div>
<!-- v-on事件 -->
<!-- 简写@,如@click -->
<div id="app-5">
v-on事件:
<input type="text" name="type" id="app-5-type">
<button v-on:click='search()'>查询</button>
<p>
查询结果:<a :href="result.value">{{result.key}}</a>
</p>
</div>
<!-- vue css样式 -->
<!-- 添加:标记 -->
<div id="app-css">
<!-- 传统样式 -->
<h1 class="thin color-red italic">超快是我的小名</h1>
<!-- vue css样式 -->
<h1 :class="['thin','color-red','italic']">超快是我的小名</h1>
<!-- vue css样式 三元表达式 -->
<h1 :class="['thin','color-red',flag?'italic':'']">超快是我的小名</h1>
<h1 :class="['thin','color-red',{'italic':flag}]">超快是我的小名</h1>
<!-- vue css样式 使用实例 -->
<h1 :class="calssA">超快是我的小名</h1>
<h1 :class="calssB">超快是我的小名</h1>
</div>
<!-- vue filter 过滤器 -->
<div id="app-filter">
过滤前:
<p>
{{msg}}
<br />
{{date}}
</p>
过滤后:
<p>
{{msg | msgFormat(arg)}}
<br />
{{date | dateFormat(param)}}
</p>
</div>
<!-- vue.js引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局过滤器
Vue.filter('msgFormat', function (msg,arg) {
// replace方法,替换
// /text/g 正则,获取所有text
return msg.replace(/-/g,arg)
})
var app = new Vue({
el: '#app',
data: {
message: '<h1>hello vue</h1>'
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen: 'a'
}
})
var app4 = new Vue({
el: '#app-4',
data: {
user: {
id: 1,
name: '超快是我的小名'
},
arr: [
{ id: 1, show: 'str-1' },
{ id: 2, show: 'str-2' },
{ id: 3, show: 'str-3' }
]
}
})
var app5 = new Vue({
el: '#app-5',
data: {
result: {}
},
methods: {
search() {
var type = document.getElementById('app-5-type').value;
if (type == 1) {
this.result = {
key: 'CSDN超快是我的小名 - 主页',
value: 'https://me.csdn.net/qq_33277249'
}
} else if (type == 2) {
this.result = {
key: 'CSDN超快是我的小名 - 前端',
value: 'https://blog.csdn.net/qq_33277249/category_9477767.html'
}
} else {
this.result = {
key: '请输入现有的查询类型:1.主页;2.前端'
}
}
}
}
})
var appcss = new Vue({
el: '#app-css',
data: {
flag: false,
calssA: { 'color-red': true, 'thin': false, 'italic': false, 'font-size': true },
calssB: { 'color-red': false, 'thin': true, 'italic': true, 'font-size': false }
}
})
var appfilter = new Vue({
el: '#app-filter',
data: {
msg: '1-2-3-4-5-6-7-8-9-0',
arg: '、',
date: new Date,
param: 'yyyy-MM-dd hh:mm:ss'
},
//局部过滤器
filters: {
// 参数可以设置为空时的默认值
dateFormat:function(dateStr,pattern = ''){
var dt = new Date(dateStr)
//获取年月日
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2,'0')
var d = dt.getDate().toString().padStart(2,'0')
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
// return y + '-' + m + '-' + d
return `${y}-${m}-${d}`
}else{
//获取时分秒
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')
// 如果时间中月日时分秒只有一位数,则通过padStart进行前置补充,当然也有endStart后置补充
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
}
})
</script>
</body>
</html>