Vue3基本使用(基础部分)

已于 2024-06-14 14:29:54 修改
阅读量249 收藏
点赞数
文章标签： vue.js 前端 javascript vue
于 2023-10-26 21:04:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ab15176142633/article/details/133870362
版权

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>

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

2019ab
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue3的基本使用(超详细)
weixin_58091723的博客
08-16 920
全局注册的自定义指令将正常工作。本地的自定义指令在// 在元素上做些操作</script><template></script>什么是hook函数： 本质是一个函数，把setup函数中使用的Composition API进行了封装类似于vue2.x中的 mixin自定义hook的优势： 复用代码，让setup中的逻辑更清楚易懂使用hook实现鼠标打点”：创建文件夹和usePoint.js文件//实现鼠标打点的数据x: null,y: null})//实现鼠标点的方法。
Vue基础（三）
weixin_59675867的博客
07-29 132
计算属性和侦听器的总结，事件绑定v-on和语法糖写法，v-on参数传递，v-on修饰词，常用按键别名，
vue3的基本使用方法
最新发布
m0_58310590的博客
06-17 1631
f('jing');使用箭头函数：这里function=>f3('jing');Proxy。
Vue3 的基础使用（详细）
Huangxianlong的博客
02-12 4191
vue3的基础使用（详细）
vue3.0基本使用 详细说明！！！
热门推荐
^_^
07-14 3万+
一、vue3概述 （1）为什么要学习vue3 vue目前是前端框架中比较火热的，有了vue2为什么还要学习vue3呢，就像打游戏一样，为什么要升级呢，虽然公司大部分使用的还是vue2，还是有少部分公司使用vue3，提前了解使用vue3 也不是坏处 （2）vue3的新变化 1.性能提升，首次渲染更快，diff算法更快，内存占用更少，打包体积更小， 2.更好的Typescript支持(在vue下写TS更方便了) 3.提供新的写代码方式：Composition API (需要成本学习) （3
Vue基础3（组件与动画）
Liucaicaia的博客
09-23 777
Vue基础中的 组件与动画
编程向导-Vue3+Ts基础指南
02-27
本指南首先介绍了Vue.js 3的基本概念和核心特性，包括组件、指令、响应式数据等。然后，指南详细介绍了如何使用TypeScript来增强Vue.js的开发体验，包括类型声明、接口、泛型等相关内容。 在指南的后半部分，还提供...
vue3 表格组件封装复用
02-27
1. **Vue3基础知识**：Vue3是Vue.js的最新版本，引入了许多新特性，如Composition API、Suspense、Teleport等。在这个项目中，我们将主要利用Composition API来组织和复用功能。 2. **Composition API**：Vue3中的...
vue3实现WebRTC实战1v1通话
09-01
使用`vue create`命令初始化项目，并选择Vue3的配置。 2. **引入WebRTC API**：在Vue组件中，你需要导入`RTCPeerConnection`、`RTCSessionDescription`、`RTCIceCandidate`等WebRTC核心接口，这些API提供了建立、...
vue3代码和笔记zzzzzzzzzzzzzz
04-10
Vue3的基础部分包括但不限于：安装Vue CLI工具，理解Vue实例的创建，使用模板语法，如v-if、v-for、指令（v-bind、v-on等），以及组件化开发。Vue3中的setup函数是另一个关键点，它是Composition API的核心，允许...
Vue基础知识分享
08-07
在"Vue基础知识分享"这个压缩包中，我们有三个关键的学习资源：一个关于Vue基本知识的PPT，一份基于Vue官网实现的简单代码示例，以及一个详细讲述Vue基本操作的Word文档。这些资料将帮助我们深入理解Vue的核心概念和...
vue3的基本使用
Dipper_Dubhe的博客
03-31 8123
vue3 vue2和vue3的区别 1、v-if 和v-for 同一元素上使用的v-if和v-for优先级已更改，但不推荐同时使用 v-if 和 v-for。 2、组件事件 组件事件需要在emits选项中声明 3、生命周期 destroyed 生命周期选项被重命名为 unmounted beforeDestroy 生命周期选项被重命名为 beforeUnmount 4、自定义指令 自定义指令的API已更改为与组件生命周期一致 5、新增组件 新增了三个组件：Fragment 支持多个根节点、
vue3使用教程，一次性讲明白
一步一个脚印，踏实努力，向着目标前进
06-06 3479
Vue.js 3.0 是一个完全重写的版本，采用了更好的编程体验和一些重要的新特性，同时也让整个库更小、更快、更易于维护和使用。
Vue3 使用教程
蓝朽的小世界
11-16 1181
vue3使用教程
Vue3使用讲解（超详细）
常来常往，共同成长
12-14 3268
Vue3 是一种流行的JavaScript框架，用于构建交互式的Web应用程序。它是Vue.js的最新版本，带来了许多新特性和改进，包括更好的性能、更小的包体积和更好的开发体验。本文将详细介绍 Vue3 的使用，包括安装和创建 Vue3 项目、组件的创建和通信、响应式数据和计算属性、模板语法和指令、条件渲染和列表渲染、表单处理、路由和导航、状态管理以及 Vue3 的生态系统。
最全的 Vue3 快速上手指南【值得收藏】
嘿嘿
03-17 1万+
Vue3简介 面临的问题：随着功能的增长，复杂组件的代码变得难以维护，Vue3就随之而来，TypeScript使用的越来越多，Vue3就是TS写的所以能够更好的支持TypeScript 在这里介绍就这么简单 vue2的绝大多数的特性 在Vue3都能使用，毕竟Vue是渐进式的 响应式原理进行使用Proxy实现，v-model可以传参了等等新特性 基础工作 使用Vue3的话，那么必须通过使用构建工具创建一个Vue3项目 安装 vue-cli #npm npmi...
Vue3的基本语法及使用（vue3尚硅谷学习笔记）
vayne_1的博客
10-14 3634
适合初学vue3者，以及学习观看尚硅谷视频的同学，本文精简笔记内容
Vue环境配置与基础语法概览
在Vue的基本语法部分，讲解了Vue插值语法，强调了双大括号用于显示变量或表达式，以及如何使用`v-html`指令来处理HTML内容。" 在Vue的学习过程中，首先需要搭建一个合适的开发环境。文档中列出了以下必要的软件和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

2019ab

你的鼓励就是我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值