目录
首先我们回顾一下之前学的东西
入门：
v-bind 绑定属性用法
编辑
v-if 用法
v-for
v-on
v-model：双向绑定
组件：
全局组件：
局部组件：
vue生命周期：（这里让我研究研究）
vue项目：
访问：
3.7 单文件组件介绍和使用
单文件组件的特点
实例：
实例2\
首先我们回顾一下之前学的东西
mybatis ORM框架 把使用java面向对象思想，把数据库表记录及表之间的关系（一对一，一对多，多对一，多对多）和对象及对象（assiastion(一对一，多对一),collection（一对多，多对多））之间的关系做映射，达到操作对象，来操作数据库的目的。知识点：基础，动态sql，一二级缓存，插件原理（interceptor）
spring
核心 IOC 又叫DI 项目使用 把springmvc和mybatis使用IOC整合到一块 控制层（springmvc）->服务层->DAO层（mybatis ）
核心 AOP 面向切面编程 把对所有业务支持的通用模块/功能，从业务提取出来，单独做成的一个功能叫切面 ，然后使用AOP技术把切面整合业务中。例如常用的，事务处理，日志记录等等功能。减少代码重复量，降低代码之间耦合度，方便代码管理和维护。
springmvc
前端控制器 DispatcherServlet-> 映射处理器handlerMapper->适配处理器 handlerAdaptor -> 处理器(自己写的controller)-> ModelAndView-> 视图解析器ViewResovler->视图渲染（把model域数据放入request）->返回给客户端
知识点：统一异常处理 HandlerExceptionResolver
拦截器 Interception
定时任务 Task -> @Scheduled
Restful风格 get(R) post(C) put(U) delete(D) 基于网络应用的程序，都必须遵循请求规则，才可以交互数据。
做项目前端使用 vue +elementui +axios 技术 ssm+shiro
入门：
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
官网：
vue2: Vue.js
vue3: https://cn.vuejs.org/
命令：（这边建议自己把代码写写运行，更容易理解）
v-bind 绑定属性用法
<title>vue示例</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script src="./vue.js"></script>
</head>
<body>
<div id="app-2" class="diva">
<!-- <span v-bind:title="msg">-->
<!--v-bind可以使用: 做简化-->
<span :title="msg">
鼠标悬停一会儿观察效果
</span>
</div>
<script>
var app =new Vue({
el:"#app-2",//绑定根元素
data:{
msg:'页面111加载于：'+new Date().toLocaleString()
}
})
</script>
v-if 用法
<body>
<div id="app">
<!--使用v-if标签，来确定p元素是否在当前div是否存在-->
<p v-if="isShow">是否可以看到我</p>
</div>
<script>
var app =new Vue({
el:"#app",//绑定根元素
data:{
isShow:false
}
})
</script>
</body>
我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构，是否显示p标签。
v-for
v-for 指令可以绑定数组的数据来渲染一个项目列表
<div id="app">
<ul>
<!--把gameList数组中的每一个对象赋给变量game-->
<li v-for="game in gameList">
{{game.gid}}-----{{game.gameName}}-----{{game.describe}}
</li>
</ul>
</div>
<script>
var app =new Vue({
el:"#app",//绑定根元素
data:{
gameList:[ //定义一个对象数组
{gid:1001,gameName:'王者荣耀',describe:'有手上王者'},
{gid:1002,gameName:'英雄联盟',describe:'是王者都是大神'},
{gid:1003,gameName:'和平精英',describe:'每天晚上吃鸡一把才睡觉'}
]
}
})
</script>
v-on
给元素绑定事件
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
<div id="app">
<p>{{message}}</p>
<!--使用v-on 给button绑定一个点击事件-->
<!--<button v-on:click='reverseMsg'>反转消息</button>-->
<!--v-on的简化写法为 @ -->
<button @click='reverseMsg'>反转消息</button>
</div>
<script>
var app=new Vue({
el:"#app",//绑定根元素
data:{//定义初始化数据
message:"我上楼复习"
//message:'上1海自来水来自海2上'
//message:'黄1山落叶叶落山2黄'
},
methods:{//初始化或者给页面元素绑定的所有事件方法，都可以写到这里面
reverseMsg:function(){
//alert(111);
//this 和java OOP中的this一样，都代表当前Vue类实例化出来的对象 使用this就可以获取到该对象的所有属性及方法
// .split('') 按照指定字符分割字符串 ['我','上','楼','复','习']
//reverse() 反转数组 ['习','复','楼','上','我']
//join('#') '习#复#楼#上#我'
//join('') '习复楼上我'
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
v-model：双向绑定
<div id="app">
<!--使用插值表达式，让message显示-->
<p>{{message}}</p>
<!--使用v-model绑定输入框的值-->
<input v-model='message'>
</div>
<script>
var app =new Vue({
el:"#app",//绑定根元素
data:{//定义初始化数据
message:'我上楼复习'
}
})
</script>
组件：
全局组件：
案例1、
<div id="app">
<ol>
<!--组件使用-->
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
</ol>
</div>
<script>
<!--演示用法，没有实际意义-->
Vue.component('todo-item',//组件名称
{//组件内容
template:'<li>做什么事。。。。</li>'// 组件模板
}
)
var app =new Vue({
el:"#app",//绑定根元素
})
</script>
案例2、
<div id="app">
<ul>
<!--独立的，可以复用的-->
<!--循环取出gameList每一个对象赋值给game-->
<!--确定元素的唯一性 使用key属性来区别 v-bind:key='game.gid'-->
<show-game-list v-for="game in gameList" v-bind:gm="game" v-bind:key='game.gid'>
</show-game-list>
</ul>
</div>
<script>
//定义组件
Vue.component('show-game-list',//组件名称
{ //组件内容
props:['gm'],//定义属性变量，用于父作用域gameList中的每个元素传递到组件中
template:'<li>{{gm.gid}}-----{{gm.gameName}}-----{{gm.describe}}</li>'//模板内容
}
)
//实例化vue对象
var app =new Vue({
el:"#app",//绑定根元素
data:{
gameList:[ //定义一个对象数组
{gid:1001,gameName:'王者荣耀',describe:'有手上王者'},
{gid:1002,gameName:'英雄联盟',describe:'是王者都是大神'},
{gid:1003,gameName:'和平精英',describe:'每天晚上吃鸡一把才睡觉'}
]
}
})
</script>
局部组件：
<div id="app">
<my-com :info="msg"></my-com>
</div>
<script src="./js/vue.min.js"></script>
<script>
//定义局部组件
var MyComponent={
props:["info"],
template:`
<h1>这是:{{info}}</h1>
`
}
var v = new Vue({
el:"#app",
data:{
msg:"测试内容"
},
components:{
"my-com":MyComponent
}
})
</script>
vue生命周期：（这里让我研究研究）
new Vue -> 创建前（before create）->创建后(created)->挂载前(before mount)->挂在后(mounted)->更新前(before update)->更新后(updated)->销毁前（before distory）->销毁后(distoried)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{info}}
<input type="button" value="测试" @click="xh()">
</div>
<script src="./js/vue.js"></script>
<script>
var v= new Vue({
el:"#app",
data:{
info:456
},
methods:{
xh:function(){
//alert(123);
this.$destroy();
}
},
// template:"<h1>{{info}}</h1>",
beforeCreate(){
console.log("beforeCreate============");
console.log(this.$el);
console.log(this.$data);
},
created(){
console.log("created============");
console.log(this.$el);
console.log(this.$data);
},
beforeMount(){
console.log("beforeMount============");
console.log(this.$el);
console.log(this.$data);
},
mounted(){
console.log("mounted============");
// console.log(this.$el);
// console.log(this.$data);
},
beforeDestroy(){
this.info=999;
console.log("beforeDestroy============");
console.log(this.$el);
console.log(this.$data);
console.log(this.info);
},
destroyed(){
// console.log("destroy============");
// console.log(this.$el);
// console.log(this.$data);
}
});
// v.$mount("#app")
</script>
</body>
</html>
vue项目：
安装：
这边可以看看我另一个安装vue的文章
vue安装和配置
vue.js
npm
vue-cli
在你盘里创建一个新文件夹：
然后进入你创建的文件中，文件路径上写cmd
输入vue create xxxx（这里xxx是你要创建的新文件）
然后选择以下的 （空格是选上和取消）
运行：
访问：
http://localhost:8080（这里是你运行后出现的ip）
vscode 启动失败 npm 命令找不到
3.7 单文件组件介绍和使用
单文件组件由来：
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如Babel
文件扩展名为 .vue 的 single-file components(单文件组件) 为解决上述问题提供了方法
单文件组件的定义
新建文件扩展名为.vue的文件，文件包含以下内容：
<template>
<div class="cla"></div>
</template>
<script>
export default {
props: {//注册属性 父传子 数据传递
},
data() {
return {};//定义数据
},
created(){//created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
},
methods: {//方法事件处理
},
components: {//组件注册
},
};
</script>
<style>
.cla{
color:red;
}
</style>
单文件组件的特点
- 完整语法高亮
- 模块化处理
- template中书写HTML结构
-
- script中书写组件的配置项
-
- style中书写组件的样式
- 组件作用域的 CSS 【scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域】
单文件组件中script 标签理解
- 不使用.vue 单文件时，我们是通过 Vue 构造函数创建一个 Vue 根实例来启动vue 项目
在.vue文件中，export default 后面的对象就相当于 new Vue() 构造函数中的接受的对象
- 需要注意data 的书写方式不同，在 .vue 组件中data 必须是一个函数，它return返回一个对象，这个返回的对象的数据，供组件实现
实例：
<template>
<div class="cla">
<p>{{msg}}</p>
<button @click="reverseMsg">反转消息</button>
<br><br>
<HelloWorld msg="hello world!"/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
props: {//注册属性 父传子 数据传递
},
data() {
return {
msg:'hello qy141!!!'
};//定义数据
},
created(){//created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
},
methods: {//方法事件处理
reverseMsg:function(){
this.msg = this.msg.split('').reverse().join('');
}
},
components: {//组件注册
HelloWorld
},
};
</script>
<style>
.cla{
color:red;
}
</style>
实例2\
----------------------------
src/components/MyDemo.vue
----------------------------
<template>
<div>
<h1>这是:{{ info }}</h1>
</div>
</template>
<script>
export default {
props:["info"]
}
</script>
------------------------
------------------------
src/views/MyPage.vue
-------------------------
<template>
<div>
<h1>我的页面</h1>
<my-demo :info="msg"></my-demo>
</div>
</template>
<script>
import MyDemo from '../components/MyDemo.vue'
export default {
data(){
return{
msg:"一个消息"
}
},
components:{
"my-demo":MyDemo
}
}
</script>
src/router/index.js
---------------------
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import MyPage from '../views/MyPage.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/mypage',
name: 'MyPage',
component:MyPage
}
]
const router = new VueRouter({
routes
})
export default router
