Vue基础概念与语法整理

Vue 笔记

1 MVVM模式

​ 学习vue前，需要先了解一mvvm模式。如下图：

mvvm

​ 在该模型中，将传统的MVC模式里的M和V中间加入一层VM层，VM层一方面给View提供数据，另一方面VM层与Model层进行数据交互。通过引入该层，实现了M层和V层的解耦。

- VM 层与V层：能够进行双向绑定，图形层与VM数据能够实时更新。
- VM层与M层：能够在后台与JAVA后端进行数据更新同步，数据更新完毕后通过上面的双向绑定体现在前端V层上。并且在M层未开发时可以通过mock后端的JSON报文进行前端开发。

在Vue的理念中，主要工作重点专注在V层和VM层。

2 Vue 基本语法学习

2.1 Vue 语法 - 数据绑定

2.1.1 单向绑定 v-bind

​ v-bind主要用于视图获取vm中的值，演示代码如下：

（注：正常这些代码是写在.vue文件而不是html，只是为了练习语法）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--  把href的值绑定到vm层的vm.data.url变量   -->
    <a v-bind:href="url">查看vue官网</a>
    <!--  ： 为v-bind的缩写绑定的是vm.data.now   -->
    <p :title="now">查看时间</p>
    </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    <!-- 创建一个vm层   -->
    var vm = new Vue({
            el: '#app',
            data: {
                url: 'https://cn.vuejs.org/v2/guide/index.html',
                now: new Date().toDateString()
            }
        }
    )
</script>
</body>
</html>

2.1.2 双向绑定 v-model

​ V-model主要用于视图与vm中的值的同步，修改其中一个地方另外一个地方都会同步。

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 进行双向绑定，input的值修改了会修改vm.data.msg。反过来在console修改值input的值也会变-->
    <input v-model:value="msg">
    <br>
    <span>vm中的值是: {{msg}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    <!-- 创建一个vm层   -->
    var vm = new Vue({
            el: '#app',
            data: {
                msg: "修改数值"
            }
        }
    )
</script>
</body>
</html>

2.1.3 事件绑定 v-on

v-on主要是用于事件的绑定，

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 进行事件绑定-->
    <button v-on:click="sayHi"> 按钮</button>
    <button @click="sayHi">我是缩写</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    <!-- 创建一个vm层   -->
    var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello , V-on'
            },
            methods: {
                sayHi: function () {
                    alert(this.msg)
                }
            }
        }
    )
</script>
</body>
</html>

2.2 Vue语法 - 流程控制

2.2.1 v-if 判断

​ v-if用于逻辑判断，演示代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 如果成立true则显示这个标签，否则隐藏！ -->
    <h2 v-if="type === 'A'"> 测试A </h2>
    <h2 v-else-if="type === 'B'"> 测试B </h2>
    <h2 v-else-if="type === 'C'"> 测试C </h2>
    <h2 v-else=""> Other </h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    <!-- 创建一个vm层   -->
    var vm = new Vue({
            el: '#app',
            data: {
                type: 'A'
            }
        }
    )
</script>
</body>
</html>

2.2.1 v-for 循环

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 遍历items,每一个节点为 item-->
    <li v-for="item in items">
        {{item.msg}}
    </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    <!-- 创建一个vm层   -->
    var vm = new Vue({
            el: '#app',
            data: {
                items: [
                    {msg: 'vue'},
                    {msg: 'v-for'}
                ]
            }
        }
    )
</script>
</body>
</html>

2.3 Vue语法 - 模板创建使用

​ vue中支持自定义模板，可以将一些模块进行封装，通常套路：

  • 用Vue.component 先注册一个模板组件
  • 在视图层直接使用

​ 代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--组件：自定义标签, 内容就是template，将item 中的值传递给组件中的com_item-->
    <component-hello v-for="item in items" v-bind:com_item="item">
    </component-hello>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 先注册一个模板组件
    Vue.component('component-hello',{
        props:['com_item'],
        template: "<li>Hello {{com_item}}</li>"
    });
    <!-- 创建一个vm层   -->
    var vm = new Vue({
            el: '#app',
            data: {
                items: ['张三','李四','王五']
            }
        }
    )
</script>
</body>
</html>

3 Vue 生命周期与网络通信

3.1 生命周期

​ 示例图来源于官网，其中重要的两个方法为created和mounted:

  • created：用于实例创建时初始化
  • mounted： 用于试图渲染前，数据准备，网络模块发起一般位于此

​

image-20200330222824548

3.2 网络通信 axios

vue官方建议使用axios模块，其主要是在mounted事件时进行，通过该模块获取到后端业务数据，同步到vm层，进而在View层进行数据展示
示例代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <div>name : {{info.name}}</div>
    <div>address : {{info.address.city}}-{{info.address.country}}</div>
</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>
    <!-- 创建一个vm层   -->
    var vm = new Vue({
            el: '#app',
            data() {
                return {
                    info: {
                        name: null,
                        address: {
                            city: null,
                            country: null,
                        }
                    }
                }
            },
            // 在mounted监听函数中填充数据
            mounted() {
                //发起网络请求
                new axios.get('./user.json')
                    .then(response => (this.info = response.data));
                // response 就是请求响应回来的数据
            }
        }
    )
</script>
</body>
</html>

4 Vue 路由定义(vue-router)

​ 路由主要是用于控制页面中的内容跳转，通常套路为：

  • 定义路由组件
  • 定义路由（核心），即定义路径的跳转关系
  • 创建路由实例

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 创建两个跳转连接   -->
    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/content">内容页</router-link>
    </p>

    <!-- 跳转后，自定义路由组件显示的位置，即下方的home和content -->
    <router-view></router-view>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>

<script>

    // 1、 定义路由组件， 后面会显示在route-view标签对应的位置
    const Home = {template: '<div>我是首页</div>'}
    const Content = {template: '<div>我是内容页</div>'}


    // 2、定义路由（核心）
    const routes = [
        {path: '/', redirect: '/home'}, // 重定向到请求
        {path: '/home', component: Home}, // 组件直接对应上面定义的组件即可！
        {path: '/content', component: Content},
    ];

    // 3、创建 router 实例
    const router = new VueRouter({
        routes
    });


    var vm = new Vue({
        el: '#app',
        router
    })
</script>

</body>
</html>
posted @ 2020-03-30 23:10  泛游东湖  阅读(301)  评论(0)    收藏  举报