VUE学习01

1、VueJs介绍

　　Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。

　它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/

1.2 MVVM模式

　　MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，

　让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

　 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是 ViewModel。

　 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端 开发更加高效、便捷

　　

　　

1.3 VueJS 快速入门

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>快速入门</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}} <!--vue的插值表达式,把data中定义的数据显示到此处-->
        </div>
    </body>
    <script>
        //view model
        //创建vue对象
        new Vue({
            el:"#app",  //由vue接管id为app的区域
            data:{
                message:"Hello Vue!"  //注意此处不要加分号
            }
        });
    </script>
</html>

1.4 插值表达式

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>快速入门</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}} <!--vue的插值表达式,把data中定义的数据显示到此处-->
            <!--三元运算符-->
            {{ true ? "OK" : "NO"}}
            {{number*3.14}}
            <!--不支持变量的声明,只负责展示
                {{var a=1;}}
                 {{if(a = 10){
            }}
            -->
           
        </div>
    </body>
    <script>
        //view model
        //创建vue对象
        new Vue({
            el:"#app", //由vue接管id为app的区域
            data:{
                message:"Hello Vue!",  //注意此处不要加分号
                number:100
            }
        });
    </script>
</html>

2.VueJS 常用系统指令

　　可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

2.1.1 v-on:click

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-on:click</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}  
            <button v-on:click="f1">vue的onclick</button>
        </div>
    </body>
    <script>
        //view model
        new Vue({
            el:"#app",
            data:{
                message:"hello Vue"
            },
            methods:{
                f1:function(){
                    alert("Hello");
                }
            }
        });
    </script>
</html>

将页面的一个数据通过点击方法修改掉

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-on:click</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <button v-on:click="f1('Vue v-on')">vue的onclick</button>
</div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            message:"hello Vue"
        },
        methods:{
            f1:function(msg){
                alert("Hello");
                this.message = msg
            }
        }
    });
</script>
</html>

2.1.2 v-on:keydown

 

posted @ 2020-08-20 16:22  suke_123  阅读(146)  评论(0)  编辑  收藏  举报