一:vue基本概念概述
Vue.js 入门
1. 细说MVC和MVVM设计模型
(1).MVC:
[1]. 背景:Web项目需求日益复杂,为了使项目简化,采用了MVC架构,实现了前端UI展示,
与后端业务逻辑处理的完全分离,利于前后端开发人员分工协作,提升效率
[2]. MVC:是Model-View-Controller的缩写;
[3]. M:Model,模型,主要处理与数据库相关的业务逻辑;
V:View,视图,主要负责数据在***端/浏览器上的展示;
C:Controller:控制器,视图与模型之间传递消息,例如接受请求,选择模型,渲染视图等;
[4]. MVC基本的运行流程是:
1. 视图发起请求-->控制器接收请求-->转发给对应模型处理-->模型将结果返回到控制器-->控制器返回到视图;
2. 简单描述: View-->Controller-->Model-->Controller-->View, 即 V-C-M-C-V;
3. 整个过程是封闭的,单向的,视图与模型之间不允许直接直接通讯,必须通过控制器进行;
[5]. MVC开发的基本原则:
1. 需要服务器端配合,模型Model与控制器Controller都在服务器端完成;
2. 服务器处理过的数据,必须通过JavaScript在前端进行渲染;
2. '厚模型,薄控制器',业务逻辑尽可能写到模型中,控制器仅调用模型提供的接口即可;
(2).MVVM:
[1].随着前端页面开发越来越复杂,用户与数据的交互也越来越频繁,而很多交互都是临时性的,没有必要每一次都要
和服务器中的模型对象进行交互,但是传统的jQuery等函数库又力不从心,这时MVVM模型就应运而生啦。
[2].MVVM: 是Model-View-ViewModel的缩写;
M:Model层, V:View层, VM: ViewModel层;
[3].Model:JavaScript对象/模型, View:HTML代码/模板,各司其职,完全分离
[4].VM层:负责Model与View之间的交互,完全使用JavaScript进行编写;
[5].基本流程: VM层根据Model数据来更新View,或者根据View来更新Model,这个过程是双向的,即双向数据绑定;
[6].服务器端只负责更新Model即可,而Model就是一个JavaScript对象,所以服务器只需要返回可被Model解析的
数据即可,例如:json,html等,这样就完全实现了面向接口/API编程。
[7].Vue.js就是一个完全采用了MVVM机制的前端开发框架,采用从底层向上的渐进式开发思想,易学易用!
----------------------------------------------------------------------------------------------
2. Vue.js 是什么? 如何导入到项目中?
[1].Vue.js作者也是中国人:尤雨溪
1.中国上海复旦附中毕业后,去了美国上大学,学的是艺术,并获得艺术硕士学位,
2.之前在谷歌工作,2014年开发出了Vue.js前端库,这是一个用来快速构造Web界面的javascri库,通过简洁的API提供高效
的数据双向绑定和灵活的组件式开发系统。
3.2016年9月,以技术顾问身份***阿里巴巴Weex团队;
[1].打开Vue.js官网(中文版): cn.vuejs.org,点击头部导航区的"学习",选择"教程",再点击"安装";
[2].Vue不再支持IE8及以下版本,例如IE6,IE7这类老古董,大家开发时不必再考虑,除非***指定必须兼容;
[3].官方提供了三种安装方式:
1.<script>标签导入: 有二个版本可以选择
(1). 完整开发版本:包括警告与调试模式,推荐学习与开发阶段使用;
(2). 压缩精简版本:删除警告等多余内容,非常短小,适合线上***环境使用;
2.命令行方式:
(1). npm: 需要Node.js支持,配合前端资源打包器Webpack使用;
(2). cli: 官方提供的脚手架工具,进一步简化了vue项目创建的难度,更加智能和自动化;
我们的课程采用传统的<script>标签引入方式,将源码下载的本地,当然也可以使用cdn引入:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
[4].测试是否引入成功
----------------------------------------------------------------------------------------------
3. 基本术语:
1. 实例: Vue.js本身就是一个构造函数,可以用来创建对象,使用Vue第一步,就是要创建一个Vue实例:new Vue();
2. 实例参数: Vue()接受一个js字面量对象做为参数,所有的功能,都以对象属性的方式进行设置;
3. 挂载点: Vue实例的作用域,本质上就是通过css选择器获取到的页面元素;
4. 模板: 带有html标签的字符串;
5. 值/变量: 挂载点中的文本内容;
6. 属性: 描述模板或html标签;
7. 事件: 模板或元素上发生的系统或用户事件,例如点击,移动等;
二.vue导入
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向数据绑定</title> </head> <body> <div id="box"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script> console.log(new Vue()); </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三.挂载点与变量显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>挂载点和属性的引用</title>
</head>
<body>
<!--创建一个挂载点-->
<div id="box">
<!--以插值的方式显示内容-->
{{message1}}
<!--使用模板指令v-text显示一个变量-->
<p v-text="message1"></p>
<!--如果变量中有html标签-->
<!--v-text指定是将变量内容原样输出,不会解析文本中的html标签-->
<p v-text="message2"></p>
<!--如果想显示一个带有html标签的字符串,需要用v-html指令:类似js中的innerHTML-->
<p v-html="message2"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
// 创建Vue实例:用一个对象字面量做为参数
new Vue({
//绑定挂载点
el: '#box',
//data属性: 创建数据模型:对应MVVM设计模式中的Model层
data: {
//显示一个变量
message1: 'Vue.js开发基础',
//如果变量的内容是一个有html标签的文本
message2: '<h3 style="color:red">php中文网</h3>'
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五.模板,属性与事件
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板,属性与事件</title>
</head>
<body>
<!--创建一个挂载点-->
<div id="box">
<!--创建一个挂载点-->
<!--1.模板绑定-->
<!--<h3>《JavaScript权威指南》</h3>-->
<h3>{{message}}</h3>
<!--模板除了可以写在挂载点内,还可以写到Vue实例的属性中-->
<!--下面我们将h3中的内容写到Vue实例中-->
<!--2.属性绑定-->
<!--可以给模板标签绑定属性: v-bind -->
<!--之前是直接用标签写列的-->
<h3 style="color:red;">{{message}}</h3>
<!--vue实例也可以接管模板的属性,并实现绑定,使用v-bind指令-->
<!--<h3 v-bind:style="style">{{message}}</h3>-->
<!--属性绑定是常用操作,Vue提供了简写指定: 冒号-->
<h3 :style="style">{{message}}</h3>
<!--此时,:style的值"style"已经不是一个普通字符串了,而是一个表达式,可以进行运算,例如字符串拼装-->
<h3 :style="style + 'font-size:2rem;'">{{message}}</h3>
<!--3.事件绑定-->
<!--还可以给模板绑定事件: v-on:事件名称="事件方法"-->
<!--事件对应的方法必须写到Vue实例中的methods属性中,该属性也是一个对象-->
<h3 v-on:click="showDesc">{{message}}</h3>
<!--由于给模板添加事件是常用操作,所以Vue提供了一个简写语法:@-->
<h3 @click="changeText">{{message}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
// 创建Vue实例:用一个对象字面量做为参数
new Vue({
//绑定挂载点
el: '#box',
//data属性: 创建数据模型:对应MVVM设计模式中的Model层
data: {
//显示一个变量
message: 'Vue.js开发基础',
//如果变量的内容是一个有html标签的文本
message2: '<h3 style="color:red">php中文网</h3>'
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六.双向数据绑定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
</head>
<body>
<!--创建一个挂载点-->
<div id="box">
<!--input标签的特点:即可显示内容,也可以输入内容/即更新内容-->
<!--<input type="text">-->
<!--给input绑定一个属性,与数据模型中的info也进行绑定: v-bind:value="info"-->
<!--<input type="text" :value="info">-->
<!--现在我的需求是: 当input中的内容发生变化时,对应的数据模型中的数据也会同步发生变化 -->
<!--显然:v-bind指令无法完成,vue又提供一个v-model指令,可以实现模型中的数据随页面数据变化而变化-->
<input type="text" v-model="info">
<!--单向绑定: 页面中的数据内容由数据模型决定-->
<!--双向绑定: 模型中的数据内容由页面中的数据决定-->
<h3>{{info}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
// 创建Vue实例:用一个对象字面量做为参数
new Vue({
//绑定挂载点
el: '#box',
//data属性: 创建数据模型:对应MVVM设计模式中的Model层
data: {
//数据模型
info:'html'
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七.监听器的使用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侦听器</title>
</head>
<body>
<!--创建一个挂载点-->
<div id="box">
用户名:<input type="text" v-model="username"> <br>
<h3>{{length}}</h3>
<h3 v-show="isShow" :style="warning">{{message}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
// 创建Vue实例:用一个对象字面量做为参数
new Vue({
//绑定挂载点
el: '#box',
//data属性: 创建数据模型:对应MVVM设计模式中的Model层
data: {
//数据模型
username:'',
length:0,
message:'用户名太短',
isShow:false,
warning:'color:red'
},
watch:{
username:function () {
this.length++;
if(this.length<6){
this.isShow=true;
}else{
this.isShow=false;
}
}
}
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例