Vue --javaweb学习笔记

最新推荐文章于 2024-06-13 23:47:14 发布

A泽予

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量345

点赞数 3

分类专栏： JavaWeb学习笔记文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/m0_71386740/article/details/137270303

版权

JavaWeb学习笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

什么是Vue？

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
官网： Vue.js

MVVM思想：

本质上是MVC的改进版，分离视图和模型

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效

Vue快速入门

新建HTML页面，引入Vue.js文件
```
<script src="js/vue.js"></script>
```

在JS代码区域，创建Vue核心对象，定义数据模型

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

编写视图

<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

插值表达式

形式：{{ 表达式 }}

内容可以是：变量三元运算符函数调用算术运算

常用指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

v-bind、v-model

v-bind:可省略成:

注意事项：通过v-bind或者v-model绑定的变量，必须在数据模型中声明

v-on

v-on:可省略成@

v-if、v-else-if、v-else

v-show

v-for

通过Vue完成表格数据的渲染展示

示例：

<body>

    <div id="app">

        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

                <tr align="center" v-for="(user, index) in users">
                    <td>{{index + 1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td><span v-if="user.gender == 1">男</span>
                        <span v-if="user.gender == 2">女</span></td>
                    <td>{{user.score}}</td>
                    <td>
                        <span v-if="user.score >= 85">优秀</span>
                        <span v-else-if="user.score >= 60">及格</span>
                        <span style="color: red;" v-else>不及格</span>
                    </td>
                </tr>
        </table>

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            }, {
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            }, {
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            }, {
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {

        },
    })
</script>

效果：

Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

mounted生命周期方法

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

A泽予

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue --javaweb学习笔记

前端框架MVVM双向绑定MVVM思想：本质上是MVC的改进版，分离视图和模型框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效形式：{{ 表达式 }}内容可以是：变量三元运算符函数调用算术运算。
复制链接

扫一扫