VUE框架实现页面信息映射和功能------VUE框架

旧约Alatus

已于 2023-10-23 15:59:02 修改

阅读量226

点赞数 1

分类专栏： # VUE框架前端文章标签： html vue vue.js 前端前端框架 http https

于 2023-09-29 11:57:52 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/133414382

版权

前端同时被 2 个专栏收录

340 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <div id="app1">
        <p>姓名:{{username}}</p>
        <p>性别:{{gender}}</p>
        <p>{{desc}}</p>
        <p v-html="desc"></p>
    </div>
    <div id="app2">
        <a :href="link">百度</a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :style="{width:w}" alt="">
    </div>
    <script>
        const vm1 = {
            data: function()
            {
                return{
                    link:"http://www.baidu.com",
                    inputValue:'请输入内容',
                    imgSrc:'1.png',
                    w:'500px'
                }
            }
        }
        const app2 = Vue.createApp(vm1)
        app2.mount('#app2')
        const vm={
            data()
            {
                return{
                    username:'张三',
                    gender:'男',
                    desc:'<a href="http://www.baidu.com">百度</a>'
                }
            }
        }
        const app1 = Vue.createApp(vm)
        app1.mount('#app1')
        Vue.createApp({
            data(){
                return{
                    message:'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="https://unpkg.com/vue@3"></script>

</head>

<body>

<div id="app">

{{message}}

</div>

<div id="app1">

<p>姓名:{{username}}</p>

<p>性别:{{gender}}</p>

<p>{{desc}}</p>

<p v-html="desc"></p>

</div>

<div id="app2">

<a :href="link">百度</a>

<input type="text" :placeholder="inputValue">

<img :src="imgSrc" :style="{width:w}" alt="">

</div>

<script>

const vm1 = {

data: function()

{

return{

link:"http://www.baidu.com",

inputValue:'请输入内容',

imgSrc:'1.png',

w:'500px'

}

}

}

const app2 = Vue.createApp(vm1)

app2.mount('#app2')

const vm={

data()

{

return{

username:'张三',

gender:'男',

desc:'<a href="http://www.baidu.com">百度</a>'

}

}

}

const app1 = Vue.createApp(vm)

app1.mount('#app1')

Vue.createApp({

data(){

return{

message:'Hello Vue!'

}

}

}).mount('#app')

</script>

</body>

</html>