Vue（一）基本概念、基本语法、事件绑定

最新推荐文章于 2024-08-18 21:36:31 发布

你佳哥

最新推荐文章于 2024-08-18 21:36:31 发布

阅读量114

点赞数

分类专栏： Vue 文章标签： vue mvvm java

本文链接：https://blog.csdn.net/weixin_44215363/article/details/111481988

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基于：【狂神说Java】Vue最新快速上手教程通俗易懂

1 简介

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。作者尤雨溪。respect！

网络通信：axios；
页面跳转：vue-router
状态管理：vuex

CSS预处理器：用一门专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS，例如SASS、LESS;

2 MVVM模式

Model：模型层；
View：视图层；
ViewModel：连接视图和数据的中间件，监听到变化可以使得二者同时发生更新；

优点：

一个ViewModel可以绑定不同的View；
即时编译，虚拟的DOM；
完全解耦View层和Model层，这是前后端分离最为重要的一环；

2 第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎光临</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
<!--view层，模板-->
<div id="app">
    {{name}}'s age is {{age}}
</div>

<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model，数据
        data:{
            name:"Tom",
            age:11
        }
    });
</script>
</body>
</html>

访问得到：Tom's age is 11
标准的MVVM模式，数据和展示分开，二者之间通过ViewModel双向绑定；

3 基础语法

3.1 判断语句

<div id="app">
    <h1 v-if="flag=='A'">A</h1>
    <h1 v-else-if="flag=='B'">B</h1>
    <h1 v-else>其他</h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        //Model，数据
        data: {
            flag: "A"
        }
    });
</script>

3.2 循环遍历

<!--view层，模板-->
<div id="app">
    <li v-for="book in books">
        {{book.BookName}}
    </li>
</div>

<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //Model，数据
        data: {
            books:[
                {BookName:"《朝花夕拾》"},
                {BookName:"《阿Q正传》"},
                {BookName:"《纪念刘和珍君》"}]
        }
    });
</script>

4 事件绑定

<div id="app">
    <button v-on:click="addMessage">点击添加</button>
    <li v-for="message in messages">
        {{message.key}}
    </li>
</div>

<script>
    var vm = new Vue({
        // 绑定元素
        el: "#app",
        // 数据
        data: {
            messages: [{key: "你好！"}]
        },
        // 方法，必须定义在methods对象中
        methods: {
            addMessage: function () {
                var temp = {key: "你好!"};
                this.messages.push(temp);
            }
        }
    });
</script>

你佳哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（一）基本概念、基本语法、事件绑定

基于：【狂神说Java】Vue最新快速上手教程通俗易懂目录1 简介1 简介Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。作者尤雨溪。respect！网络通信：axios；页面跳转：vue-router状态管理：vuexCSS预处理器：用一门专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS，例如SASS、LESS。...
复制链接

扫一扫

专栏目录