Vue--001

最新推荐文章于 2024-09-09 12:42:34 发布

咸鱼超人-

最新推荐文章于 2024-09-09 12:42:34 发布

阅读量124

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41184530/article/details/104271095

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

01.Vue基础

创建一个Vue实例化对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <div id="app">
        <h2>{{msg}}</h2>
    </div>
    <body>
        
        <script type="text/javascript" src="./node_modules/vue/dist/vue.js">
            //  创建实例化对象
            // vue:数据驱动视图
            var vm =  new Vue({
                el:'#app',
                date:{
                    msg:'黄瓜'
                },
                // 如果template中定义了内容，那么优先夹在template里面的内容
                template:'<div>{{msg}}</div>'
            });
        </script> 
    </body>
</head>
</html>

Vue系统命令行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 50px;
                height: 50px;
                background-color: blue;
            }
            .active{
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <p v-text = "msg"></p>
            <div v-if = "isShow">邹晓娜</div>
            <div v-if = "Math.random() > 0.5">
                爱我
            </div>
            <div v-else>
                不爱我
            </div>
            <!-- v-show 控制DOM元素是否展示-->
            <div v-show="isShow">hhh</div>
            <!-- v-bin可以进行简写，： -->
            <div class="box" v-on:click='clickHander' v-bind:class = "{active:isShow}"></div>
            <!-- 绑定点击v-on:原生事件名=‘调用函数’ 简写为@ -->
            <!-- v-for 可以用来遍历数组和对象 -->
        </div>
        <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
        <script type="text/javascript">
        new Vue({
            el:"#app",
            data:function(){
                return{
                    msg:'指令系统',
                    msg2:'<p>贺宇婷大帅比</p>',
                    isShow: true
                }
            },
            methods:{
                clickHander(e){
                    this.isShow = !this.isShow;
                }
            },
            template:''
        });
        </script>
    </body> 
</html>