VUE教程
目录
1. VUE简介
https://cn.vuejs.org/index.html
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1-1. 技术发展的过程：
我们在技术的发展过程中，从服务端渲染的模式逐渐转换为前后端分离，前端逐渐工程化的发展不仅减少了后端的工作量，而且也使得一大批前端框架出现。因此，我们作为前端开发者，就要了解并学习如同Angular、vue、react一样的很多前端渐进式框架。因此你可以跟着白泽的文档继续学习，也可以点击上边的链接，去往vue的官方教程，相信我，每一种方式都会使你获益匪浅。
技术发展路径：
服务端渲染 —> 前后端分离—>单页应用—>Vue框架
-
服务端渲染
- 后端渲染前端页面
-
前后端分离
- 前后端分离，整个页面渲染数据
-
单页应用
- 前后端分离的基础上，部分页面渲染页面内容
-
VUE框架
- 运行包含vue的js，使用框架渲染部分页面内容
2. 使用VUE框架
2-1. 构建你的第一个VUE程序
-
安装VUE
-
方法1（npm）：
npm install vue -
方法2（直接下载）：
-
-
在你的页面引入VUE
-
CDN
<!--开发环境--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!--生产环境--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> <!--如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：--> <script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js' </script> -
引入你下载的文件
<script src="../vue.js"></script>
-
-
构建你的第一个VUE程序
<body> <!-- 模板--》 vue --》渲染真实DOM --> <div id="app"> {{message}}白泽 </div> <script src="../vue.js"></script> <script> var app = new Vue({ // 创建的vue控制哪个内容 el:"#app", // 页面中要显示的动态数据 data:{ message:'hello' } }) </script> </body>你将在页面中看到如下的内容：
此时你只需要在console控制台输入如下内容，便可以改变页面显示效果：
app.message = "你好帅"显示效果如下：
我们把以上这种可动态修改的数据成为响应式数据，即当数据发生改变时，页面将会重新进行渲染
-
示例：
<!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> <style> *{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; } ul{ margin: 20px 40px; width: 400px; border: 1px solid #f40; padding: 20px 20px; border-radius: 10px; } li{ background: #f40; color: white; padding: 20px 12px; margin: 20px 0px; border-radius: 5px; } .title{ text-align: center; } button{ cursor: pointer; background-color: #f40; border: none; color: white; } </style> </head> <body> <div id="app"> <ul> <li class="title">信息登记</li> <li v-for="(item,i) in person"> 姓名：{{item.name}} 性别：{{item.sex}} 手机号：{{item.phone}} 点赞人数:{{item.like?item.like:'无'}} <button @click="changeStock(item,item.like+1)">赞</button> <button @click="changeStock(item,item.like-1)">踩</button> <button @click="remove(i)">删除</button> </li> </ul> <p>总like人数{{total}}</p> </div> <script src="../vue.js"></script> <script> var app = new Vue({ el:"#app", // 数据 data:{ person:[{ name:"张三", sex:"男", phone:"17283728172", like:10 },{ name:"李四", sex:"男", phone:"18293828192", like:9 },{ name:"Lisa", sex:"女", phone:"48278838382", like:7 }] }, // 计算属性 computed:{ total(){ // 返回计算总like人数（可以使用循环person去加） // reducer 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加 return this.person.reduce((a,b) => a + b.like , 0); } }, // 方法 methods:{ changeStock(person,newStock){ if(newStock < 0){ newStock = 0; } person.like = newStock; }, remove(index){ // 从索引为idnex的位置删除1个元素 this.person.splice(index,1); } } }) </script> </body> </html>示例效果如下：
> 现阶段，你并不需要知道如上代码的实现原理，只需要知道，有了VUE以后，曾经需要循环和绑定的一些数据和事件，都会变得简单起来。而新的框架出现的意义正是让大家更方便的去创造和产出内容。
2-2.VUE核心原理
https://cn.vuejs.org/v2/guide/reactivity.html
简单来说，VUE的核心原理为虚拟DOM树。过程如下
-
创建实例
-
注入
-
首次渲染
-
编译生成虚拟DOM树
-
挂载
-
-
已挂载
在数据变动时，VUE将会重新进行渲染
-
重新生成虚拟DOM树
-
对比新旧两个DOM树的差异
-
将差异应用到真实DOM
-
完成渲染
实例
<!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>VUE的一些核心概念</title>
<!-- VUE会生成部分页面或者生成全部的页面（即，部分挂载或者全部挂载） -->
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
author:"zhang",
title:"this is a title"
},
// 这是一段恶心的代码 This is a disgusting piece of code(所有的代码最后都会渲染成为render，然后将虚拟节点树渲染 成为 真实的节点树)
render(h){
console.log("render");
return h("div",[
h("h1",`first vue`),
h("p",`this is a ${this.author}`)
])
},
// This is also a disgusting piece of code
template:`
<div id="app">
<h1>{{title}}</h1>
<p>{{author}}</p>
</div>
`
})
</script>
</body>
</html>
2-3. VUE组件
这部分内容学习完成后，我们就可以开始构建一些简单的应用了，在后续的章节中，我会从项目入手，带大家逐渐熟悉VUE的其他新的特性，现在，让我们先来了解VUE的组件。
-
创建组件
<div id="app"></div> <script src="../vue.js"></script> <script> //自定义一个组件 var myButton = { data(){ return{ count:0, }; }, template:`<button>当前点击了{{count}}次</button>` } var app = new Vue({ data:{ } }) //这是另一种挂载目标元素的方法 app.$mount("#app") </script>组件需要注意以下几点：
-
无
el -
data必须是一个函数，该函数返回的对象为数据 -
由于没有
el配置，组件的虚拟DOM树必须在template或者render中
-
-
注册组件
-
全局注册
全局注册后，整个页面都可以使用这个组件
Vue.component("组件名称","组件配置对象"); Vue.component("Button1",myButton); Vue.component("Button2",{ data(){ return{ count:0, }; }, template:`<button>当前点击了{{count}}次</button>` });以下是一个小的DEMO
<body> <div id="app"></div> <script src="../vue.js"></script> <script> // 定义一个组件 var myButton = { data(){ return{ count:0, }; }, template:`<button @click="count++">当前点击了{{count}}次</button>` } // 注册组件 // Vue.component("组件名称","组件配置对象"); Vue.component("Button",myButton); // 使用注册的组件 var app = new Vue({ data:{ }, template:` <div> <Button></Button> <Button></Button> <Button></Button> <Button></Button> </div> ` }) app.$mount("#app") </script> </body> -
局部注册
局部注册
// 定义一个组件 var myButton = { data(){ return{ count:0, }; }, template:`<button @click="count++">当前点击了{{count}}次</button>` } // 使用注册的组件 var app = new Vue({ data:{ }, template:` <div> <Button/> <Button></Button> <Button></Button> <Button></Button> </div> `, // 局部注册 components:{ // "组件名":"组件配置对象", "Button":myButton } })一下是一个小的DEMO
<body> <div id="app"></div> <script src="../vue.js"></script> <script> // 定义一个组件 var myButton = { data(){ return{ count:0, }; }, template:`<button @click="count++">当前点击了{{count}}次</button>` } // 使用注册的组件 var app = new Vue({ data:{ }, template:` <div> <Button/> <Button></Button> <Button></Button> <Button></Button> </div> `, // 局部注册 components:{ // "组件名":"组件配置对象", "Button":myButton } }) app.$mount("#app") </script> </body>
-
-
使用组件的注意事项
-
组件必须有结束
<Button/> <Button></Button> <Button></Button> <Button></Button> -
组件命名方式
-
大驼峰命名法
PersonName -
短横线命名法
Person-Name
-
-
-
组件树
-
VUE实例
-
组件1
-
组件3
-
组件3
-
-
组件2
-
组件1
-
组件3
-
组件3
-
-
-
-
-
向组件传递数据
<body> <div id="app"></div> <script src="../vue.js"></script> <script> var Title = { props:["biaoti","neirong"], template:`<h1>{{biaoti}}{{neirong}}</h1>` }; var app = new Vue({ data:{ title1:"标题1" }, components:{ "Title":Title }, template:` <div> <Title biaoti="标题1" neirong="demo1"/> <Title biaoti="标题2" neirong="demo2"/> <Title biaoti="标题3" neirong="demo3"/> </div> ` }) app.$mount("#app"); </script> </body>需要注意的是组件的所有数据都是单向数据流，即谁的数据由谁来改。
2-4. 工程结构
4007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
