AI 助理
备案控制台
开发者社区 云计算 文章 正文

Vue3基本使用(基础部分)

2024-03-06 64
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3基本使用(基础部分)

vue3基础(学习)代码

vue基础代码包含，v-if,v-model,v-for和data(),methods,computed,components等属性或组件的使用

立即下载

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中配置代码片段；设置-》首选项-》配置用户代码片段

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>

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

文章标签：
JavaScript
CDN
2019ab
目录
相关文章
光明顶阳顶天
|
24天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
126 64
光明顶阳顶天
|
24天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
总的来说，Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进，使其更适应现代前端开发的需求和趋势。但需要注意的是，在迁移过程中可能需要对一些代码进行调整和适配。
光明顶阳顶天
103 60
mao29955
|
24天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
29 8
mao29955
|
23天前
|
存储 JavaScript 数据管理
除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
需要注意的是，在实际开发中，应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时，要综合考虑代码的可读性、可维护性和性能等因素，以确保系统的稳定和高效运行。
mao29955
23 1
mao29955
|
23天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性，在处理一些复杂的组件间通信问题时，可以提供一种灵活的解决方案。通过合理使用它们，可以帮助我们更好地避免`v-model`的循环引用问题，提高代码的质量和可维护性。
mao29955
33 1
光明顶阳顶天
|
24天前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
39 2
快乐就是哈哈哈
|
1月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
快乐就是哈哈哈
60 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
html的七十二变
|
1月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`，实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象，动态响应属性的增删，还优化了嵌套对象的处理和依赖追踪，减少了不必要的视图更新，提升了性能。同时，Vue 3.x对数组的响应式处理也更加灵活，简化了开发流程。
html的七十二变
43 3
CamilleKing
|
1月前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
77 7
小宋1021
|
1月前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
98 3

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 3
    vue之webpack打包原理和用法详解
  • 4
    浏览器垃圾回收机制与 Vue 项目内存泄漏分析
  • 5
    【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错
  • 6
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 7
    VUE3中watch与watchEffect —— 全网最详细系列
  • 8
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 9
    中文代码示例之Vuejs入门教程(一)
  • 10
    新建Vue项目
  • 1
    使用Vue.js构建交互式前端的技术探索
    89
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    168
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    150
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    184
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    104
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    120

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战
  • JavaScript入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks