Vue(el、data、指令)

最新推荐文章于 2023-03-16 08:28:06 发布

退堂鼓职业选手

最新推荐文章于 2023-03-16 08:28:06 发布

阅读量296

点赞数 1

分类专栏： B站学习记录文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_45886797/article/details/119482743

版权

B站学习记录专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vueday1

文章目录

Vueday1

文档传送门

https://cn.vuejs.org

el:挂载点

Vue实例的作用范围:

Vue会管理el选项命中的元素及其内部的后代元素。
可以使用其他的选择器，但是建议使用ID选择器。

是否可以设置其他的DOM元素

可以使用其他的双标签，不能使用html和body。
el是用来设置Vue实例挂载(管理)的元素

data：数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

<body>
    <div id="app">
        {{ message }}
        <p>
            {{ school.phone }}
        </p>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue",
                school:{
                    name:"lsq",
                    phone:"10086",
                }
            }
        })
    </script>
</body>

Vue指令

v-text

v-text指令的作用:设置标签的文本值(textContent)
默认写法会替换全部内容，使用==差值表达式{{}}==可以替换指定内容
内部支持写表达式

<body>
    <div id="app">
        <h2 v-text="message">嘻嘻</h2>
        <h2>{{ message }}嘻嘻</h2>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue"
            }
        })
    </script>
</body>

效果:

v-html

指令作用：设置标签的innerHTML
内容中有html结构会被解析为标签
v-text指令无论什么内容只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

v-on

指令作用:为元素绑定事件
事件名不用写on
指令可以简写为==@==
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt()" />
        <input type="button" value="v-on简写" @click="doIt()" />
        <input type="button" value="v-on双击" @dblclick="doIt()" />
        <h2 @click="conCat()">{{ message }}</h2>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello"
            },
            methods:{
                doIt:function(){
                    alert('Hello');
                },
                conCat:function(){
                    this.message += " World";
                }
            }
        })
    </script>
</body>