您的当前位置：首页>全部文章>文章详情

Vue3基本使用(基础部分)

CSDN发表于：2024-05-11 10:53:14浏览：168次TAG： #Vue

1.vue3特性

vue的引入方式

  1. cdn引入

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>哈哈哈</h2>
    <p>我是内容，呵呵呵</p>
    <div id="app"></div>

    <!-- cdn引入 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 使用Vue
        const app = Vue.createApp({
            template:`<h2>Hello World</h2><span>呵呵呵</span>`
        })
        // 挂载
        app.mount("#app");
    </script>
</body>
</html>
  1. 本地引入
    示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        var app = Vue.createApp({
            template:'<h1>哈哈哈</h1>'
        })
        app.mount("#app")
    </script>
</body>
</html>

数据展示

  1. 字符串
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template:'<h2>{{message}}</h2>',
            data:function(){
                return {
                    title:"hello world",
                    message:'你好，vue3'
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>
  1. 列表数据 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            template:`
                <h2>电影列表</h2>
                <ul>
                    <li v-for="item in movies">{{item}}</li>
                </ul>
            `,
            data:function(){
                return {
                    message:"你好啊，李银河",
                    movies:['大话西游','星际穿越']
                }
            }
        })

        app.mount("#app")
    </script>
</body>
</html>
  1. 计数器
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
    const app = Vue.createApp({
        template:`
        <h2>当前计数器：{{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
        `,
        data:function(){
            return {
                counter:0
            }
        },
        methods:{
            increment:function(){
                this.counter++
            },
            decrement:function(){
                this.counter--
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
  2. 计数器（重构）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>当前计数器：{{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    counter:0
                }
            },
            methods:{
                increment:function(){
                    this.counter++
                },
                decrement:function(){
                    this.counter--
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>
  1. 原生dom计数器实现(命令式编程实现）
    vue是声明式编程思想，原生是命令式编程思想。
    ```html
    <!DOCTYPE html>


    Document



    当前计数：








6. options选项-data属性选项的详解

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h2>{{message}}</h2>
        <button @click="changeMessage">改变message的值</button>
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    message:"hello"
                }
            },
            methods:{
                changeMessage:function(){
                    this.message = "你好，世界";
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>
  1. options_method属性选项
    注意method中方法不可以使用箭头函数
    示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return {
                    counter:0
                }
            },
            methods:{
                increment:function(){
                    this.counter++;
                },
                // es6写法
                increment(){

                },
                // es6的箭头函数
                increment:()=>{

                },
                decrement:function(){
                    this.counter--;
                }
            }
        })

        app.mount("#app")
    </script>
</body>
</html>

VsCode生成代码片段

  1. 第一步，复制自己要生产的代码；
  2. 第二部，https://snippet-generator.app/在该网站中生成代码片段；
  3. 第三步，在VsCode中配置代码片段；设置-》首选项-》配置用户代码片段

Vue基础语法

  1. vue的Mustache语法
    示例代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 1.基本使用 -->
    <h2>{{message}}</h2>
    <h2>当前计数：{{counter}}</h2>

    <!-- 2.表达式 -->
    <h2>计数双倍：{{counter*2}}</h2>
    <h2>展示的信息：{{info.split(" ")}}</h2>

    <!-- 3.三元运算符 -->
    <h2>{{age>=18 ? "成年人" : "未成年人"}}</h2>

    <!-- 4.调用methods中函数 -->
    <h2>{{getdate(date)}}</h2>

    <!-- 注意不能定义语句 -->
    <!-- <h2>{{const name="hello"}}</h2> -->
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          counter:100,
          info:"my name is why",
          age:22,
          date:'17:03:01',
        }
      },
      methods:{
        getdate:function(date){
          return "2023-10-22 "+date
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-once的使用
    示例代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 指令：v-once 只渲染一次 -->
    <h2 v-once>
      {{message}}
      <h2>{{counter}}</h2>

    </h2>
    <h2>{{message}}</h2>
    <button @click="changemessage">修改message</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          counter:100
        }
      },
      methods:{
        changemessage:function(){
          this.message = '你好，世界';
          this.counter = this.counter*2;
          console.log(this.message,this.counter);
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-text的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>aa {{message}} bb</h2>
    <h2 v-text="message">22222222222</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue"
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-html的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{content}}</h2>
    <h2 v-html="content"></h2>
  </div>



  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          content:'<span style="color: red;font-size: 40px;">你好，世界</span>'
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-pre的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2 v-pre>{{message}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue"
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-cloak的使用
<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2 v-cloak>{{message}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    setTimeout(()=>{
      const app = Vue.createApp({
        // data:option api
        data(){
          return {
            message:"hello vue"
          }
        }
      })
      app.mount("#app")
    },3000)
  </script>
</body>
</html>
  1. v-memo的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <div v-memo="[name]">
      <h2>姓名：{{name}}</h2>
      <h2>性别：{{sex}}</h2>
      <h2>年龄：{{age}}</h2>
    </div>

    <button @click="change_btn">改变信息</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          name:'张三',
          sex:'男',
          age:'18'
        }
      },
      methods:{
        change_btn:function(){
          this.age = 20;
          // this.name = '李四';
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-bind的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <div>
      <button @click="change_img">更换一下图片</button>
    </div>
    <img v-bind:src="showImg" alt="">
    <!-- v-bind语法糖是 : -->
    <a :href="baidu">百度一下</a>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          baidu:'http://www.baidu.com',
          img1:'http://p1.music.126.net/PCT_tuIWRxEHZNtE5dpxOA==/109951168999152069.jpg?imageView&quality=89',
          img2:'https://p1.music.126.net/eQieDtxqnlHNSvrdiO4x_w==/109951168999193521.jpg?imageView&quality=89',
          message:"hello vue",
          showImg:'http://p1.music.126.net/PCT_tuIWRxEHZNtE5dpxOA==/109951168999152069.jpg?imageView&quality=89'
        }
      },
      methods:{
        change_img:function(){
          this.showImg = this.showImg === this.img1 ? this.img2 : this.img1
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-bind绑定基本属性class(对象写法和数组写法)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 1.基本绑定class -->
    <h2 :class="classes">{{message}}</h2>
    <!-- 2.动态class可以写对象语法 -->
    <button :class="isActive ? 'active' : '' " @click="btnClick">我是按钮</button>

    <!-- 对象语法的基本使用 -->
    <button :class="{active:isActive}" @click="btnClick">我是按钮</button>

    <!-- 对象语法的多个键值对 -->
    <button :class="{active:isActive,key}" @click="btnClick">我是按钮</button>

    <!-- 动态绑定class是可以和普通的class同时使用 -->
    <button class="abc cba" :class="{active:isActive,why:true,kobe:false}" @click="btnClick">我是按钮</button>

    <!-- 动态class来可以写数组语法（了解） -->
    <h2 :class="['abc','cba']">Hello Array</h2>
    <h2 :class="['abc',className]">hello Array</h2>
    <h2 :class="['abc',className,isActive ? 'active' : '']">hello Array</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          classes:"abc cba nba",
          isActive:false
        }
      },
      methods:{
        btnClick:function(){
          this.isActive = !this.isActive
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-bind中style属性
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <!-- style中的某些值，来自data中 -->
    <!-- 动态绑定style，在后面跟上 对象类型 -->
    <h2 v-bind:style="{color:fontColor,fontSize:fontSize+'px'}">哈哈哈</h2>
    <!-- 动态的绑定属性，这个属性是一个对象 -->
    <h2 :style="objStyle">呵呵呵呵</h2>

    <!-- style的数组语法 -->
    <h2 :style="[objStyle,{backgroundColor:'purple'}]">嘿嘿嘿</h2>

  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          fontColor:"blue",
          objStyle:{
            fontSize:'50px',
            color:"green"
          }
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. 绑定属性名
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .aaa{
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2 :[name_cls]="'aaa'">dddddddddddd</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          name_cls:"class",
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-bind直接绑定对象
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2 :name="name" :age="age" :height="height">hello world</h2>
    <h2 v-bind="info"></h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          info:{name:"why",age:18,height:1.88,address:'广州市'},
          name:"why",
          age:18,
          height:1.88
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

03.Vue的事件绑定

  1. 绑定事件的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 1.基本使用 -->
    <div class="box" v-on:click="divClick"></div>
    <div style="height: 20px;"></div>
    <!-- 2.语法糖写法 -->
    <div class="box" @click="divClick"></div>
    <div style="height: 20px;"></div>

    <!-- 3.绑定的方法位置，也可以写成一个表达式 -->
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="counter++">+1</button>

    <!-- 4.绑定其他方法 -->
    <div class="box" @mousemove="divMousemove"></div>
    <div style="height: 20px;"></div>


    <!-- 5.元素绑定多个事件 -->
    <div class="box" @click="divClick" @movsemove="divMousemove"></div>
    <div style="height: 20px;"></div>

    <div class="box" v-on="{click:divClick,mousemove:divMousemove}"></div>
    <div style="height: 20px;"></div>

    <div class="box" @="{click:divClick,mousemove:divMousemove}"></div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          counter:10
        }
      },
      methods:{
        divClick:function(){
          console.log('divClick')
        },
        increment:function(){
          this.counter++;
        },
        divMousemove:function(){
          console.log('divMousemove')
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. 绑定的参数传递
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <button @click="btn1Click">按钮1</button>
    <button @click="btn2Click('why',age)">按钮2</button>
    <button @click="btn3Click('why',age,$event)">按钮3</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          age:18
        }
      },
      methods:{
        btn1Click(event){
          console.log(event)
        },
        btn2Click(name,age){
          console.log("btn2Click",name,age)
        },
        btn3Click(name,age,event){
           console.log("btn3Click",name,age,event)
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. 绑定事件的修饰符
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <div class="box" @click="divClick">
      <button @click.stop="btnClick">按钮</button>
    </div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue"
        }
      },
      methods:{
        btnClick(event){
          console.log('btnClick')
        },
        divClick(){
          console.log('divClick')
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

Vue的条件渲染

  1. 完成需求Demo
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <template v-if="Object.keys(info).length"> 
      <h2>个人信息</h2>
      <ul>
        <li>姓名：{{info.name}}</li>
        <li>年龄：{{info.age}}</li>
      </ul>
    </template>
    <template>
      <h2>没有输入个人信息</h2>
      <p>请输入个人信息后，展示内容</p>
    </template>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          info:{name:"why",age:18}
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-if的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="Object.keys(info).length">
      <h2>{{message}}</h2>
      <!-- v-if="条件" -->
      <ul>
        <li>姓名：{{info.name}}</li>
        <li>年龄：{{info.age}}</li>
      </ul>
    </div>

  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"个人信息",
          info:{name:"why",age:18}
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-if-else的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="Object.keys(info).length">
      <h2>{{message}}</h2>
      <!-- v-if="条件" -->
      <ul>
        <li>姓名：{{info.name}}</li>
        <li>年龄：{{info.age}}</li>
      </ul>
    </div>

    <!-- v-else -->
    <div v-else>
      <h2>没有个人信息</h2>
      <p>请输入个人信息后，展示内容</p>
    </div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"个人信息",
          info:{}
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-else-if使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>

    <h1 v-if="score > 90">优秀</h1>
    <h2 v-else-if="score > 80">良好</h2>
    <h3 v-else-if="score >= 60">及格</h3>
    <h4 v-else>不及格</h4>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          score:70
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. template元素的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <template v-if="Object.keys(info).length"> 
      <h2>个人信息</h2>
      <ul>
        <li>姓名：{{info.name}}</li>
        <li>年龄：{{info.age}}</li>
      </ul>
    </template>
    <template>
      <h2>没有输入个人信息</h2>
      <p>请输入个人信息后，展示内容</p>
    </template>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          info:{name:"why",age:18}
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. 条件渲染-阶段案例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">

    <div>
      <button @click="toggle">切换</button>
    </div>
    <div v-if="isshowcode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          isshowcode:true
        }
      },
      methods:{
        toggle(){
          this.isshowcode = !this.isshowcode;
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-show条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">

    <div>
      <button @click="toggle">切换</button>
    </div>
    <div v-if="isshowcode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </div>
    <div class="v_show" v-show="isshowcode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          isshowcode:true
        }
      },
      methods:{
        toggle(){
          this.isshowcode = !this.isshowcode;
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

Vue的列表渲染

  1. v-for的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>

    <ul>
      <li v-for="(item,index) in movies">{{item}}</li>
    </ul>

    <ul>
      <li v-for="(item,index) in products">
          {{item.id}}-----{{item.name}}-----{{item.price}}
      </li>
    </ul>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          movies:['星际穿越','少年派','大话西游','多啦A梦'],
          products:[
            {id:110,name:"Macbook",price:9.9},
            {id:111,name:"iphone",price:9.9},
            {id:112,name:"小米手环",price:9.9},
          ]
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-for的其他数据类型
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>

    <!-- 字符串 -->
    <ul>
      <li v-for="(item,index) in message">{{item}}</li>
    </ul>
    <!-- 数组 -->
    <ul>
      <li v-for="(item,index) in for_arr">{{item.title}}</li>
    </ul>
    <!-- 对象 -->
    <ul>
      <li v-for="(item,key,index) in airtcle">{{item}}--{{key}}---{{index}}</li>
    </ul>
    <!-- 数字 -->
    <ul>
      <li v-for="(item,index) in 10">{{item}}</li>
    </ul>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          airtcle:{id:1,title:'标题一',desc:'描述'},
          for_arr:[
            {id:1,title:'标题一'},
            {id:2,title:'标题二'},
            {id:3,title:'标题三'},
          ]
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-for和template
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <!-- 如果div没有实际意义，那么可以使用template -->
    <template v-for="(value,key,indx) in infos">
      <span>{{value}}</span>
      <div>{{key}}</div>
      <span>{{index}}</span>
    </template>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          infos:{name:'why',age:18,height:1.88}
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. 数组更新的检测
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <ul>
      <li v-for="(item,index) in names">{{item}}</li>
    </ul>
    <button @click="change_val()">操作</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          names:["abc","cba","nba","aaa","ccc"]
        }
      },
      methods:{
        change_val:function(){
          // 1.直接修改为另一个数组
          // this.names = ["why","abc"];

          // 2.通过一些数组的方法，修改数组中的元素
          // this.names.push("why")
          // this.names.pop()
          // this.names.splice(2,1,"why")
          // this.names.sort()
          // this.names.reverse()

          // 3. 不修改元数据的方法是不能监听watch
          const newNames = this.names.map(item => item + "why")
          this.names = newNames;
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-for中的key属性
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>

    <ul>
      <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          letters:["a","b","c"]
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

Vue的computed

  1. 复杂数据的处理-插值语法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{this.num1 + this.num2}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          num1:1,
          num2:2
        }
      },
      methods:{
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. 复杂数据的处理-methods
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{get_sub()}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          num1:1,
          num2:2
        }
      },
      methods:{
        get_sub(){
          return this.num1 + this.num2;
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. 复杂数据的处理-computed
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{get_sub}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          num1:1,
          num2:2
        }
      },
      computed:{
        get_sub(){
          return this.num1 + this.num2;
        }
      },
      methods:{

      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. computed和methods区别
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{get_sub}}</h2>
    <h2>{{get_sub}}</h2>
    <h2>{{get_sub}}</h2>
    <h2>{{get_ext()}}</h2>
    <h2>{{get_ext()}}</h2>
    <h2>{{get_ext()}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          num1:1,
          num2:2
        }
      },
      computed:{
        get_sub(){
          console.log('computed get_sub-------------')
          return this.num1 + this.num2;
        }
      },
      methods:{
        get_ext(){
          console.log('methods get_ext-------------')
          return this.num1 + this.num2;
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. 计算属性的set和get写法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{fullname}}</h2>
    <button @click="setFullname">改变fullname</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          firstname:'coder',
          lastname:'why'
        }
      },
      computed:{
        // 完整语法
        fullname:{
          get:function(){
            return this.firstname+" "+this.lastname
          },
          set:function(value){
            const names = value.split(" ")
            this.firstname = names[0]
            this.lastname = names[1]
          }
        }
      },
      methods:{
        setFullname(){
          this.fullname = "kobe bryant"
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

Vue的watch侦听

  1. Vue的data的watch
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <button @click="changeMessage">改变message</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          info:{name:'why',age:18}
        }
      },
      methods:{
        changeMessage(){
          this.message = '你好，世界';
          this.info = {name:"kobe"}
        }
      },
      watch:{
        // 1.默认对象参数 newValue/oldValue
        message(newValue,oldValue){
          console.log('message数据发生了变化：',newValue,oldValue)
        },
        info(newValue,oldValue){
          // 2.如果是对象类型，那么拿到的是代理对象
          // console.log("info数据发生了变化：",newValue,oldValue)
          // console.log(newValue.name,oldValue.name);
          // 3.获取原生对象
          console.log({ ...newValue });
          console.log(Vue.toRaw(newValue));
        }
      },
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. Vue的watch监听器选项
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{info.name}}</h2>
    <button @click="change_name">改变name</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          info:{name:'coder',age:18}
        }
      },
      methods:{
        change_name(){
          this.info.name = "kobe"
        }
      },
      watch:{
        // 默认watch监听不会进行深度监听
        // info(newVlaue,oldValue){
        //   console.log("监听到info的改变：",newVlaue,oldValue)
        // }
        // 进行深度监听
        info:{
          handler(newValue,oldValue){
            console.log("监听到info改变：",newValue,oldValue)
            console.log(newValue === oldValue)
          },
          // 监听器选项：
          // info进行深度监听
          deep:true,
          // 第一次渲染直接执行一次监听
          immediate:true
        },
        "info.name":function(newValue,oldValue){
          console.log("name发生改变：",newValue,oldValue)
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. Vue的$watch监听
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <button @click="change_message">修改message</button>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue"
        }
      },
      methods:{
        change_message(){
          this.message = '你好，世界';
        }
      },
      created(){
        // ajax/fetch/axios
        console.log("created");
        this.$watch("message",(newValue,oldValue)=>{
          console.log("message数据变量：",newValue,oldValue)
        },{deep:true,imediate:true})
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

Vue的阶段案例

  1. 购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in card_list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td> 
            <button :disabled="item.num <= 1" @click="sub(index,-1)">-</button>
            {{item.num}}
            <button @click="sub(index,1)">+</button>
          </td>
          <td @click="del(index)">删除</td>
        </tr>
      </tbody>
    </table>
    <div>总计：{{count}}</div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"购物车",
          card_list:[
            {id:1,name:'php教程',price:30,num:1},
            {id:2,name:'Go教程',price:40,num:1},
            {id:3,name:'java教程',price:20,num:1},
          ],
        }
      },
      computed:{
        count(){
          let price = 0;
          for(const item of this.card_list){
            price += item.price * item.num;
          }
          return price
        }
      },
      methods:{
        sub:function(index,num){
          console.log(index,num)
            this.card_list[index].num = this.card_list[index].num + num;
        },
        del:function(index){
           this.card_list.splice(index,1);
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

Vue的双向绑定

  1. v-model的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <!-- 收到实现v-model -->
    <input type="text" :value="val" @input="change_val"> 
    <div>val的值{{val}}</div>
    <!-- 自动实现 -->
    <input type="text" v-model="model_val">
    <div>model_val的值{{model_val}}</div>

    <!-- textarea -->
    <textarea name="" id="" cols="30" v-model="textarea_value" rows="10"></textarea>
    <div>textarea_value的值{{textarea_value}}</div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          val:'abcd',
          model_val:'hello',
          textarea_value:'aaaaaaaaaaa'
        }
      },
      methods:{
        change_val:function(eve){
          this.val = eve.target.value;
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-model绑定textarea
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <!-- 收到实现v-model -->
    <input type="text" :value="val" @input="change_val"> 
    <div>val的值{{val}}</div>
    <!-- 自动实现 -->
    <input type="text" v-model="model_val">
    <div>model_val的值{{model_val}}</div>

    <!-- textarea -->
    <textarea name="" id="" cols="30" v-model="textarea_value" rows="10"></textarea>
    <div>textarea_value的值{{textarea_value}}</div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          val:'abcd',
          model_val:'hello',
          textarea_value:'aaaaaaaaaaa'
        }
      },
      methods:{
        change_val:function(eve){
          this.val = eve.target.value;
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-model绑定checkbox
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <!-- 单选框 -->
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>单选框：{{isAgree}}</h2>
    <hr>

    <div class="hobbies">
      <h2>请选择你的爱好：</h2>
      <label for="sing">
        <input type="checkbox" id="sing" v-model="hobies" value="唱">唱
      </label>
      <label for="jump">
        <input type="checkbox" id="jump" v-model="hobies" value="跳">跳
      </label>
      <label for="rap">
        <input type="checkbox" id="rap" v-model="hobies" value="rap">rap
      </label>
      <h1>你的爱好：{{hobies}}</h1>
    </div>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          isAgree:false,
          hobies:[]
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-model绑定radio
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <label for="man">
      <input type="radio" id="man" v-model="gender" value="man"> 男
    </label>
    <label for="wman">
      <input type="radio" id="wman" v-model="gender" value="wman"> 女
    </label>
    <h2>性别：{{gender}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          gender:"man"
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-model绑定select
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <!-- select 单选 -->
    <select name="" v-model="fruit" id="">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
    </select>
    <h2>单选：{{fruit}}</h2>
     <!-- select 多选 -->
     <select name="" multiple size="3" v-model="fruits" id="">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
    </select>
    <h2>多选：{{fruits}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          fruit:"orange",
          fruits:[]
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-model的值绑定
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>

     <!-- select 多选 -->
     <select name="" multiple size="3" v-model="fruits" id="">
      <option v-for="(item,index) in select_option" :key="item.val" :value="item.val">{{item.txt}}</option>
    </select>
    <h2>多选：{{fruits}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          fruit:"orange",
          fruits:[],
          select_option:[
            {val:'apple',txt:'苹果'},
            {val:'orange',txt:'橘子'},
            {val:'banana',txt:'香蕉'},
          ]
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. v-model的修饰符
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>

    <!-- 1.lazy绑定事件  onchange -->
    <input type="text" v-model.lazy="message">
    <h2>message:{{message}}</h2>
    <hr>
    <!-- 2.number:自动将内容转换为数子 -->
    <input type="text" v-model.number="counter" name="" id="">
    <h1>counter:{{counter}}--{{typeof counter}}</h1>
    <hr>
    <input type="number" v-model.number="counter2" name="" id="">
    <h1>counter:{{counter2}}--{{typeof counter2}}</h1>
    <hr>
    <!-- 3.trim去除首位空格 -->
    <input type="text" v-model.trim="content">
    <h2>content:{{content}}</h2>
    <hr>
    <!-- 4. 使用多个修饰符 -->
    <input type="text" v-model.lazy.trim="content">
    <h2>content:{{content}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // data:option api
      data(){
        return {
          message:"hello vue",
          counter:0,
          counter2:0,
          content:''
        }
      },
      watch:{
        content(newValue,oldValue){
          console.log('newValue',newValue)
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

Vue组件化开发

  1. vue的根组件使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
  </div>

  <script src="./lib/vue.js"></script>
  <script>
    const App = {
      // data:option api
      data(){
        return {
          message:"hello vue"
        }
      }
    };

    const app = Vue.createApp(App)

    app.mount("#app")
  </script>
</body>
</html>
  1. 组件-注册全局组件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <product-item></product-item>
    <product-item></product-item>
    <product-item></product-item>
  </div>


  <!-- 组件product-item的模板 -->
  <template id="item">
    <div class="product">
      <h1>我是商品</h1>
      <h3>商品图片</h3>
      <div>商品价格￥9.9</div>
      <p>商品描述</p>
    </div>
  </template>
  <script src="./lib/vue.js"></script>
  <script>
    const App = {};
    const app = Vue.createApp(App)
    // 注册一个全局组件
    app.component("product-item",{
      template:"#item"
    })
    app.mount("#app")
  </script>
</body>
</html>
  1. 组件自己的逻辑
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 驼峰命名不起作用 -->
    <!-- <ComponentTitle></ComponentTitle> -->
    <product-item></product-item>
    <component-title></component-title> 
    <product-item></product-item>
    <component-title></component-title> 
    <product-item></product-item>
    <component-title></component-title> 
    <product-item></product-item>
  </div>


  <!-- 组件product-item的模板 -->
  <template id="item">
    <div class="product">
      <h1>我是商品</h1>
      <h3>商品图片</h3>
      <div>商品价格￥9.9</div>
      <p>商品描述</p>
    </div>
  </template>
   <!-- 组件product-item的模板 -->
   <template id="ComponentTitle">
    <div>
      <h1>商品标题</h1>
    </div>
  </template>

  <script src="./lib/vue.js"></script>
  <script>
    const App = {};
    const app = Vue.createApp(App)
    // 注册一个全局组件
    app.component("product-item",{
      template:"#item"
    })
    app.component("ComponentTitle",{
      template:"#ComponentTitle"
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. vue全局组件的特点
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 驼峰命名不起作用 -->
    <!-- <ComponentTitle></ComponentTitle> -->
    <product-item></product-item>
    <component-title></component-title> 
    <product-item></product-item>
    <component-title></component-title> 
    <product-item></product-item>
    <component-title></component-title> 
    <product-item></product-item>
  </div>


  <!-- 组件product-item的模板 -->
  <template id="item">
    <div class="product">
      <h1>我是商品</h1>
      <h3>商品图片</h3>
      <div>商品价格￥9.9</div>
      <p>商品描述</p>
    </div>
  </template>
   <!-- 组件product-item的模板 -->
   <template id="ComponentTitle">
    <div>
      <h1>商品标题</h1>
    </div>
  </template>

  <script src="./lib/vue.js"></script>
  <script>
    const App = {};
    const app = Vue.createApp(App)
    // 注册一个全局组件
    //app.componten都是全局组件 全局组件的特点：一旦注册成功后，可以在任意其他组件的template中使用
    app.component("product-item",{
      template:"#item"
    })
    app.component("ComponentTitle",{
      template:"#ComponentTitle"
    })

    app.mount("#app")
  </script>
</body>
</html>
  1. vue局部组件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <product-item></product-item>  
    <product-item></product-item>  
    <product-item></product-item>  
  </div>

  <!-- 组件product-item的模板 -->
  <template id="product">
    <div class="product">
      <h1>{{title}}--------我是商品</h1>
      <h3>商品图片</h3>
      <div>商品价格￥{{price}}</div>
      <p>商品描述</p>
    </div>
  </template>

  <script src="./lib/vue.js"></script>
  <script>
    const ProductItem = {
      template:"#product",
      data(){
        return {
          title:'我是product的标题',
          price:9.9
        }
      }
    }
    const app = Vue.createApp({
      // data:option api
      components:{
        ProductItem,
      },
      data(){
        return {
          message:"hello vue"
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>

感谢大家观看，我们下次见。

栏目分类全部>
腾讯云采购季云服务器一折促销
标签云
#ReactJS #ES6 #Git #Vue #layui #AngularJS #我的主页BLOG
推荐文章
© 2024 xvzhu.cn license 冀ICP备19002613号冀ICP备19002613号