请输入关键字进行搜索...

程序员鸡皮

文章 分类 评论
60 3 9
联系我
the theme is by @冷文学习者

站点介绍

一名PHP全栈程序员的日常......

Vue3基本使用(基础部分)

abzzp 2024-07-09 204 0条评论 前端 vue

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

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>
  1. 计数器（重构）
<!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是声明式编程思想，原生是命令式编程思想。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 命令式编程和声明式编程 -->
    <h2>当前计数：<span class="counter"></span></h2>
    <button class="add">+1</button>
    <button class="sub">-1</button>
    <script>
        // 获取dom
        const h2El = document.querySelector("h2")
        const counterEl = document.querySelector(".counter")
        const addBtnEl = document.querySelector(".add")
        const subBtnEl = document.querySelector('.sub')
        // 2.定义一个变量记录数据
        let counter = 10
        counterEl.textContent = counter
        // 2.监听按钮的点击
        addBtnEl.onclick = function(){
            counter++
            counterEl.textContent = counter
        }
        subBtnEl.onclick = function(){
            counter--
            counterEl.textContent = counter
        }
    </script>
</body>
</html>
  1. options选项-data属性选项的详解
<!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中配置代码片段；设置-》首选项-》配置用户代码片段

2. 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>

3.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>

4.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>

5.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>

6.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>

7.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>

8.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>

9.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>

10.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>

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

版权所属: abzzp
本文链接: https://xvzhu.cn/archives/3.html
协议授权: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》
下一篇 上一篇

评论(0)

最新评论

  • abzzp

    十天看一部剧，还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行，谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升，每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了，报错了吗？[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会，献血还给学分~

  • 夜

    @ab 我想去学网安，比如网警，但分也贼高😕

  • ab

    @夜 加油，你一样也可以成为程序员的，需要学习资料可以V我

  • 夜

    佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞 我也想去献血，过两年就成年了可以去献血了

日历

2024年11月

日一二三四五六
     12
3456789
10111213141516
17181920212223
24252627282930

标签云

vue JavaScript React Golang 观后感 ES6 读后感

友情链接

boys博客 白雾茫茫丶 时光日志 云烟博客

文章目录

推荐关键字： vue JavaScript React Golang 观后感 ES6 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案
高贵黑
默认配色
墨蓝色
优雅白