1.Vue简介
是一套用于构建用户界面的渐进式框架，自底层向上应用，
Vue的核心库只关注视图层，容易入门，可以和第三方库或者已有的项目进行整合，
可以做复杂的单页应用。 简单的说，vue是一套前端的开发框架，
vue是目前三大主流的框架之一，其他两个框架是:React、Angular。
(1)前后端分离时会报错:
<1>Access-Control-Allow-Origin 跨域问题
跨域的概念:后台服务为了保护自己的接口，将不是同一种请求方式，
以及不同一个IP,以及不是同端口号的，拒绝访问;
解决方法:
1.后台来解决 : 接口添加@CrossOrigin注解
2.前台来解决
3.使用nginx来解决
(2)项目优化
在main.js中配置
1.下载axios
npm install axios
2.统一管理axios
import axios from 'axios';
3.设置全局使用axios
Vue.prototype.$axios=axios;
4.设置axios请求的默认的ip以及端口号
axios.defaults.baseURL="http://localhost:8080"
2.Vue基本使用概念
(1)基本使用步骤
<1>导入开发版的Vue.js
<2>创建Vue实例对象,设置el属性和data属性
<3>使用简介的模板语法把数据渲染到页面上
(2)el: 挂载点
Vue会管理el选项命中的元素及其内部的后代元素,可以使用其他的选择器,
但是建议使用id选择器,可以使用其他双标签,但是不能使用HTML和BODY.
(3)data: 数据对象:
Vue中用到的数据定义到data中,data中可写复杂类型的数据,
渲染复杂类型数据遵守js的语法即可
(4)methods书写格式:
methdos:{}
(5)mounted书写格式:
mounted(){
this.findAll()
};
注意:和methods同级,类似于$(function),相当于页面载入事件
作用:什么时候触发findAll() ,页面加载的时候,触发这个方法:vue的页面载入事件
3.Vue的基本指令
(1)v-text : 设置标签的文本值
v-text指令的作用是:设置标签的内容<textContent>,默认写法会替换全部内容,
使用差值表达式可以替换指定内容;内部支持写表达式.
(2)v-html : 设置标签的innerHTML属性
v-html指令的作用是设置元素的innerHTML属性,内容中有html结构会被解析为标签,
v-text指令无论内容是什么,只会解析为文本,解析文本使用v-text,需要解析html结构使用v-html
(3)v-on : 为元素绑定事件
v-on指令的作用是为元素绑定事件,事件名不需要写on,指令可以简写为@,
绑定的方法定义在methods属性中,方法内部通过this关键字可以访问定义在data中的数据.
(4)v-show : 根据表达式的真假切换元素的显示与隐藏
v-show指令的作用是根据真假切换元素的显示状态,原理是修改元素的display,实现显示
隐藏,指令后面的内容,最终都会解析为布尔值,值为true元素显示,值为false元素隐藏,数据
改变之后,对应元素的显示状态会同步更新.
(5)v-if : 根据表达式的真假,切换元素的显示和隐藏,操纵dom元素
v-if指令的作用是根据表达式的真假切换元素的显示状态,本质是通过
操纵dom元素来切换显示状态,表达式值为true,元素存在于dom树种,值
为false,从dom树中移除,频繁的切换使用v-show,反之使用v-if,前者的
切换消耗小.
(6)v-bind : 设置元素的属性,例如src,title等
v-bind指令的作用是为元素绑定属性,完整的写法是 v-bind:属性名,
简写可以省略v-bind,只保留 :属性名,需要动态的增删class建议使用对象
的方式
(7)v-for : 遍历使用,根据数据生成列表结构
v-sfor指令作用是根据数据生成列表结构,数组经常和v-for结合使用,语法是
(item,index) in 数据;item和index可以结合其他指令一起使用,数组长度的
更新会同步到页面上,是响应式的.
(8)v-model : 获取和设置表单元素的值,为双向数据绑定
v-model指令的作用是便捷的设置和获取表单元素的值,绑定的数据
会和表单元素值相关联,一边改变另一边也会随之改变.
4.Vue的使用
(1)cdn方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
//引入vue的js
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
new Vue({
代表vue所接管的区域，里边是区域的id值
el:'#app',
数据绑定
data:{
message: "hello word111",
},
声明执行的方法
methods:{
sub:function(){}
},
mounted(){} 相当于页面载入事件
})
</script>
</html>