vue标签

最新推荐文章于 2024-05-28 09:23:47 发布

无脑的打码人

最新推荐文章于 2024-05-28 09:23:47 发布

阅读量886

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_53725689/article/details/122516275

版权

vue

摘要由CSDN通过智能技术生成

一、什么是vue?

①javascript框架

②简化DOM的操作

③响应式数据驱动
二、vue的使用：

（1）在网页中引入vue,js文件

（2）创建一个html双标签并为该标签起个id 属性

<div id="app">
{ {message}}
{ {arr}}
</div>

（3）写自己的js 代码

注意：

1.Vue实例的作用范围：Vue会管理el选项命中的元素及其内部的后代元素

2.可以使用其他选择器，但是建议使用ID选择器

3.可以使用其他的双标签，不能使用HTML和BODY,建议使用div标签
三、vue常见的指令:可以直接使用当前父类标签挂载的 Vue对象里面的属性（data声明的属性）
3.1v-text：设置标签的文本值（textContent）

v-text:会把标签里的内容覆盖，如果网速太慢，会原封不动的显示{ {message}}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script type="text/javascript" src="vue/vue.js"></script>
    </head>
    <body>
    <div id="app">
        { {message}}<br>
        
        <span v-text="message">爱苏苏</span>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"苏苏真好看，爱了爱了"
            },

        });
    </script>
    </body>
    </html>

3.2v-html设置标签的innerHTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script type="text/javascript" src="vue/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <p v-text="su"></p>
        <p v-html="su"></p>
        
    </div>
    <script>
        var one=new Vue({
            el:"#app",
            data:{
                su:"<font color='#ffc0cb'>love</font>"
            }
        });
    </script>
    </body>
    </html>