第18天-01-Vue.JS的使用介绍

最新推荐文章于 2023-01-21 16:00:10 发布

HumorDeCraftsman

最新推荐文章于 2023-01-21 16:00:10 发布

阅读量151

点赞数

分类专栏： Java，mySQL，前端，学习

本文链接：https://blog.csdn.net/z_cqupt/article/details/108308648

版权

Java，mySQL，前端，学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.介绍

MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。

ViewModel负责连接 View 和 Model，保证视图和数据的一致性

2.快速入门

1.在页面中引入vue的js文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

2.在页面中定义一个根节点。一般就是div

<body>
<!--使用vue必须要有一个根结点  -->
<div id="root">
        <input type="text" v-model="message"  @keydown.enter="myKeydown()"> <br>
        <p>直接把vue数据在页面中展示</p>
        <h4>{{message}}</h4>
        <br>
        <button  @click="myClick()">切换</button>
</div>
</body>

3.在js代码中初始化一个vue对象，基于上面的根节点初始化

<script>

    //初始化Vue对象
    new Vue({
        //初始化vue对象的根节点 只要在root内容都可以使用vue内容
        el:"#root",
        //定义页面使用的模型数据js变量
        data:{
            message:"hello vue!"
        },
        methods:{
            myClick:function () {
                alert("被点了")
                this.message = "abcd";
            },
            myKeydown:function () { /*按下键盘是按的哪一个键*/
                    alert("按了回车");
                    alert(this.message);
            }
        }
    });
</script>

3.编写小案例加深印象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >  <!--不能把body当作根标签-->
<div id="app">
    <!--阻止事件默认行为-->
    <a href="http://www.baidu.com" @click.prevent="aClick($event)">点击</a>
    <hr>
    <div id="box1" style="width: 300px; height: 300px;background: red;" @click="click1()">
        <!--阻止事件冒泡-->
        <div id="box2" style="width: 100px; height: 100px;background: blue;" @click.prevent.stop="click2()"></div>
    </div>
</div>

</body>
<script src="js/vuejs-2.5.16.js"></script>
<script>
    new Vue({
       el:"#app",
       methods:{
           aClick:function (event) {  /*默认行为*/
               alert("aa");
           },
           click1:function () {
               alert("box1")
           },
           click2:function () {
               alert("box2")
           }
       }
    });


</script>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >  <!--不能把body当作根标签-->
<div id="app">
    <!--插值语法-->
    <p>{{num}}</p>
    <p>{{num+100}}</p>
    <p>{{num>100?'真':'假'}}</p>
    <p>{{person.name}}:{{person.age}}</p>
    {{content}}  <!--内容是文本 写的html不会解析-->
    <div v-text="content"></div>
    <hr>
    <div v-html="content"></div>
    <!--单向绑定-->
    <input type="text" v-bind:value="message"> {{message}} <br>
    <!--双向绑定-->
    <input type="text" v-model="message"> {{message}}
</div>

</body>
<script src="js/vuejs-2.5.16.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            content:'<h1>abc</h1>',
            num:200,
            person:{name:'gxq',age:30},
            message:"hello"
        },
        methods:{

       }
    });


</script>
</html>

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

    <style type="text/css">
        #box1 { width: 300px; height: 300px; background: blueviolet; }
        #box2 { width: 200px; height: 200px; background: aquamarine; }
        #box3 { width: 100px; height: 100px; background: tomato; }
        div { overflow: hidden; margin: 50px auto; }
    </style>

</head>

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        function sayBox3() {
            console.log('你点了最里面的box');
        }
        function sayBox2() {
            console.log('你点了最中间的box');
        }
        function sayBox1() {
            console.log('你点了最外面的box');
        }
        // 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
        document.getElementById('box3').addEventListener('click', sayBox3, true);
        document.getElementById('box2').addEventListener('click', sayBox2, true);
        document.getElementById('box1').addEventListener('click', sayBox1, true);

    </script>
</body>
</html>

HumorDeCraftsman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第18天-01-Vue.JS的使用介绍

1.介绍MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。ViewModel负责连接 View 和 Model，保证视图和数据的一致性2.快速入门1.在页面中引入vue的js文件<head> <meta charset..
复制链接

扫一扫