【1.1 - 前端Vue】Vue.js的基本语法
目前主流前端框架
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>
<div id="app">
数据加载：
<p>+++{{message}}+++p>
<P v-text="message">++++++P>
<P v-html="message">++++++P>
div>
var app = new Vue({
el: '#app',
data: {
message: 'hello vue
'
}
})
vue数据绑定
vue的v-bind是数据的单向绑定，可以展示但修改不影响vue里面存储的值，简写可以用 : 代替。
v-model是双向绑定，修改了v-model里面的值，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 条件用双引号包括，比较值为字符串时需要用单引号包括，===表示绝对等于。
<div id="app-3">
v-if判断：
<span v-if="seen === 'a'">显示结果：Aspan>
<span v-else-if="seen === 'b'">显示结果：Bspan>
<span v-else="seen === 'c'">显示结果：Cspan>
div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: 'a'
}
})
v-for遍历
v-for通过in进行遍历别名与遍历集合的连接，然后使用{{}}输出即可。
<div id="app-4">
v-for遍历1：
<p v-for="(value,key,index) in user">
键：{{ value }} --- 值：{{ key }} --- 下标：{{index}}
p>
v-for遍历2：
<ol>
<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的事件，如单击事件、悬停事件等。可以使用 @ 代替简写。
<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>
<div id="app-css">
<h1 class="thin color-red italic">超快是我的小名h1>
<h1 :class="['thin','color-red','italic']">超快是我的小名h1>
<h1 :class="['thin','color-red',flag?'italic':'']">超快是我的小名h1>
<h1 :class="['thin','color-red',{'italic':flag}]">超快是我的小名h1>
<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过滤器
<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
<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-studytitle>
<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>
<div v-cloak id="app">
数据加载：
<p>+++{{message}}+++p>
<P v-text="message">++++++P>
<P v-html="message">++++++P>
div>
<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>
<div id="app-3">
v-if判断：
<span v-if="seen === 'a'">显示结果：Aspan>
<span v-else-if="seen === 'b'">显示结果：Bspan>
<span v-else="seen === 'c'">显示结果：Cspan>
div>
<div id="app-4">
v-for遍历1：
<p v-for="(value,key,index) in user">
键：{{ value }} --- 值：{{ key }} --- 下标：{{index}}
p>
v-for遍历2：
<ol>
<li v-for='item in arr' :key='item.id'>
{{item.show}}
li>
ol>
div>
<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>
<div id="app-css">
<h1 class="thin color-red italic">超快是我的小名h1>
<h1 :class="['thin','color-red','italic']">超快是我的小名h1>
<h1 :class="['thin','color-red',flag?'italic':'']">超快是我的小名h1>
<h1 :class="['thin','color-red',{'italic':flag}]">超快是我的小名h1>
<h1 :class="calssA">超快是我的小名h1>
<h1 :class="calssB">超快是我的小名h1>
div>
<div id="app-filter">
过滤前：
<p>
{{msg}}
<br />
{{date}}
p>
过滤后：
<p>
{{msg | msgFormat(arg)}}
<br />
{{date | dateFormat(param)}}
p>
div>
<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: 'hello vue
'
}
})
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>