两天学会Vue（从入门到放弃）
vue是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。能够实现前后端分离。
1、什么是 MVVM
MVVM（Model-View-ViewModel）是一种软件架构设计模式，其中MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用实现数据的双向绑定
- Model：模型层，在这里表示 JavaScript 对象
- View：视图层，在这里表示 DOM（HTML 操作的元素）
- ViewModel：连接视图和数据的中间件，Vue就是 MVVM 中的 ViewModel 层的实现者
在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者
- ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化，并能够通知数据发生改变
2、vue语法
使用vue要引用vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1）if-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="type=='A'">A</h1>
<h1 v-else-if="type=='B'">B</h1>
<h1 v-else>N</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
type: 'A'
}
})
</script>
</body>
</html>
2）v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">{
{
item.message}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{
message: "A"},
{
message: "B"},
{
message: "C"},
]
}
})
</script>
</body>
</html>
3)事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
},
methods:{
sayHi: function () {
alert("hello");
}
}
})
</script>
</body>
</html>
4)通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li>名字：{
{
info.name}}</li>
<li>url：<a v-bind:href="info.url">{
{
info.url}}</a></li>
<li>city：{
{
info.address.city}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data(){
return {
info:{
name: "",
url: "",
address: {
stree: "",
city: ""
}
}
}
},
mounted(){
axios.get("http://localhost:8080/getData").then(resp => (this.info = resp.data));
}
})
</script>
</body>
</html>
注意：这是在本地调用json数据，如果需要调用后台数据，需要做跨域处理（后台处理），拿springboot来说，需要在controller上面加个@CrossOrigin("*")注解。
5)表单输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message" >实现数据双向绑定{
{
message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: "abc"
}
})
</script>
</body>
</html>
6)组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<my-li v-for="item in items" v-bind:name="item"></my-li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("my-li",{
props: ["name"],
template: "{
{name}} "
});
var vm = new Vue({
el: "#app",
data:{
items:["A","B","C"]
}
})
</script>
</body>
</html>
7)计算属性
它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性）
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>调用当前时间的方法：{
{
getCurrentTime1()}}</h1>
<h1>当前时间的计算属性：{
{
getCurrentTime2}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
methods: {
getCurrentTime1:function () {
return new Date();
}
},
computed:{
getCurrentTime2:function () {
return new Date();
}
}
})
</script>
</body>
</html>
8)插槽（slot）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title"></todo-title>
<todo-content slot="todo-content" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)"></todo-content>
</todo>
</div>
<script src="vue.js"></script>
<script>
Vue.component('todo',{
template: "" +
"标题
"
});
Vue.component('todo-content',{
props: ["item","index"],
template: "{
{item}},{
{index}} ",
methods: {
remove:function (index) {
this.$emit("remove",index)
}
}
});
var vm = new Vue({
el: "#app",
data:{
items:["A","B","C","D"]
},
methods: {
removeItem:function (index) {
this.items.splice(index,1)
}
}
})
</script>
</body>
</html>
需要了解更多vue语法，请前往官网了解即可。
3、vue-cli
vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板
- 统一目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
1）安装node.js,前往nodejs官网进行下载安装
npm类似于maven工具，主要用来打包和运行（npm run dev）
2）安装和初始化vue-cli
启动vue-cli(npm run dev)
4、VueRouter路由
路由是用来跳转页面，其实跟后台中页面的转发和重定向是一个意思。
- vue-router是-个插件包，所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。
npm instal1 vue-router --save-dev --registry=https://registry.npm. taobao.org
- 目录结构
- 编写Content.vue(内容页)
<template>
<div>
内容页
</div>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
- 编写App.vue（首页）
<template>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
router-link：是跳转到哪，相当于a标签
router-view：显示路由后的界面
- router/index.js（将组件路径暴露出来）
import Vue from 'vue'
import Router from 'vue-router'
import Content from "../components/Content";
Vue.use(Router);
export default new Router({
routes:[
{
name: 'content',
path: '/content',
component: Content
}
]
})
- main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
components: {
App },
router,
template: '注意：要引用路由，否则运行没效果
5、嵌套路由
- 只需要在router/index.js添加children
{
name: "Main",
path: "/main",
component: Main,
children: [
{
name: "UserAdd",path:"/user/add",component:UserAdd},
{
name: "UserList",path:"/user/list",component:UserList,props:true}
]
}
- 引用时只需引用路径即可
<router-link to="/user/add">新增用户</router-link>
6、路由传参
1、在路由中的路径定义需要传的参数
{
name: "UserAdd",path:"/user/add/:id",component:UserAdd}
2、路由时只需传参即可
<router-link to="/user/add/1">新增用户</router-link>
3、接收参数有两种方法
- 方法一，在接收界面加上要接收的参数（{ {$route.params.id}}）
<template>
<div>
新增用户
{
{
$route.params.id}}
</div>
</template>
- 方法二，在props定义要接收的参数，使用时直接拿props里面的值
<template>
<div>
用户列表,
{
{
id}}
</div>
</template>
<script>
export default {
props: ["id"],
}
</script>