如何优雅的学习Vue之基础入门篇(一)
一、Vue的概念
1.1 Vue是什么？
- 按官方的话来说，是用于构建用户界面的渐进式框架
- 自底向下逐层的设计
- 核心只关注视图层，单页面应用
所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
标注：渐进式框架(一开始不需要完全掌握它的全部功能特性，后续可以逐步增加。这对于新手而言很友好) 具体可访问：什么是渐进式框架
Vue.js循着MVVM模式，如官方文档所写一样，Vue 的核心库只关注视图层。
开发架构模式并不止一种，还有如MVC、MVP等，可以在这里了解。
MVVM:
Model:模型，数据和业务在这里定义
View：视图，负责数据的展示
VM：负责监听Model中数据的改变并控制视图的更新，处理用户交互，这是Vue在做的事。
直观理解：
1.2 Vue安装
1、在Vue的官网上直接下载Vue.min.js文件(压缩)
2、使用CDN引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3、使用npm安装 引用菜鸟教程的话：由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
1.3 Vue的CDN写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--CDN方式引入Vue（需联网）-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="App">
<p>{{name}}</p>
</div>
</body>
<script>
let Vm = new Vue({
el:"#App",
data(){ //data方法，使用了ES6写法
return{
name:"你好"
}
},
methods:{}
})
</script>
</html>
二、Vue的基础语法
这里我们会少提及vue提供的语法底层实现，只专注于vue的语法是什么，怎么用。
2.1 插值语法
关键:{{}}
<div id='dl'>
<p>{{message}}</p> <!--用两个大括号圈起来，-->
</div>
var sa = new Vue({
el:'dl',
data:{
message:'文本内容'
}
})
2.2 v-bind 单向绑定
单向：数据只能从data流向页面
双向：数据能从data流向页面，还可以从页面流向data
<span v-bind:title="message"></span>
//title:123
//将这个元素节点的title与实例message值保持一致
<a v-bind:href="url">...</a>
//href attribute 与表达式 url 的值绑定
//缩写
<a :href="url">...</a>
<!--同样的，可以用到css上-->
<a :style="astyle" :href="alink"></a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
new Vue({
el:'#x',
data:{
message:'123',
astyle:{color:"#000",fontSzie:"18px"},
alink:"www.baidu.com"
}
})
2.3 v-for循环
v-for指令可以绑定数组的数据来渲染一个项目
<!-- i代表索引 -->
<p v-for='(s.i) in list'>{{s.id}}+{{s.name}}</p>
<!--循环对象,v-for='(值,键,索引) in user' -->
<p v-for='(val,key,i) in user'> </p>
<!--循环数字,v-for='user in 4 ' 从1开始循环 -->
<p v-for='user in 4'>{{user}} </p>
new Vue({
el:'xx'
data:{
list[
{id:1,name:'xx1'}
{id:2,name:'xx2'}
{id:3,name:'xx3'}
]
user:{
id:1,
name:'xxx',
gender:'男'
}
}
})
2.4 v-if v-else 判断
通过v-if来控制切换一个元素的显示与隐藏。将数据绑定在了DOM结构上，在显示或隐藏中，vue提供了过渡效果系统，具体可以看到这个效果，点击左侧的侧边栏模块时，切换的过渡动画效果。
需要注意v-if和v-show的区别，因为在面试中，v-if和v-show的区别常常被问及。百度即可。
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
<p v-else>现在呢</p> <!--当seen不为true时，显示-->
</div>
new Vue({
el:'#x',
data:{
seen:true
}
})
//当seen为flase时，之前显示的消息消失
更复杂的判断
v-if、v-else-if、v-else
<div id="app">
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else="type === 'NO'">NO A and B</div>
</div>
<!--当type为A时，显示A-->
<!--当type为B时，显示B-->
<!--当type为NO时，显示NO A and B-->
new Vue({
el:'#app',
data:{
return:{
type:'A',//B,NO
}
}
})
v-show 显示隐藏是 display:'none'，DOM还在，有其用武之地
v-if 显示隐藏是 将DOM元素整个添加和删除，消耗更大，但有其用武之地;
2.5 v-show 显示与隐藏
接受布尔值(true || false)，示例如下
<div id="app">
<h1 v-show="type === 'x'">Hello!</h1>
</div>
new Vue({
el:'#app',
data:{
return{
type:'x',//显示,不为x时隐藏
}
}
})
2.6 v-on 事件监听器
v-on事件监听器，调用在Vue实例中定义的方法：
<div>
<button v-on:click="message">点击</button>
</div>
<!--缩写-->
<button @click="message">点击</button>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
new Vue({
el:'#x',
data:{
},
methods:{
message(){
console.log('成功点击，弹出消息');
}
}
})
2.7 v-model 双向绑定
一般应用在表单类元素上，如input、select等
<div>
<input id="t" v-model="text">
<p>{{text}}</p>
</div>
<!--将同步更新消息-->
new Vue({
el:'#1',
data:{
text:'',
}
})
如下语法将不做介绍:
v-html接受html代码
三、Vue的组件基本写法
组件系统是Vue的一个重要概念，使用小型，可复用的组件构建大型应用，就像搭积木一样。抽象的东西，要通过大脑想象来模拟场景。比如看到一个页面，看到布局，把它想象成搭积木、树干与树枝、烫手的砖与搭建好的砖房
SPA(single-page application)
单页面应用，解释为只有一个HTML页面，通过路由实现页面内的局部切换，公共资源部分只加载一次
好处：整体一次下载，频繁的操作，可以减少网络流量
3.1 Vue的基本写法
//js
<script>
new Vue({
el:"",//挂载
data:{},//绑定数据
methods:{},//绑定的方法
mounted(){}//一般用来数据的初始化
created(){},//生命周期
});
</script>
3.2 了解组件
这是一个组件的结构
index.js
//name.js
Vue.component('xxx',{ //创建自定义的组件xxx
template:` `, //写html代码 是V：视图
props:[], //传输数据
data:function(){ //定义数据,是M:存储数据
return:{
}
},
methods:{ //方法
},
//生命周期
created:function(){
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/vue.js"></script>
<script></script> <!--我们需要引用组件的js文件-->
</head>
<body>
<xxx> </xxx> <!--我们定义的组件-->
</body>
</html>
3.3 组件的基本使用
这有一个使用组件模板的例子：
index.js
/*定义一个名为index-title的组件，使用<index-title></index-title>来使用
可通过new Vue实例，作为自定义的元素来使用，
它具有Vue身上的data、methods、生命周期钩子等，
当然，作为组件，它可以无限制的复用
*/
// Vue.component：全局注册
Vue.component("index-title",{
//传值
props:{
title:{
type:String,
default:"这是一个可复用的组件"
}
},
//模板，写HTML
template:`
<section>
<h1>这是一个很好的开始：{{title}}</h1>
</section>
`,
//绑定的数据源
data(){
return{}
},
//绑定的方法
methods:{
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../assets/vue.js"></script>
<script src="./index.js"></script><!--全局组件的引入-->
</head>
<body>
<div id="app">
<span>这是{{name}}</span>
<index-title :title="title"></index-title>
<index-title :title="text"></index-title>
<index-title ></index-title><!--当不给值时，会使用定义的默认值-->
<!--局部组件-->
<local></local>
</div>
<!-- 不要忘记添加 type="module" -->
<script type="module">
//局部组件的引入
import local from "./component.js";
new Vue({
el:"#app",
data(){
return{
name:"一个实例",
title:"希望我们能走下去",
text:"仰望星空",
}
},
// 注册
components:{
"local":local
}
})
</script>
</body>
</html>
需要注意的是，上述注册了全局组件和局部组件，局部组件的示例在这里，将component.js写入，报错才会解决。同时要注意路径问题。
component.js
export default{
template:`<h1>这是个局部组件的例子啊</h1>`,
data(){
return{}
}
}
上述所展现的组件的基本使用，可以在这里找到代码。
3.4 prop 数据传递
prop 数据单项传递，父影响子，子不影响父
所有 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来不行。这样会防止子组件意外变更父组件的状态，从而导致你的应用的数据流向难以理解。
3.5 组件工程化
将每个组件封装为一个后缀为.vue的文件，当需要使用时，将其import到页面上，如搭积木一样
上述所示例的代码，是组件的基本使用，Vue提供了vue-cli脚手架来构建项目。
在我们了解了Vue的组件后，我们需要知道一些组件的UI框架，使我们的开发更加高效简便.
如:Element、Ant Design Vue、View Design
四、最后的最后
了解UI框架来更好的开发项目，这里有Ant Design Vue、Element、iview
这里是十五。您的点赞是我努力写高质量、简单生动文章的动力！
