两天学会Vue（从入门到放弃）

两天学会Vue

嘿哟i

1675人浏览 · 2020-06-07 22:46:56

嘿哟i · 2020-06-07 22:46:56 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^