概述，语法

概述

MVVM：Model View ViewModle 双向绑定

Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

  • 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有20多kb (Angular 压缩后56kb+ ,
    React压缩后44kb+ )
  • 移动优先。更适合移动端，比如移动端的Touch事件
  • 易上手，学习曲线平稳,文档齐全
  • 吸取了Angular (模块化)和React (虚拟DOM)的长处，并拥有自己独特的功能，如:计算属性
  • 开源，社区活跃度高

语法

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

<!--1.取值-->
<!--view-->
<div id="app1">
    {{message}}
</div>

<!--v-bind:可以简写为:-->
<div id="app2">
    <span v-bind:title="message">
        123
    </span>
</div>

<!--2.判断：if else-->
<div id="app3">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>

<div id="app4">
    <h1 v-if="score>=80">优秀</h1>
    <h1 v-else-if="score>=60">及格</h1>
    <h1 v-else>不及格</h1>
</div>

<!--3.for 循环-->
<div id="app5">
    <li v-for="(student,index) in students">{{student.name}} {{index}}</li>
</div>

<!--4.on事件-->
<!--v-on:可以简写为@-->
<div id="app6">
    <button v-on:click="sayHi">点我</button>
</div>

<!--5.v-model双向绑定-->
<div id="app7">
    <input v-model="message">{{message}}
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm1 = new Vue({//ViewModel
        el: '#app1',
        data: {
            //model
            message: 'hello vue'
        }
    });

    var vm2 = new Vue({//ViewModel
        el: '#app2',
        data: {
            message: 'hello'
        }
    });

    var vm3 = new Vue({//ViewModel
        el: '#app3',
        data: {
            //model
            ok: false
        }
    });

    var vm4 = new Vue({//ViewModel
        el: '#app4',
        data: {
            //model
            score: 10
        }
    });

    var vm5 = new Vue({
        el: '#app5',
        data: {
            students: [
                {
                    name: '张三',
                    age: 18
                },
                {
                    name: '李四',
                    age: 28
                }
            ]
        }

    });

    var vm6 = new Vue({
        el: "#app6",
        data: {
            message: "hello"
        },
        methods: {
            sayHi: function () {
                alert(this.message);
            }
        }
    });

    var vm7 = new Vue({
        el: "#app7",
        data: {
            message: "hello"
        }
    });


</script>
</body>
</html>
posted @   jpy  阅读(20)  评论(0)  编辑  收藏  举报
相关博文：
· Vue-router
· Axios
· Vue学习笔记之Hello Vue
· vue学习01——什么是vue？
· Vue学习（一）
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示