Vue入门基础(看狂神的视频,不是很推荐……)
Vue基础知识
介绍
Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
-
Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
-
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
-
Vue可以做从简单到复杂的前端单页应用,随处可见的Web前端都可以用Vue来开发。而且Vue上手速度快、功能强大,且提供了非常好用的脚手架vue-cli,很简单就可以构建并让自己的项目跑起来。
网络通信:axios
页面跳转:vue-router
MVVM
一种软件架构设计模式,是一种简化用户界面的事件驱动编程方式,源自于MVC模式
核心是View Model层,负责转换Model中的数据对象来让数据变得更容易管理和使用
作用如下:
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
Model:模型层,这里表示JavaScript对象
View:视图层,在这里表示DOM(html 操作的元素)
ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者
ViewModel能够观察到数据的变化,并对试图对应的内容进行更新,能够监听到视图的变化,并能够通知数据发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cVzhanshi</title>
</head>
<body>
<!--view层,模板-->
<div id="app">
<!-- 数据绑定-->
{{message}}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
// 创建一个Vue实例
var vm = new Vue({
el:"#app",
/*Model:数据*/
data:{
message:"hello,vue -----cvzhanshi!"
}
});
</script>
</body>
</html>
说明
- el:“#app” -----> 绑定元素的ID
- data:{message:“hello,vue —cvzhanshi!”} ----> 数据对象中有一个名为message的属性,并设置了初始值 hello,vue —cvzhanshi
- {{message}} -----> 实现数据绑定功能
(1)View
View是视图层, 也就是用户界面。前端主要由HTH L和csS来构建, 为了更方便地展现vi eu to del或者Hodel层的数据, 已经产生了各种各样的前后端模板语言, 比如FreeMarker,Thyme leaf等等, 各大MV VM框架如Vue.js.Angular JS, EJS等也都有自己用来构建用户界面的内置模板语言。
(2)Model
Model是指数据模型, 泛指后端进行的各种业务逻辑处理和数据操控, 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
(3)ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层, 前端开发者对从后端获取的Model数据进行转换处理, 做二次封装, 以生成符合View层使用预期的视图数据模型。
基础语法
v-bind:
- 看到的
v-bind
attribute 被称为指令。指令带有前缀v-
,以表示它们是 Vue 提供的特殊 attribute - 它们会在渲染的 DOM 上应用特殊的响应式行为
v-if、v-else
v-for
格式说明
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}}
</li>
</div>
//注:items是数组,item是数组元素迭代的别名,index是迭代的序号
v-on
1、可以用
v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码
2、然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在
v-on
指令中是不可行的。因此v-on
还可以接收一个需要调用的方法名称
表单双绑,组件
数据双向绑定
数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化。
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意:v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
- text 和 textarea 元素使用 value property 和 input 事件;
- checkbox 和 radio 使用 checked property 和 change 事件;
- select 字段将 value 作为 prop 并将 change 作为事件。
组件
组件是可复用的
Vue
实例, 说白了就是一组可以重复使用的模板, 跟JSTL
的自定义标签、Thymeleal
的th:fragment
等框架有着异曲同工之妙,通常一个应用会以一棵嵌套的组件树的形式来组织
说明:
Vue.component()
:注册组件cvzhanshi
:自定义组件的名字template
:组件的模板…
- 使用props属性传递参数
<div id="app">
<cvzhanshi v-for="item in items" v-bind:course="item"></cvzhanshi>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component("cvzhanshi",{
props: ['course'],
template: '<li>{{course}}</li>'
});
var vm = new Vue({
el: '#app',
data:{
items:["java","Linux","前端"]
}
});
</script>
说明:
v-for=“item in items”:遍历Vue实例中定义的名为items的数组,并创建同等数量的组件
v-bind:course=“item”:将遍历的item项绑定到组件中props定义名为course属性上;= 号左边的course为props定义的属性名,右边的为item in items 中遍历的item项的值
Axios异步通信
Axios简介
Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下:
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API[JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
说明:
- 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
- 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
- 我们在data中的数据结构必须和
Ajax
响应回来的数据格式匹配
Vue生命周期图
Vue计算属性、内容分发、自定义事件
计算属性
计算属性的重点突出在属性
两个字上(属性是名词),首先它是个属性
其次这个属性有计算
的能力(计算是动词),这里的计算
就是个函数:简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存
总结
调用方法时,每次都需要讲行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
内容分发(插槽)
在Vue.js
中我们使用``元素作为承载分发内容的出口,可以称其为插槽,可以应用在组合组件的场景中
<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>
说明:
slot:是绑定组件用的
:title --> 是v-bind:title的缩写
自定义事件
组件中使用this.$emit(‘自定义事件名’, 参数) ,而在视图层通过自定义事件绑定Vue中的删除操作的方法
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层,模板-->
<div id="vue">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component('todo',{
template:'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component('todo-title',{
props:['title'],
template:'<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component("todo-items",{
props:["item","index"],
template:"<li>{{item}}---{{index}}<button @click='remove'>删除</button></li>",
methods: {
remove: function (index) {
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el:"#vue",
data:{
title:"cvzhanshi study java",
todoItems:['test1','test2','test3']
},
methods: {
removeItems: function (index) {
this.todoItems.splice(index,1);
}
}
});
</script>
</body>
</html>
Vue入门小结
核心:数据驱动,组件化
优点:借鉴了AngularJS的模块化开发和React的虚拟Dom,虚拟Dom就是把Demo操作放到内存中执行;
常用的属性:
- v-if
- v-else-if
- v-else
- v-for
- v-on绑定事件,简写@
- v-model数据双向绑定
- v-bind给组件绑定参数,简写
组件化:
- 组合组件slot插槽
- 组件内部绑定事件需要使用到
this.$emit(“事件名”,参数);
- 计算属性的特色,缓存计算数据
遵循SoC关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios框架做异步通信;
更多推荐
所有评论(0)