1.前端开发模式的发展过程
(1)静态页面
(2)异步刷新，操作DOM
1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。
ajax盛行：
-
2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
-
此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果
2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。
-
基于事件循环的异步IO
-
单线程运行，避免多线程的变量同步问题
-
JS可以编写后台代码，前后台统一编程语言
node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。
2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
(4)MVVM模式
-
-
V：即View，视图，页面渲染结果
-
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：
-
只要我们Model发生了改变，View上自然就会表现出来。
-
当用户修改了View，Model中的数据也会跟着改变。
2.Vue概述
前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。
vue中文官网：https://vuejs.bootcss.com/v2/guide/
3.
切换到下载栏，下载
点击如下安装包，下一步安装即可。
完成以后，在控制台输入：
node -v
看到版本信息：
(2)NPM
npm install nrm -g
4.vue快速入门
(1)创建工程
创建一个新的空工程：
然后新建一个module：
(2)安装vue
然后就会在vue_start目录发现一个node_modules目录，并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
(3)入门案例
<1>html模板
在vue_start目录下新建一个HTML
<2>vue声明式渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--vue对象的html模板--> <body> <div id="app"> <!--花括号：js表达式--> <h2>大家好，我是{{name}}</h2> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "lucky" } } ) </script> </html>
<3>双向绑定和事件处理
- 我们在data添加了新的属性：num
- 在页面中有一个input元素，通过v-model与num进行绑定。
- 同时通过{{num}}在页面输出
我们在页面添加一个按钮：
<input type="button" value="点我啊" v-on:click="num++">
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--vue对象的html模板--> <body> <div id="app"> <!--双向绑定，通过v-model操作--> <input type="text" v-model="num"> <!--定义一个事件，通过v-on:事件名=js表达式--> <input type="button" value="点我啊" v-on:click="add"> <!--花括号：js表达式--> <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "刘昊然", num: 100 }, methods: { add:function () { //this代表当前的实例 this.num=this.num+2; } } } ) </script> </html>
效果图：
5.vue实例
(1)创建Vue实例
// 创建vue实例
const app=new Vue(
{
el: "#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刘昊然",
num: 100
}
}
)
-
el
-
data
-
(2)
每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。
例如一段html模板：
<div id="app"> </div>
然后创建Vue实例，关联这个div
const vm = new Vue({
el:"#app"
})
<div id="app"> <input type="text" v-model="name"/> </div>
js:
const app = new Vue({
el:"#app",
data:{
name:"刘昊然"
}
})
- name的变化会影响到input的值
- input中输入的值，也会导致id为app的div中的name发生改变
(4)方法
Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。
<div id="app"> <!--双向绑定，通过v-model操作--> <input type="text" v-model="num"> <!--定义一个事件，通过v-on:事件名=js表达式--> <input type="button" value="点我啊" v-on:click="add"> <!--花括号：js表达式--> <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2> </div>
js:
<script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "刘昊然", num: 100 }, methods: { add:function () { //this代表当前的实例 this.num=this.num+2; } } } ) </script>
(5)
beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.})
beforeDestroy：该函数将在销毁实例前进行调用 。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。
6.指令
{{表达式}}
-
该表达式支持JS语法，可以调用js内置函数（必须有返回值）
-
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
-
注意：花括号只能在标签内容处使用，标签的属性上禁止使用。
示例：
HTML：
<div id="app">{{name}}</div>
JS:
const app = new Vue({
el:"#app",
data:{
name:"Jack"
}
})
(2)v-model
v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。在表单元素中使用。
-
input
-
-
textarea
-
checkbox
-
radio
-
components（Vue中的自定义组件）
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--vue对象的html模板--> <body> <div id="app"> <!--双向绑定，通过v-model操作--> <input type="text" v-model="num"> <!--定义一个事件，通过v-on:事件名=js表达式--> <input type="button" value="点我啊" v-on:click="add"> <!--花括号：js表达式--> <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="Swift" />Swift<br/> <h1> 你选择了：{{language.join(',')}} </h1> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "刘昊然", num: 100, language: [] }, methods: { add:function () { //this代表当前的实例 this.num=this.num+2; } }, } ) </script> </html>
-
-
radio对应的值是input的value值
-
text和textarea默认对应的model是字符串 -
select
效果图：
(3)v-on
<1>基本用法
v-on指令用于给页面元素绑定事件。
语法：
v-on:事件名="js片段或函数名"
html:
<input type="button" value="点我啊" v-on:click="add">
js:
<script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "刘昊然", num: 100, language: [] }, methods: { add:function () { //this代表当前的实例 this.num=this.num+2; } }, } ) </script>
-
.stop：阻止事件冒泡到父元素(了解) -
.prevent：阻止默认事件发生(掌握) -
.capture：使用事件捕获模式(了解) -
.self：只有元素自身触发事件才执行。(了解) -
.once
<button v-on:contextmenu="num++">增加一个</button>
添加prevent属性后：
<!--右击事件，并阻止默认事件发生--> <button v-on:contextmenu="num++">增加一个</button>
效果图分析：
未添加prevent的代码，右击按钮，会出现弹窗。
添加prevent的代码，右击按钮，不会出现弹窗。
<3>按键修饰符
<!--双向绑定，通过v-model操作--> <!--v-on:keyup.13表示回车键按下--> <input type="text" v-model="num" v-on:keyup.13="submit">
js:
<script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "刘昊然", num: 100, language: [] }, methods: { add:function () { //this代表当前的实例 this.num=this.num+2; }, submit(){ console.log("您已提交") } }, } ) </script>
-
.enter* -
.tab -
.delete(捕获“删除”和“退格”键)
示例：
<!--双向绑定，通过v-model操作--> <!--v-on:keyup.enter表示回车键按下--> <input type="text" v-model="num" v-on:keyup.enter="submit">
(4)v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
<1>遍历数组
语法：
v-for="item in items"
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--vue对象的html模板--> <body> <div id="app"> <!--双向绑定，通过v-model操作--> <!--v-on:keyup.enter表示回车键按下--> <input type="text" v-model="num" v-on:keyup.enter="submit"> <!--定义一个事件，通过v-on:事件名=js表达式--> <input type="button" value="点我啊" v-on:click="add"> <!--花括号：js表达式--> <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="Swift" />Swift<br/> <h1> 你选择了：{{language.join(',')}} </h1> <!--右击事件，并阻止默认事件发生--> <button v-on:contextmenu="num++">增加一个</button> <ul> <li v-for="user in users"> {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "刘昊然", num: 100, language: [], users:[ {name:'柳岩', gender:'女', age: 21}, {name:'峰哥', gender:'男', age: 18}, {name:'范冰冰', gender:'女', age: 24}, {name:'刘亦菲', gender:'女', age: 18}, {name:'古力娜扎', gender:'女', age: 25} ] }, methods: { add:function () { //this代表当前的实例 this.num=this.num+2; }, submit(){ console.log("您已提交") } }, } ) </script> </html>
效果图：
<2>遍历角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法：
v-for="(item,index) in items"
-
-
item：迭代得到的数组元素别名
-
示例：
<li v-for="(user, index) in users"> {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}} </li>
效果图：
<3>遍历对象
v-for除了可以迭代数组，也可以迭代对象。语法基本类似
语法：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-
-
2个参数时，第一个是属性值，第二个是属性名
-
示例：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--vue对象的html模板--> <body> <div id="app"> <!--双向绑定，通过v-model操作--> <!--v-on:keyup.enter表示回车键按下--> <input type="text" v-model="num" v-on:keyup.enter="submit"> <!--定义一个事件，通过v-on:事件名=js表达式--> <input type="button" value="点我啊" v-on:click="add"> <!--花括号：js表达式--> <h2>大家好，我是{{name}}，有{{num}}位女神为我着迷。</h2> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="Swift" />Swift<br/> <h1> 你选择了：{{language.join(',')}} </h1> <!--右击事件，并阻止默认事件发生--> <button v-on:contextmenu="num++">增加一个</button> <ul> <li v-for="(user, index) in users"> {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul> <ul> <li v-for="(value, key, index) in user"> {{index + 1}}. {{key}} - {{value}} </li> </ul> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "刘昊然", num: 100, language: [], users:[ {name:'柳岩', gender:'女', age: 21}, {name:'峰哥', gender:'男', age: 18}, {name:'范冰冰', gender:'女', age: 24}, {name:'刘亦菲', gender:'女', age: 18}, {name:'古力娜扎', gender:'女', age: 25} ], user:{name:'柳岩', gender:'女', age: 21} }, methods: { add:function () { //this代表当前的实例 this.num=this.num+2; }, submit(){ console.log("您已提交") } }, } ) </script> </html>
效果图：
(5)v-if和v-show
<1>基本使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
注意：v-if和v-show的效果是一样的。我们优先使用v-if
语法：
v-if="布尔表达式"
示例：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <button v-on:click="show = !show">点我呀</button> <br> <h1 v-if="show"> 看到我啦？！ </h1> <h1 v-show="show"> 看到我啦？！show </h1> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { show: true } }) </script> </html>
效果图：
<2>与v-for结合使用
<ul> <li v-for="(user, index) in users" v-if="user.gender == '女'"> {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul>
Js:
<script> // 创建vue实例 const app=new Vue( { el: "#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "刘昊然", num: 100, language: [], users:[ {name:'柳岩', gender:'女', age: 21}, {name:'峰哥', gender:'男', age: 18}, {name:'范冰冰', gender:'女', age: 24}, {name:'刘亦菲', gender:'女', age: 18}, {name:'古力娜扎', gender:'女', age: 25} ], user:{name:'柳岩', gender:'女', age: 21} }, methods: { add:function () { //this代表当前的实例 this.num=this.num+2; }, submit(){ console.log("您已提交") } }, } ) </script>
效果：
只显示女性用户信息
<3>v-else
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span> <h1 v-if="random >= 0.75"> 看到我啦？！if </h1> <h1 v-else-if="random > 0.5"> 看到我啦？！if 0.5 </h1> <h1 v-else-if="random > 0.25"> 看到我啦？！if 0.25 </h1> <h1 v-else> 看到我啦？！else </h1> </div> </body> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { random: 1 //设置random的初始值 } }) </script> </html>
效果图：
(6)v-bind
html属性不能使用双大括号形式绑定，只能使用v-bind指令。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .active{ color: red; } </style> <body> <!--当v-model对应的输入框的值大于0时，button按钮的样式会修改，颜色会变成红色--> <div id="app"> <input type="text" v-model="store"> <input type="button" v-bind:class="{active:store>0}" value="加入购物车"> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { store: 0 } }) </script> </html>
效果图：
注意：
(7)计算属性
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .active{ color: red; } </style> <body> <!--当v-model对应的输入框的值大于0时，button按钮的样式会修改，颜色会变成红色--> <div id="app"> <input type="text" v-model="store"> <input type="button" v-bind:class="{active:store>0}" value="加入购物车"> <h1>您的生日是：{{birth}} </h1> </div> </body> <script src="node_modules/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { store: 0, birthday:1429032123201 // 毫秒值 }, computed:{ birth(){// 计算属性本质是一个方法，但是必须返回结果 const d = new Date(this.birthday); return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay(); } } }) </script> </html>
效果图：
扫一扫
3881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
