Vue
简介
- Vue:一款渐进式JavaScript框架,渐进式是指逐步实现新特性;如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟DOM)的优点。
- Axios:前端通信框架;因为Vue的边界很明确,就是为了处理DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然页可以使用JQuery提供的Ajax通信功能。
- JQuery:熟知的JavaScript框架,优点:简化了DOM操作;缺点:DOM操作太频繁,影响前端的性能;在前端眼里使用它仅仅是为了兼容IE6、7、8.
- Angular:Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发理念,与微软合作,采用了TypeScript语法开发;对后台程序员友好,对前端程序员不太友好,最大的缺点是版本迭代不合理。
MVVM模式的实现者
- Model:模型层,在这里表示JavaScript对象
- View:视图层,在这里表示DOM(HTML操作的元素)
- ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者
- 在MVVM架构中,是不允许 数据 和 视图 直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者
- ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
- ViewModel能够监听到视图的变化,并能够通知数据发生变化
- Vue.js是MVVM模式的实现者,他的核心是实现了:DOM监听和数据绑定
Vue环境搭建(IDEA)
- 安装Vue.js插件
- 引入js库
(<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
)
练手
注意:Vue的Script要放在最后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<h1 id="one">
{{massage}}
</h1>
<script>
var vm = new Vue({
el: "#one",
data: {
massage:"第一次使用Vue"
}
});
</script>
</body>
</html>
Vue之computed
- methods:定义方法,调用方法使用currentTime1(),需要加括号
- computed:定义计算属性,调用属性使用currentTime2,不需要带括号;this.massage是为了能够让currentTime2观察到数据变化而变化。
- 如果计算属性中的值发生了变化,则缓存就会刷新。可以使用页面的console对massage赋值进行测试。
- 结论:调用方法时,每次都需要重新进行计算,计算过程会产生系统开销,如果是一个不经常改变的值,此时我们可以将这个不经常改变的值缓存起来,使用Vue的计算属性可以很方便的做到这一点,(计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,解决系统开销)
示例:
<!--计算属性-computed-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
currentTime1:{{currentTime1()}}
<br>
currentTime2:{{currentTime2}}
<br>
message1:{{message1}}
</div>
<script>
var vm = new Vue({
el:"#one",
data:{
message1:"fff",
},
methods:{
currentTime1:function (){
return Date.now();
}
},
computed:{
currentTime2:function () {
this.message1;
return Date.now();
}
}
});
</script>
</body>
</html>
Vue-slot(插槽操作)
<!--slot插槽操作-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
<todo>
<todo-head slot="todo-head" v-bind:title="head_content"></todo-head>
<todo-content slot="todo-content" v-for="item in items_content" v-bind:item="item"></todo-content>
</todo>
</div>
<script>
/* 创建一个组件
<slot name="todo-head"></slot> 使用slot绑定其他组件
*/
Vue.component('todo',{
template:'<div>' +
'<slot name="todo-head"></slot>' +
'<ul>' +
'<slot name="todo-content"></slot>' +
'</ul>' +
'</div>',
});
//创建一个组件
Vue.component('todo-head',{
props:['title'],
template:'<div>{{title}}</div>',
});
//创建一个组件
Vue.component('todo-content',{
props:['item'],
template:'<li>{{item}}</li>',
});
var vm = new Vue({
el:"#one",
data:{
head_content:'这是个列表',
items_content:['A','B','B'],
}
});
</script>
</body>
</html>
Vue自定义事件
//自定事件内部逻辑:使用事件A,事件A调用事件B,最终B调用C执行事件C
<!--自定义事件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="one">
<todo>
<todo-head slot="todo-head" v-bind:title="head_content"></todo-head>
<todo-content slot="todo-content" v-for="(item,index) in items_content"
v-bind:item="item" v-bind:index="index" v-on:remove_b="removeItem(index)"></todo-content>
</todo>
</div>
<script>
/* 创建一个组件
<slot name="todo-head"></slot> 使用slot绑定其他组件
*/
Vue.component('todo',{
template:'<div>' +
'<slot name="todo-head"></slot>' +
'<ul>' +
'<slot name="todo-content"></slot>' +
'</ul>' +
'</div>',
});
//创建一个组件
Vue.component('todo-head',{
props:['title'],
template:'<div>{{title}}</div>',
});
//创建一个组件
Vue.component('todo-content',{
props:['item','index'],
template:'<li>{{item}}{{index}}<button v-on:click="remove">删除</button></li>',
methods:{
remove:function (index) {
//自定事件内部逻辑:使用事件A,事件A调用事件B,最终B调用C执行事件C
this.$emit('remove_b',index);
}
}
});
var vm = new Vue({
el:"#one",
data:{
head_content:'这是个列表',
items_content:['A','B','C'],
},
methods: {
removeItem:function (index) {
this.items_content.splice(index,1);
}
}
});
</script>
</body>
</html>