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: "<li style='color: red'>{{name}}</li>"
    });

    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:   "<div>" +
                        "<slot name='todo-title'></slot>" +
                        "<div>" +
                            "<slot name='todo-content'></slot>"+
                        "</div>"+
                    "</div>"
    });

    Vue.component('todo-title',{
        template: "<h1>标题</h1>"
    });

    Vue.component('todo-content',{
        props: ["item","index"],
        template: "<li>{{item}},{{index}} <button v-on:click='remove(index)'>删除</button></li>",
        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: '<App/>'
})

注意:要引用路由,否则运行没效果

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>
Logo

前往低代码交流专区

更多推荐