Vue3.0官方中文版开发文档:https://vue3js.cn/docs/zh/

前2天学习笔记:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="https://unpkg.com/vue@next"></script> 
		<style type="text/css">
			#app h5{font: 16px/2 "微软雅黑";font-weight: 500;color: #0088ff;}
			#app pre{padding: 10px;background: #f5f5f5;font-size: 12px;color: #ef690a;}
			.show img{width: 200px;height: auto;}
		</style>
	</head>
	<body>
		<div id="app">
			<h5>1.绑定数据及事件:</h5>
			<h2>
				<span v-bind:title="msg">
					title:{{name}}
				</span>
				<button v-on:click="resM">翻转</button>
			</h2>
			<pre>注意:v-on和v-bind的区别:v-on 指令添加一个事件监听器;v-bind 各类数据绑定指令</pre>
			<h5>2.响应式数据:</h5>
			<p>age:{{age}}</p>
			<pre>注意:mounted声明周期——页面挂载时触发事件</pre>
			<h5>3.表单数据双向绑定:</h5>
			<div class="modle">
				<span>你输入了:{{inputModel}}</span>
				<input type="text" v-model="inputModel" />
			</div>
			<pre>v-model绑定表单数据,别忘了挂载事件</pre>
			<h5>4.条件if:控制元素显示隐藏</h5>
			<div class="show">
				<img v-if="seen" src="https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/1fabda50b9914134951dbc1caa791007.jpg" alt=""/>
				<button v-on:click="changeS">切换显示状态</button>
			</div>
			<pre>v-if条件判断,符合条件显示,否则不渲染</pre>
			<h5>5.列表循环</h5>
			<div class="list">
				<ul>
					<li v-for="item in lists">{{item.tag}}</li>
				</ul>
			</div>
			<pre>注意:v-for="item in lists" 直接绑定到循环元素上,小程序绑定数据是在父元素上,注意区分!</pre>
			<h5>6.组件创建</h5>
			<div class="component">
				<ul>
					<custom v-for="item in lists" v-bind:todo="item"  v-bind:key="item.id"></custom>
				</ul>
			</div>
			<pre>注意:1.组件的创建方式;2.props:['todo'], 设置参数注意格式;3.v-bind:todo="item",数据传递至组件参数内</pre>
			<h5>7.应用实例创建</h5>
			<pre>const app = Vue.createApp({ data(){ return{ count:4 } }})</pre>
			<h5>8.组件实例 property</h5>
			<pre>const vm = app.mount('#app')</pre>
			<pre>注意,获取实例数据的方式:console.log(vm.count)   => 4</pre>
			<h5>8.v-once一次性地插值,数据再发生变化就不再更新了:</h5>
			<p class="oncebox" ><span v-once>我是一次性值:{{onceV}}</span></p>
			<pre>注意:v-once必须放到绑定元素的子元素上</pre>
			<h5>9.v-html插入html</h5>
			<div class="htmlbox">
				<p>没有用v-html:{{ rhtml }}</p>
				<p>用v-html:<span v-html="rhtml"></span></p>
			</div>
			<h5>10.v-bind绑定html的attribute属性值</h5>
			<pre>用来绑定title,src,data-*...所有元素本身或自定义的值</pre>
			<h5>11.使用JavaScript 表达式,仅支持三元或单个表达式</h5>
			<h5>12.v-on监听 DOM 事件</h5>
			<pre>v-on:click="doSomething"</pre>
			<h5>12.动态参数</h5>
			<p>v-bind:[attributeName]="url"和v-on:[eventName]="doSomething",当“[]”里面的动态参数变化时,相当于绑定的属性值和事件发生了变化</p>
			<p class="ppv">
				<a v-bind:[ame]="url">去百度</a> 
				<button v-on:click="arm ='title'?changeB:changeA">点击切换为跳转链接</button>
			</p>
			<pre>注意:v-bind动态参数时[参数名]和后面的值url都必须是动态的数据,v-on也一样</pre>
		</div>
		
		<script>  
			//绑定数据及事件
			const names = {
				data(){
					return{
						name:'张三',
						msg:"我是title的提示信息"
					}
				},
				mounted(){
					this.name = "李四的家";
				},
				methods:{
					resM(){
						this.name=this.name.split('').reverse().join('');
					}
				}
			}
			Vue.createApp(names).mount('#app h2'); //声明式渲染方式——挂载事件
			
			//响应式数据
			const ages = {
				data(){
					return{
						age:0
					}
				},
				mounted(){
					setInterval(()=>{
						this.age++
					},1000)
				}
			}
			Vue.createApp(ages).mount("#app p");
			
			//表单数据双向绑定
			const modles = {
				data(){
					return{
						inputModel:''
					}
				}
			}
			Vue.createApp(modles).mount("#app .modle");
			
			//条件判断,控制元素显示隐藏
			const shows={
				data(){
					return{
						seen:true
					}
				},
				methods:{
					changeS(){
						this.seen = !this.seen;
					}
				}
			}
			Vue.createApp(shows).mount("#app .show");
			
			//列表循环
			const listBox = {
				data(){
					return{
						lists:[
							{id:0,tag:"花菜"},{id:2,tag:"菠菜"},{id:3,tag:"大白菜"}
						]
					}
				}
			}
			Vue.createApp(listBox ).mount('#app .list');
			
			//创建组件
			const cpt = {
				data(){
					return{
						lists:[
						{id:0,title:"组件第1条数据"},
						{id:1,title:"组件第2条数据"},
						{id:2,title:"组件第3条数据"}
						]
					}
				}
			}
			const Cpt = Vue.createApp(cpt); //创建数据实例
			//添加数据实例对应的组件
			Cpt.component('custom',{  
				props:['todo'], //设置参数注意格式
				template:`<li>{{todo.title}}</li>`
			})
		    const apps = Cpt.mount('.component');//组件实例挂载到元素上,并创建应用实例
		    console.log(apps.lists);
		    
		    
		    
		    //一次性数据测试
			const onces = {
				data(){
					return{
						onceV:0
					}
				},
				mounted(){
					setInterval(()=>{
						this.onceV++
					},1000)
				}
			}
			Vue.createApp(onces).mount(".oncebox");
			
			//v-html
			 const htmls= {
			 	data(){
			 		return{
			 			rhtml:"<span style='color:red'>我的红色的</span>"
			 		}
			 	}
			 }
			 Vue.createApp(htmls).mount(".htmlbox");
			 
			 //绑定动态参数
			const att = {
				data(){
					return {
						ame:'title',
						url:'http//www.baidu.com'
					}
				},
				methods:{
					changeA(){
						this.ame='href';
					}
				}
			}
			Vue.createApp(att).mount(".ppv");
		</script>
	</body>
</html>

最终效果:

1.绑定数据及事件:

title:{{name}}

注意:v-on和v-bind的区别:v-on 指令添加一个事件监听器;v-bind 各类数据绑定指令
2.响应式数据:

age:{{age}}

注意:mounted声明周期——页面挂载时触发事件
3.表单数据双向绑定:
你输入了:{{inputModel}}
v-model绑定表单数据,别忘了挂载事件
4.条件if:控制元素显示隐藏
v-if条件判断,符合条件显示,否则不渲染
5.列表循环
  • {{item.tag}}
注意:v-for="item in lists" 直接绑定到循环元素上,小程序绑定数据是在父元素上,注意区分!
6.组件创建
注意:1.组件的创建方式;2.props:['todo'], 设置参数注意格式;3.v-bind:todo="item",数据传递至组件参数内
7.应用实例创建
const app = Vue.createApp({ data(){ return{ count:4 } }})
8.组件实例 property
const vm = app.mount('#app')
注意,获取实例数据的方式:console.log(vm.count)   => 4
8.v-once一次性地插值,数据再发生变化就不再更新了:

我是一次性值:{{onceV}}

注意:v-once必须放到绑定元素的子元素上
9.v-html插入html

没有用v-html:{{ rhtml }}

用v-html:

10.v-bind绑定html的attribute属性值
用来绑定title,src,data-*...所有元素本身或自定义的值
11.使用JavaScript 表达式,仅支持三元或单个表达式
12.v-on监听 DOM 事件
v-on:click="doSomething"
12.动态参数

v-bind:[attributeName]="url"和v-on:[eventName]="doSomething",当“[]”里面的动态参数变化时,相当于绑定的属性值和事件发生了变化

去百度

注意:v-bind动态参数时[参数名]和后面的值url都必须是动态的数据,v-on也一样