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

r囧r小猫 2024-02-28 02:44 10阅读 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>