目录
vue
概述
是一个轻量级的前端框架.封装了HTML CSS JS的代码.
特点:
1, 是一个轻量级的 渐进式的框架, 按需配置
2, 实现了数据驱动/双向绑定 和 组件化的思想(高内聚)
3, vue框架可以避免了DOM的API
4, 遵循了MVVM设计模式,实现前端代码的松耦合
M是Model,是指数据
V是View,是指视图
VM是ViewModel,是指在指定视图里渲染指定数据
官网:
https://cn.vuejs.org/ #官网
https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本
MVVM框架
入门案例
把vue.js导入到你的项目中
上面看似结构非常简单,其实却深藏奥秘。和传统框架不同,Vue采用了最新的MVVM框架,它最大的特点就是:传统js机制操作的是页面,如我们之前写的html+css+js案例,大家会发现页面和页面里的数据混杂在一起。
而MVVM框架体系引入后端早已深入人心的分层思想,是后端MVC框架的延伸,实现把数据和页面分离。我们可以在页面布局好后,只对数据进行操作,当数据改变,页面上的内容会自动随之改变,而无需开发者开发专门的代码去改变,如之前ajax技术实现的局部刷新。
简而言之,MVVM框架实现了页面和数据的分离,代码结构更加清晰,责任更加明确,同时实现自动化,数据变化,页面随之变化,无需写代码,非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的,也是前端为何开始推崇Vue这些框架的根本原因,也标示着jquery的终结。
创建HTML文件,并引入vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue框架</title>
<!-- 1.引入vue.js来用vue框架的核心功能
src用来指定js文件的位置
-->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.准备解析vue的数据
{{message}}是插值表达式,用来获取message的值
-->
<div id="app"> {{message}} </div>
<!-- 3.给第二步准备数据 -->
<script>
var a={
message:"hello vue~"
}
//1,创建Vue对象
new Vue({
//el挂载点,意思是,把数据挂载到指定位置
el:"#app",//利用CSS的id选择,选中了网页中的元素
//data是vue为挂载点准备好的数据
data:a
})
</script>
</body>
</html>
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习 vue开发步骤</title>
<!-- 1.引入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区,插值表达式获取属性的值-->
<div id="app">
姓名:{{name}}
年龄:{{age}}
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
el:"#app" , //挂载点
data:{ //给挂载点准备数据
name:"jack" ,
age:20
}
})
</script>
</body>
</html>
Vue的基础语法
–1,运算符&函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的运算符</title>
<!-- 1.引入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 创建Vue对象 -->
<div id="app">
加减乘除运算: {{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
三元运算符: {{ age > 18 ? "成年人" : "未成年" }}
字符串的常见操作:{{str}} {{str.length}} {{str.concat(100)}}
调用函数: {{ show() }} {{ print(100) }} {{add(1,2)}}
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
//指定挂载点的位置,每个Vue对象必须有这个el属性!!!
el:"#app",
data:{ //给数据渲染区准备数据
age:10,
str:"hello"
},
methods:{ //准备函数
//函数名:函数的声明
show:function(){
console.log("show()调用成功!");
},
print:function(a){
console.log("print()调用成功"+a);
},
add:function(a,b){
console.log(a+b);
}
}
})
</script>
</body>
</html>
–2,解析类型丰富的data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue解析复杂的数据</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{name}}
<h1>解析vue对象的数据:</h1>
<h1>姓名:{{person.name}} 年龄:{{person.age}} </h1>
<h1>解析vue数组的数据:</h1>
<h2>{{hobby}} {{hobby[0]}} {{hobby[1]}} </h2>
<!-- 数组名[下标].属性名 目的是来获取每个对象中属性对应的值 -->
<h2>{{persons[0].name}} {{persons[1].age}}</h2>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"jack",
//对象名:对象的多个特征
person:{
name:"rose",
age:20
},
//数组
hobby:["篮球","足球"],
//数组
persons:[
{ name:"jack" , age:20 },
{ name:"rose" , age:10 }
]
}
})
</script>
</body>
</html>
–3,data的三种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue里data的三种写法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">{{msg}}</div>
<script>
new Vue({
el : "#app" ,
// 数据的三种写法:标准写法
// 第一种形式
// data : {
// msg : "hello vueeee~~~"
// }
// 第二种形式:定义函数,返回对象
// data:function(){
// return {
// msg:"hi~vue"
// }
// },
// 第三种形式:定义函数,es6的简写法
data(){
return {
msg:"vue hi~"
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue里data的三种写法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
{{msg}} {{hobby[0]}}
</div>
<script>
new Vue({
el:"#a",
//通过函数,设置返回值--vue项目中组件化的使用
// data:function(){
data(){//效果同上,是上面代码的简写形式
//必须返回js对象
return {
msg:"hello vue",
hobby:[1,2,3]
}
}
})
</script>
</body>
</html>
二,Vue的指令
–1,概述
就是Vue框架提供的一些有特殊意义的代码,都有v-的前缀
常见的指令: v-if v-for v-on …
使用方式: 在开始标签处,添加新的属性,有v-的前缀的标识
–2,v-model & v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue.js"></script>
<style>
/* 语法: 选择器{样式1;样式2;...} */
[v-cloak]{/* 选中有指定属性的元素 */
display: none; /* 隐藏 */
}
</style>
</head>
<body>
<!-- 2.v-cloak指令:解决插值表达式的闪现问题 -->
<div class="a" v-cloak>
{{address}} {{address}} {{address}}
<!-- 1.v-model指令:双向绑定,是指V和M的数据可以实时同步
address值是指你的数据要和哪个属性进行绑定.
可以获取也可设置属性的值
-->
<input type="text" v-model="address"/>
</div>
{{address}}
<script>
new Vue({
el:".a",
data(){
return{
address:"北京"
}
}
})
</script>
</body>
</html>
-3,v-if & v-show & v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
<!-- 3.v-text和v-html 指令 都是用来获取属性值的,
区别是:前者无法解析HTML标签只能当做一个普通文本展示
后者可以解析数据中出现的HTML标签
-->
<h1 v-text="name"></h1>
<h1 v-html="name"></h1>
<!--4.v-if指令,判断条件满足时就展示元素,不满足就不展示
了解:v-if和v-show区别?都可以判断,不满足时前者干脆不会解析元素
后者会解析这个元素但是结合css代码来隐藏style="display: none;"
-->
<div v-if="age>18">年成人</div>
<div v-show="age>18">年成人</div>
<!--5.v-if指令的复杂使用 if...else if...else语法同java-->
<div v-if="salary>20000">金领</div>
<div v-else-if="salary>10000">白领</div>
<div v-else>屌丝</div>
<!--6.v-for指令用来循环遍历,通常用来遍历数组,语法类似forin,
i是获取遍历得到的数据,in是固定语法,hobby是数组名,index是下标
-->
<div v-for="i in hobby">{{i}}</div>
<div v-for="i,index in hobby">{{i}}--{{index}}</div>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
name:"<p>tony</p>",
age:10,
person:{
salary:10000
},
hobby:["吃","喝","王者","Anglelababa"]
}
}
})
</script>
</body>
</html>
–4,v-on & v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测 vue指令</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 0.是HTML的元素 -->
<button onclick="alert(1)">按钮1</button>
<a href="https://www.baidu.com/">百度一下</a>
<div id="app">
<!-- 1.v-on指令:给元素绑定不同的事件,可以简写成@ -->
<button v-on:click="show()">按钮2</button>
<button v-on:dblclick="print(100)">按钮3</button>
<button @click="add(1,2,3)">按钮4</button>
<!-- 问题:跳转时404,没有把url当变量,而是直接把整体当做跳转路径 -->
<a href="{{url}}">百度一下1</a>
<!-- 2.v-bind指令:把url当变量,去获取了变量的值进行跳转
v-bind:href可以简写成:href,意思是后面出现的url是变量不是字符串
-->
<a v-bind:href="url">百度一下2</a>
<a :href="url">百度一下3</a>
</div>
<script>
new Vue({
el:"#app",
data:{
url:"http://www.baidu.com/"
},
methods:{
//函数名:函数声明(参数列表){函数体}
show:function(){
console.log(100)
} ,
print:function(a){
console.log(a);
},
//函数名(参数列表){函数体},是上面函数的简写方式
add(a,b,c){
console.log(a+b+c);
}
}
})
</script>
</body>
</html>
三,Vue组件Component
–1,概述
好处:可以提高前端代码的复用性.
使用步骤:
1,定义组件: 全局组件 + 局部组件
2,使用组件: 就像使用HTML的标签一样
–2,全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Component组件</title>
<!-- 1.组件是vue.js的核心功能,先导入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.在数据渲染区 -->
<div id="app">
<!-- 3.2,使用组件,就像使用HTML的标签一样 -->
<Person></Person>
</div>
<div id="a">
<Person></Person>
</div>
<!-- 3.创建Vue对象 -->
<script>
//全局组件:作用范围是可多个Vue对象使用,可以在所有的渲染区使用
//3.1,创建全局组件--1是组件名2是组件内容
// Vue.component(1,2)
Vue.component('Person',{
// template:组件具体要啥内容
template:"<h1>姓名:jack,年龄:20</h1>"
})
new Vue({
el:"#app"
})
new Vue({
el:"#a"
})
</script>
</body>
</html>
–3,局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 局部组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<Car></Car><!-- 2.使用了局部组件 -->
<Student></Student><!--使用了全局组件-->
</div>
<div id="a">
<Student></Student><!--使用了全局组件-->
</div>
<script>
//全局组件
Vue.component('Student',{
template:'<h1>这是一个全局组件</h1>'
})
//局部组件:只能当前对象(在指定的数据渲染区)使用
new Vue({
el:"#a"
})
new Vue({
el:"#app",
//1.创建局部组件
components:{
//组件名:组件的内容
Car:{
template:"<p>这就是Car组件!</p>"
}
}
})
</script>
</body>
</html>
四,Vue的Ajax
–1,Ajax的概述
Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言,而是多种技术的综合应用
Ajax是 客户端 的技术,它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
可以避免刷新整个网页,而实现了局部刷新的效果,异步访问的.
提高了网页的动态性,提高了网页的响应速度.
在Vue框架中,封装了Ajax的复杂语法,技术命名叫axios,
使用步骤: 导入vue.js + axios.js 文件
语法: axios.get(java程序的访问方式).then( a => { console.log(a); } )
–2,Ajax的原理
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
–3,axios(导入)
1, Vue中封装了ajax并增强了它,在异步并发处理优于原生ajax。称为:axios(ajax input output system)
2, 使用步骤: 要使用一个单独的js文件,注意导入顺序
<script src="vue.js"></script>
<script src="axios.min.js"></script>
3, 语法
axios.get("url地址信息","参数信息").then(res=>{
console.log(res.data);
})
–4,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 axios的语法</title>
<!-- 1.导入js文件:
vue.js核心 + vue-router.js是路由 + axios.js使用vue封装好的Ajax技术
-->
<script src="vue.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="show()">按钮</button>
</div>
<script>
//Vue的属性:el挂载点 + data数据区 + methods方法区
//components局部组件 + router创建路由
new Vue({
el:"#app" ,
methods:{
show(){
//vue提供的对象,get函数是指即将发起一个get请求
//参数是一段java程序的访问方式
//当程序访问成功时,then函数是vue自动调用的函数
axios.get('http://www.baidu.com/').then(
//a记录着java程序的返回值return
//=>叫箭头函数
a => {
//在函数体重,处理返回的结果
console.log(a.data);
}
)
}
}
})
</script>
</body>
</html>
五,Vue路由
–1,概述
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
基于Vue组件化的思想,
从用户发起一个请求,一直到展示指定组件,这个过程就是Vue路由负责的
使用步骤: vue.js + vue-router.js 引入到网页中
–2,使用步骤(测试)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue路由</title>
<!-- 1.引入js文件,注意顺序! -->
<script src="vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区,即将展示组件的功能 -->
<div id="app">
<!-- 3.4,点击不同的元素,即将路由到不同的组件 -->
<router-link to="/home">主页</router-link>
<router-link to="/help">帮助页</router-link>
<!-- 3.5,展示组件的内容 -->
<router-view></router-view>
</div>
<!-- 3.创建Vue对象 -->
<script>
//3.3,创建组件,让路由动态匹配
var home={
template:'<h1>我是主页..</h1>'
}
var help={
template:'<h1>我是帮助页..</h1>'
}
//3.2,创建路由的细则
//VueRouter表示vue路由的对象,routes属性用来描述细则
var router=new VueRouter({
//属性名:属性值
routes:[
//根据不同的请求,路由到不同的组件
//path:访问路径,component:组件名称
{path:"/home",component:home} ,
{path:"/help",component:help}
]
})
new Vue({
el:"#app",
//3.1,设置路由功能
// router:router //key 和value一样时,可以简写
router//同上,简写形式
})
</script>
</body>
</html>
–3,总结
扩展:
–1观察者模式
设计模式是最精髓的东西,是软件思想的体现,是软件的灵魂。如三大框架SSM只所以傲视群雄,它的傲娇,它的底气就来自对经典设计模式的全面应用。所以如果只会应用不懂其义,那你只是个码农;如何能领会设计模式的奥义,你就有了高级程序员的潜力;如果你能自己仿写,你就有了架构师的入门证。
Vue这类为何称之为框架,就是其不是简单的编程,而是应用了经典的设计模式,那它应用了什么什么模式呢?它应用了"观察者设计模式"。
那什么是观察者设计模式呢?
观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个目标对象,当这个目标对象的状态发生变化时,会通知所有观察者对象,使它们能够自动更新。
- 页面data中的address就是数据,get为获取当前数据,set为设置数据新值
- 观察者watcher就为那多个插值表达式和input文本框,在页面加载时这些关系进行绑定
- 当我们让数据变化时,如input文本框修改内容,其就调用数据的set的方法,把数据进行更新,其更新就被vue框架通知notify众多的观察者。如众多的插值表达式就会触发trigger,进行再次渲染re-render,修改虚拟dom树。最终vue框架局部宣传页面
- 同样,当我们利用谷歌浏览器改变数据v.address赋值时,就调用数据的setter方法进行数据更新,数据更新后,通知众多的观察者,观察者更新如上面的流程
可以看出Vue设计非常巧妙,我们页面展现的数据,必然会涉及到数据的读写,于是Vue实现了一整套机制,这套机制监控数据的获取(get),数据的更新(set),这样当数据变化,Vue就能知道。它知道有什么用呢?它就能控制当数据变化时就能重新进行页面的渲染,从而用户看到页面展现新的内容。
HBuilderX自定义模板
–1,自定义HTML模板
注意:模板是根据选择的文件类型独立的,我们现在是创建的html模板,只有创建html时,才能选择这个模板。
–2,vue模板.txt
创建vue模板.txt,文件名自定义。这样就无需每次敲这些重复的代码,高效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
<script>
new Vue({
el: "#app",
data:{
msg : "hello vue"
}
})
</script>
</html>