Vue基础
前言
本文为Vue框架基础知识、语法与使用介绍,Java全栈学习路线可参考:【Java全栈学习路线】最全的Java学习路线及知识清单,Java自学方向指引,内含最全Java全栈学习技术清单~
一、MVVM模式的实现者
- Model:模型层,这里标识JavaScript对象
- View:视图层,在这里表示DOM(HTML操作的元素)
- ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者
注意:
ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
ViewModel能够监听到视图的变化,并能够通知数据发生改变
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--视图层DOM-->
<div id="app">
<!--拿到数据data-->
{ {message} }
</div>
<!--
ViewModel在浏览器端显示
ViewModel连接视图和数据的中间件
ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化,并能够通知数据发生改变
Vue.js 就是一个 MVVM 的实现者,他的核心就是实现了 DOM 监听 与 数据绑定
-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script>
var vm = new Vue({
/*元素,这就绑定了div里面的元素*/
el:"#app",
/*data交给前端*/
<!--Model模型层,控制视图层-->
data:{
message:"hello vue"
}
});
</script>
</body>
</html>
二、Vue的7个属性
el:
data:将视图层的数据抽象出来存放在data中
template:用来设置模板
methods:放置页面中的业务逻辑,js方法一般放置在methods中
render:创建真正的Virtual Dom
computed:用来计算
watch:
watch:function(new,old){}
监听data中数据的变化
两个参数,一个返回新值,一个返回旧值
三、Vue基本语法
<span>标签属性
v-bind:title="message":鼠标悬停显示文字
判断-循环
v-if、v-else、v-else-if
如:
<h1 v-if="ok">
Yes
</h1>
v-for
如:
<li v-for="item in items">
{ {item.message} }
</li>
四、Vue绑定事件
- v-on属性可以监听事件
- 如:v-on:事件=“xxxx”
<script>
var vm = new Vue({
el:"#app",
data:{
message:"吴吉凯"
},
methods:{
//方法必须定义在Vue的Methods对象中
sayHi:function (event) {
alert(this.message)
}
}
});
</script>
<div id="app">
<button v-on:click="sayHi"></button>
</div>
五、Vue双向绑定
- 可以用 v-model 指令在表单 < input>、< textarea> 及 < select>
元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
<div id="app">
输入的文本为:<input type="text" v-model="message">
//把数据取出来
{ {message} }
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script>
var vm = new Vue({
/*元素,这就绑定了div里面的元素*/
el:"#app",
/*data交给前端*/
<!--Model模型层,控制视图层-->
data:{
message:"123"
}
});
</script>
<!-- 单选框-->
性别:
<input type="radio" name="sex" value="男" v-model="checked">男
<input type="radio" name="sex" value="女" v-model="checked">女
<p>
选中了谁{ {checked} }
</p>
<!-- 下拉框-->
<select name="" id="" v-model="selected">
<option value="" disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>
Value:{ {selected} }
</span>
六、Vue组件(可复用的模板)
//定义一个vue组件
Vue.component("qingjia",{
props:['qin'],
template:'<li>{ {qin} }</li>'
});
var vm = new Vue({
el:"#app",
data:{
items:["java","Linux","前端"]
}
});
<!--
用v-for遍历
使用v-bind绑定组件qin和遍历的名称item
-->
<qingjia v-for="item in items" v-bind:qin="item"></qingjia>
七、Axios异步通信
- 用在浏览器端和NodeJS的异步通信,主要实现AJAX异步通信
// 使用:npm install axios 导入axios的包
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
八、Vue的生命周期
- 创建–>初始化数据–>编译模板–>挂载DOM–>渲染–>更新–>渲染、卸载
<div id="app">
<div>
{ {info.name} }
{ {info.address.city} }
<a v-bind:herf="info.url"></a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//钩子函数
//这个data是个方法
data(){
return{
//请求的返回参数必须和json字符串一样
info:{
name:null,
address:{
street:null,
city:null
},
url:null
}
}
},
mounted(){
//通信交给下面这个地方可以改成ajax
axios.get('data.json').then(response=>(this.info=response.data))
}
});
</script>
九、计算属性
- 计算出来的结果保存在属性中,内存中运行:虚拟DOM
- 计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个 属性
其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!
<div id="app">
<p>{ {currentTime1()} }</p>
<p>{ {currentTime2} }</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script>
var vm = new Vue({
el:”#app”,
data:{
message:”hello”
},
methods: {
currentTime1:function () {
return Date.now();//返回当前时间戳
}
},
computed:{//计算属性
currentTime2:function () {
return Date.now();//返回当前时间戳
}
}
});
</script>
注意:
- methods 和 computed 里的东西不能重名
说明:
- methods:定义方法,调用方法使用 currentTime1(),需要带括号
- computed:定义计算属性,调用属性使用 currentTime2,不需要带括号
- 计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销
十、插槽solt
- 在 Vue 中我们使用 元素,作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组件的场景中
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script>
// 定义一个待办事项的组件
//插槽
Vue.component(‘todo’, {
template:
‘<div>\
<slot name="todo-title"></slot>\
<ul>\
<solt name="todo-items"></solt>\
</ul>\
</div>‘
});
Vue.component(“todo-title”,{
props: [‘title’],
template: ‘<div>{ {title} }</div>‘
});
Vue.component(“todo-items”,{
props: [‘item’],
template: ‘<li>{ {item} }</li>‘
});
var vm = new Vue({
el:”#app”,
data:{
title:’kaungshen’,
todoItems:[‘狂神说’,’java’]
}
});
</script>
后记
本文下接:【Vue】Java后端程序员也必须掌握的前端框架(下)
Java全栈学习路线可参考:【Java全栈学习路线】最全的Java学习路线及知识清单,Java自学方向指引,内含最全Java全栈学习技术清单~