Vue.js入门（一）模板语法

最新推荐文章于 2024-06-12 08:41:10 发布

cgl_dong

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量150

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43688691/article/details/90761960

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

MVC的核心理念是：你应该把管理数据的代码（Model）、业务逻辑的代码（Controller）、以及向用户展示数据的代码（View）清晰的分离开

模型：代表应用当前的状态
视图：用于展示数据，用于接口
控制器：用来管理模型和视图之间的关系
在这里插入图片描述
通过MVC框架又衍生出了许多其它的架构，统称MV*，最常见的是MVP与MVVM

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。

Vue与Angular就是一个MVVM框架，MVVM与MVC最大的区别是模型与视图实现了双向绑定。

在Vue中用户自定义的实例就是vm，功能与Controller类似
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API，作者是尤雨溪是中国人。

代码如下

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script src="../lib/vue.min.js"></script>

</head>
<body>
<h1 id="hid" >{{message}},{{hello()}}</h1>
<div id="did">
    <h1 v-html="vhtml" v-bind:title="vbind">Vue快速学习</h1>
    <h1 v-text="vtext">Vue的世界</h1>
</div>
<div id="div2">
    <h1 style="color: purple ;text-align:center">流程控制和双向绑定</h1>
    双向绑定框：<input type="text" v-model="vmodel" style="color: red">{{vmodel}}
    <div v-if="vif">
        <table v-for="x in vfor" border="3px" cellpadding="5px">
           <tr>
               <td>{{x.name}}</td>
               <td>{{x.age}}</td>
           </tr>
        </table>
    </div>
</div>
<div id="div3">
    <h1 style="color: olivedrab">事件:{{vclick}}</h1>
    <button v-on:click="show">点击吧</button>
</div>
<script>
    new Vue({
        el:"#div3",
        data:{
            vclick:"点击"
        },
        methods: {
            show:function () {
                this.vclick="The click";
                alert("点击事件");
                this.hide();
            },
            hide:function () {
                alert("方法互相调用。。。")
            }
        }
    })
</script>
<script>
    new Vue({
        el:"#div2",
        data:{
            vmodel:"This is v-model",
            vif:true,
            vfor:[
                {name:"Tom",age:18},
                {name:"Jack",age:31},
                {name:"Sally",age:14}
            ]
        }
    })
</script>
<script>
   var x=new Vue({
        el:'#hid',
        data:{
            message:"Hello Vue.js",
            title:"新的学习开始了。。。"
        },
        methods:{
            hello:function () {
                return this.title+"来了Vue!"
            }
        }
    });
    document.write("取到了Vue中的数据"+x.message+" "+x.hello());
    document.write("取到了元数据。。。"+x.$el+" "+x.$data+"");
</script>
<script>
    var base={one:"<h1 align='center'>Vue属性替换</h1>",two:"这是属性被替换了"};
    var vh=new Vue({
        el:"#did",
        data:{
            vhtml:base.one,
            vbind:base.two,
            vtext:"文本替换了呀"
        }
    })
</script>
</body>
</html>

页面如下

在这里插入图片描述

cgl_dong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门（一）模板语法

MVC的核心理念是：你应该把管理数据的代码（Model）、业务逻辑的代码（Controller）、以及向用户展示数据的代码（View）清晰的分离开模型：代表应用当前的状态视图：用于展示数据，用于接口控制器：用来管理模型和视图之间的关系通过MVC框架又衍生出了许多其它的架构，统称MV*，最常见的是MVP与MVVMMVVM（Model-View-ViewModel）框架的由来便是MVP（M...
复制链接

扫一扫

专栏目录