Vue 入门01

最新推荐文章于 2024-10-04 00:46:18 发布

hometowey

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量73

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_47511150/article/details/120852786

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue

vue环境搭建
第一个vue代码
vue的使用范围：
data数据对象
v-text
v-html
v-on
自加自减的实现
v-show
v-bind

vue环境搭建

第一个vue代码

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vue基础01</title>
</head>
<body>
    <div id="app">
        <!-- message 变成一个变量 -->
        {{ message }}
    </div>
    <!-- 导入本地的vue.js -->
    <script src="vue.js"></script>
    <script>
        // Vue对象
        var app = new Vue({
            // 属性选择，
            el:"#app",
            // 变量赋值，数据区域
            data:{ 
                message:"hello world"
            }
        })
    </script>

</body>
</html>

vue的使用范围：

Vue实例的作用范围是el选项命中的元素及其内部的后代元素
可以使用其他的CSS选择器，但是建议使用ID选择器
可以设置其他的dom元素，出来HTML和BODY元素

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="vue.js"></script>
<title>Vue基础01</title>
</head>
<body>
    <!-- {{ message }} -->
    <div id="app" class="app">
        {{ message }}
        <span>
            {{ message }}
        </span>
    </div>
    <p id="p">
        {{ vari }}
    </p>
    <script>
        var app = new Vue({
            // el:"#app",
            el:".app",
            data:{
                message:"黑马程序员"
            }
        })
        var p = new Vue({
            el:"#p",
            data:{
                vari:"p中的内容"
            }
        })
    </script>

</body>
</html>

data数据对象

有三种类型：单个的对象，对象类型，数组类型
这三种类型都可以在vue中表示

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="vue.js"></script>
<title>Vue基础01</title>
</head>
<body>
    <div id="app" class="app">
        {{ message }}<br>
        <span>
            学校名字：{{ school.name }}，<br>
            学校电话：{{ school.mobile }}
        </span>
        <ul>
            <li>校区1：{{ campus[0] }}</li>
            <li>校区2：{{ campus[1] }}</li>
            <li>校区3：{{ campus[2] }}</li>
            <li>校区4：{{ campus[3] }}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好，黑马",
                school:{
                    name:"黑马程序员",
                    mobile:"123-456-7890"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>

</body>
</html>

v-text

替换使用该属性的元素的文本，也可用于表达式。

<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-text="info+'!'"></h2>
        <h2>{{ message + "!" }}</h2>
        <h2></h2>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                message: "黑马程序员",
                info:"前端很简单"
            }
        })
    </script>
</body>

v-html

设置元素的innerHTML。
下面比较一下v-html与v-text之间的区别：
我们会发现，v-html会将标签进行解析成HTML中的标签，二v-text仅仅将它们作为字符处理

<body>
    <div id="app">
        <h2 v-html="content"></h2>
        <h2 v-text="content"></h2>       
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                // content:"P站"
                content: "<a href='https://www.pixiv.net/'>P站</a>"
            }
        })
    </script>
</body>

v-on

事件绑定，简写为 @

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click = "doIt">
        <input type="button" value="v-on简写" @click = "doIt">
        <h2 v-text="food" @click = "changeFood"></h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"西兰花炒鸡蛋"
            },
            // 存储方法的区域，this.调用data中的变量。
            methods: {
                doIt: function(){
                    alert("Just doIt");
                },
                changeFood:function(){
                    this.food += "真好吃啊";
                    console.log(this.food);
                }
            }
        })
    </script>
</body>

自加自减的实现

<body>
    <div id="app">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                
                sub:function(){
                    if(this.num>0)
                    this.num--;
                },
                add:function(){
                    if(this.num<10)
                    this.num++;
                }
            }
        })
    </script>
</body>

v-show

后面接Boolean值，true为可见，false为不可见

<body>
    <div id="di">
        <button @click = "canShow">切换</button>
        <img src="珊瑚、.jpg" v-show="isShow" style="width: 300px;">
    </div>
    <script>
       var di = new Vue({
           el:"#di",
           data:{
               isShow:true,
           },
           methods:{
            canShow: function(){
                this.isShow = ! this.isShow;
            }
           }
       })
    </script>
</body>

v-bind

修改标签的属性,比如图片的src，title，class

<body>
    <div id="app">
        <img src="logo_icon.png">
        <img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'">
        <img :src="imgSrc" :title="imgTitle+'!!!'">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"logo_icon.png",
                imgTitle:"华为logo"
            }
        })
    </script>
</body>