一、 Vue.js是什么?
-
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
-
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
-
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
官方网站: https://cn.vuejs.org/v2/guide/ 作者 尤雨溪是中国人.
二、 为甚么使用Vue?
- 声明式渲染: 前后端分离是未来趋势
- 渐进式框架: 适用于各种业务需求
- 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习
三、 Vue.js的引入
- 在html页面使用script引入vue.js的库即可使用。
<!-- 方式1：引用远程 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 方式2：引用本地 -->
<script src="./vue包的存放目录/vue.min.js"></script>
- Vue-CLI脚手架: 使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形
三、 入门程序
1. 环境安装
开发软件：Visual Studio Code
为了方便，我已上传到我的CSDN资源，可点击下载：VSCodeSetup-x64-1.29.1.exe
下载好开发软件后，需要安装一下相应的插件。
打开VS code软件，点击左侧最后一个图标（扩展），在商城中搜索以下插件并点击安装。
示例：
2. 代码编写
接下来开始编写入门小程序.
创建一个vue_text目录, 并且在目录下创建 01_vue入门程序.html 文件.
tips: 在01_vue入门程序.html 文件中，第一行输入英文状态下的感叹号 ！，
再点击回车即可自动生成一段初始html代码如下：
代码编写步骤：
- 定义html，引入vue.js
- 定义"app" div，此区域作为vue的接管区域
- 定义Vue实例，接管app区域
- 定义model（数据对象）
- 在"app"中展示数据
基于以上几个步骤，请对照下面代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue入门</title>
<!-- 1.创建HTML文件， 引入vue.js 有两种方式-->
<!-- 第一种 引入 vue.js的CDN地址 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> -->
<!-- 第二种 本地导入 -->
<script src="./js/vue.min.js"></script>
</head>
<body><!-- 2. 定义app div，此区域作为vue的接管区域 -->
<div id="app">
<!-- {
{}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 -->
<h2> {
{name}} </h2>
</div>
</body>
<script>
//3. 创建vue实例
var VM = new Vue({
//定义 Vue实例挂载的元素节点,表示vue接管该div
el:'#app',
//4.定义model模型数据对象
data:{
name:"格子衫"
}
});
</script>
</html>
3. 运行结果
在html文件中，右键点击“Open with Live Sever”即可运行：
浏览器中显示为：
4. 说明
Vue的程序基本上是按照上面的模板写的，div中插值获取数据、js中定义el挂载点、定义data数据对象
1) {
{}}: 插值表达式
-
插值表达式的作用？
通常用来获取Vue实例中定义的数据(data) 属性节点中 不能够使用插值表达式
2) el: 挂载点
-
el的作用 ?
定义 Vue实例挂载的元素节点,表示vue接管该区域 -
Vue的作用范围是什么 ?
Vue会管理el选项命中的元素,及其内部元素 -
el选择挂载点时,是否可以使用其他选择器 ?
可以,但是建议使用 ID选择器 -
是否可以设置其他的DOM元素进行关联 ?
可以,但是建议选择DIV, 不能使用HTML和Body标签
3) data: 数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型
- 渲染复杂类型数据的时候,遵守js语法
下面是data数据中写复杂类型数据示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中data写复杂类型</title>
<!-- 1.创建HTML文件， 引入vue.js 有两种方式-->
<!-- 第一种 引入 vue.js的CDN地址 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> -->
<!-- 第二种 本地导入 -->
<script src="./js/vue.min.js"></script>
</head>
<body><!-- 2. 定义app div，此区域作为vue的接管区域 -->
<!-- 此区域作为vue的接管区域 -->
<div id="app">
{
{name}} <br>
{
{school.name}} {
{school.mobile}}<br>
<ul>
<li>{
{names[0]}}</li>
<li>{
{names[1]}}</li>
<li>{
{names[2]}}</li>
</ul>
</div>
</body>
<script>
//3. 创建vue实例
var VM = new Vue({
//定义 Vue实例挂载的元素节点,表示vue接管该div
el:'#app',
//4.定义model模型数据对象
data:{
name:"格子衫",
//对象类型数据
school:{
name:"xx教育",
mobile:"1001001"
},
//数组类型
names:["小斌","张百万","刘能"]
}
});
</script>
</html>
运行结果：
四、 声明式渲染的好处
不知有没注意到，在本文目录第二点 “为甚么使用Vue?” 中提到了声明式渲染。
那什么是声明式渲染呢？
Vue中的声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML.
下面请看一个例子，使用 jQuery 和 使用Vue两种方式渲染 html 数据的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{
{name}}</h2>
</div>
</body>
<!--
jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合 .
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("#app").append("<h2>Hello Word! !</h2>");
});
</script> -->
<!-- 在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以. -->
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //挂载点
data: {
name: "Hello Word! !", },
});
</script>
</html>
- 可以看到，原生 jQuery，如果要渲染 html 数据，需要在JS代码中获取到 dom对象，再进行数据的追加，有时候还需要内嵌html标签。这样是不是很麻烦，而且不方便阅读代码，另外，对dom操作还会使性能变低，影响用户体验。
- 而 Vue方式，先将数据在JS中通过Vue定义好，然后写html时，想在哪个标签上赋值直接写变量名即可，两边通过属性名动态绑定，一目了然！
O啦，以上就是Vue.js的入门介绍，是不是so easy~
tips:想学习更多，可以去看官方网站，链接已在文章开头给出
同时，我也上传了Vue每个知识点的 Demo到资源中，注释很详细，需要的朋友可点击下载：前端Vue示例代码