欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

《Vue的基本语法》

程序员文章站 2022-03-07 16:39:13
Vue的基本语法Vue入门Vue入门

Vue的基本语法

Vue入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.acticve{
				color: red;
			}
			.def{
				color: #00FF00;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
 <!-- v-for 遍历数组 -->
 <!--:class的对象语法 ===> {key(样式名): value(布尔值),key: value...} -->
 <!--:style的对象语法 ===> {key(属性名): value(属性值),key: value...} -->
		
<!--求解? 默认下标0的元素为红色字体,后续点击哪个元素,哪个元素就变红,其它变为原色??? -->
<!-- 方法一 正常思想-->
<!-- 
:id="['li_'+index]"
@click="changeClass(index)" 
:class="{acticve: index==0}"-->

<!-- 方法二 currentIndex思想 -->
         <ul>
			<li :id="['li_'+index]" 
				@click="current(index)"
				:class="{acticve: index==current_index}"    
				v-for="(item,index) in array"
				:style="{fontSize: object.finalSize+'px'}"> 
				{{index}}-{{item}}
			</li>
		</ul>
			 <button @click="addOrdel" type="button">动态添加或删除数组中元素</button>
			 
<!-- mustache语法-->
			<h2>{{counter%2==0?'是':'否'}}</h2><br>
			
<!-- v-once:始终显示第一次解析的值 -->
			<h2 v-once>{{counter}}</h2><br>
			
			 
<!--v-on:click ||  @click : 点击事件 -->
			<button @click="add" type="button">+</button>
            <button @click="sub" type="button">-</button>
			
<!-- v-html: 解析带html标签的文本 -->
			<h1 v-html="url"></h1>
			
<!-- v-pre: 将里面的文本,原封不动的显示,不进行解析 -->
			<h1 v-pre>{{counter}}</h1>
			
		    <h1>{{object.firstName+' '+object.name}}</h1>
			
<!-- 直接引用vue中的方法 -->
			<h1>{{getFullName()}}</h1>
			
<!-- 直接使用Vue中的计算属性库computed中的fullName -->
			<h1>{{fullName_02}}</h1>
			
<!-- computed中对对象数组的属性进行计算 -->
			<h1>totalPrice:{{totalPrice}}</h1>
			
<!-- v-cloak:当js代码出现问题或引用出现问题,mustache语法块 不会显示 -->
<!-- 引用有内容就显示,没内容就显示空白 -->
			<h1 v-cloak>hello {{counterx}}</h1>
			
<!-- v-bind 给标签绑定一个具体的值 简写 : -->
			<img v-bind:src="pic"/><!--或者使用语法糖 <img :src="pic" > -->
			
<!-- css的名字:布尔值    布尔值为true的时候就显示该class属性-->
<!-- 动态绑定class属性 -->
			<h2 :class="getClass()" @click="change">啊哈哈</h2>
			
<!-- v-on 的修饰符 stop 只执行自己(按钮)的点击事件,不执行包裹它的div的点击事件-->
			<div @click="divClick">
				aaaaaa
				<button @click.stop="btnClick" type="button">按钮</button>
			</div>
			<br>
			
<!-- v-on的 prevent修饰符 阻止默认行为 -->
			<form action="https://www.baidu.com" method="post">
				<input type="submit" @click.prevent="customSend2Server" value="提交"/>
			</form>
			
<!-- v-on的 once修饰符 该事件只触发一次,刷新页面可重置-->
			<h2 @click.once="customSend2Server">ONCE</h2>
			
<!-- v-if 
	 v-else
	 v-else-if -->
			<ul>
				<li v-if="score<60">不及格</li>
				<li v-else-if="score>=60 && score<80">及格</li>
				<li v-else>优秀</li>
			</ul>	 
			
<!-- v-if 和 v-show的区别 -->
<!-- v-if 当为false的时候该span标签就会被删除 -->
			<span style="color: red;" v-if="isShow">V-IF</span><br>
			
<!-- v-show当为false的时候该span标签的style属性会被加上 display:none;的属性 -->
			<span  style="color: #4476A7;" v-show="isShow">V-SHOW</span><br>
			<button type="button" @click="toggle">切换显示</button>
			
<!-- v-for 遍历对象集合 -->
<!-- 绑定key和不绑定key,key的作用就是作为每一个节点的唯一标识,提高Vue更新虚拟DOM的效率-->
			<ul v-for="(book,index) in books">
				<!-- 下面的index是属性的下标 key代表属性名,value代表属性值 -->
				<li id="['ul_li'+'_'+book.id]" 
				    @click="showKey(['ul_li'+'_'+book.id])" 
					v-for="(value,key,index) in book" 
					:key="['li'+book.id]">
					{{key + ':' + value + '-' + index}}
				</li>
			</ul>
			
<!-- v-model双向绑定(表单) -->
			<form action="#" method="post">
				<label for="name">姓名</label>
				<input type="text"     id="name"    v-model="username"/>
				<label for="password">密码</label>
				<input type="password" id="password" v-model="password"/>
			</form>
			<h2>姓名:{{username}}</h2>
			<h2>密码:{{password}}</h2>
			
<!-- v-model双向绑定 单选框 绑定同一个字符串变量实现互斥  -->
				 <label>
				 <input  type="radio" value="篮球" v-model="like">
				 篮球
				</label>
				<label>
				 <input  type="radio" value="足球" v-model="like">
				 足球
				</label>
				<label>
				 <input  type="radio" value="羽毛球" v-model="like">
				 羽毛球
				</label>
				<label>
				 <input  type="radio" value="乒乓球" v-model="like">
				 乒乓球
				</label><br>
				<h1>你选中的是:{{like}}</h1>
				
<!-- v-model双向绑定 多选框 绑定同一个数组,实现共享  -->
			   <label>
			   <input  type="checkbox" value="苹果" v-model="manyArr">
			   苹果
			  </label>
			  <label>
			   <input  type="checkbox" value="橘子" v-model="manyArr">
			   橘子
			  </label>
			  <label>
			   <input  type="checkbox" value="梨子" v-model="manyArr">
			   梨子
			  </label>
			 <h1>你选中的是:{{manyArr}}</h1>
				 
<!-- v-model集合select使用-->
				 <select v-model="so">
				 	<option value="a">a</option>
					<option value="b">b</option>
					<option value="c">c</option>
					<option value="d">d</option>
					<option value="e">e</option>
				 </select>
				 <h2>你选中的字母是: {{so}}</h2>
				 
<!-- 多选 绑定数组 并声明multiple-->
				 <select v-model="somany" multiple>
					<option value="a">a</option>
					<option value="b">b</option>
					<option value="c">c</option>
					<option value="d">d</option>
					<option value="e">e</option>
				 </select>
				 <h2>你选中的字母是: {{somany}}</h2>
				 
 <!-- v-model的修饰符 lazy 延迟绑定,敲下回车或者输入框失去焦点就会立即绑定
					 trim 去出输入值的前后空格
					 number 不加number的时候,输入数字显示类型是String,加了number之后显示的类型是Number-->
					 <!--typeof 判断一个变量的类型 -->
				 <input type="number"  v-model.lazy.trim.number="testXSF" />
				 <h1>{{testXSF}}----{{typeof testXSF}}</h1>
				 
				 
<!-- Vue过滤器的使用 -->				 
				 <h1 style="color: red;">{{username | nameFilter}}</h1>
				 
		</div>
		
		
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
<!--js中的函数式编程 -->			
			const oldarr = [0,20,30,50,100,200];
		    let rt = oldarr.filter(n => n<=50).map(n => n*2).reduce((pre,value)=> pre+value);
			console.log(rt+'=========');
			
<!--let 看成更完美的var  let具有iffor的块级作用域,在作用域外面只读,不可写  -->
				//  if(true){
				// 	let name ='zs';
				// 	func = function(){
				// 		console.log(name);
				// 	}
				//  }
		        //  name = 'dasdsada';
				// func();	//var name 打印 dasdsada   let name 打印 zs 	
		let obj = {
			finalSize:'50',
			minSize:'10',
			bule:'blue',
			firstName:'james',
			name:'tom',
			run(){
				console.log('run ...')
			},
			stop(){
				console.log('stop...')
			}
		}
		
<!-- const 关键字的使用 类似于java中的final关键字,基本数据类型和字符串赋值后无法被修改,对象类型和数组类型被初始化后,不能修改内存地址-->		
		const name = 'zs';
		const age = 12;
		const salary = 1220;
		//属性注入
		const student = {name,age,salary};
		console.log('student = '+JSON.stringify(student));

		const namex = 'dasd';
		//namex = 'dsadsad';//报错
		
		const num = 1;
		//num = 0;报错
		
		const arr = ['s','b','c'];
		//arr = ['ssss'];//报错
		arr[0] = 'bbbb';
		console.log('arr[0]='+arr[0]);
		
		const demo = {id:1,name:'zs',age:20};
		//demo = {};//报错
		demo.id = 3;
		console.log(demo);
		
		
		const vue =	new Vue({
				el:'#app',
				data:{
					array:['zs','ls','ww','xq','zl'],
					username:'zs',
					password:'123456',
					like:'篮球',
					manyArr:[],
					so:'e',
					somany:[],
					testXSF:'',
					counter:0,
					url:'<a href="https://www.baidu.com">百度</a>',
					pic: 'https://cn.vuejs.org/images/dcloud.gif',
					isActive:true,
					isDefault:false,
					object:obj,
					score:90,
					isShow:true,
					books:[
							{id:100,name:'java从入门到精通',price:100},
							{id:101,name:'python从入门到精通',price:200},
							{id:102,name:'c++从入门到精通',price:300},
							{id:103,name:'php从入门到精通',price:222}
					      ],
				    current_index:0		  
				},
				//computed 计算属性 实际也是一个函数库
				//computed 计算属性 会对结果进行缓存,如果方法里面的属性没发生变化的话,会调用缓存,性能优于methods
				//methods  中的方法 使用几次,方法就会被调用几次
				computed:{
					fullName:function(){
						return this.object.firstName + ' ' + this.object.name;
					},
					//计算属性的set和get方法,在浏览器控制台,Vue实例名.fullName_02 调用get方法,Vue实例名.fullName_02= 'xxxx'调用set方法
					fullName_02:{
						set:function(newValue){
							console.log(newValue);
						},
						get:function(){
							return this.object.firstName + ' ' + this.object.name;
						}
					},
					totalPrice:function(){
						// let result = 0;
						// //let 子元素 of 数组 语法
						// for(let book of this.books){
						// 	result += book.price;
						// }
						// return result;
						return this.books.reduce((pre,book) =>pre+book.price,0);
					}
				},
				//过滤器
				filters:{
					nameFilter:function(value){
						return '姓名:'+value;
					}
				},
				//组件
				components:{
					
				},
				methods:{
					add: function(){
						console.log('add..');
						this.counter++;
					},
					sub: function(){
						console.log('sub...');
						this.counter--;
					},
					change:function(){
						this.isActive = !this.isActive;
					},
					getClass:function(){
						return {acticve:this.isActive , def:this.isDefault}
					},
					changeClass:function(e){
					   let current = document.getElementById('li_'+e);
					   let current_className = current.className;
					   if(current_className == ''){
						  let childs = current.parentNode.childNodes;
						  for (let i = 0; i < childs.length; i++) {
						      childs[i].removeAttribute('class')
						  }
						      current.setAttribute('class','acticve');
						   
					   }else{
						      current.removeAttribute('class');
					   }
					},
					getFullName:function(){
						return this.object.firstName + ' ' + this.object.name;
					},
					divClick:function(){
						console.log('divClick======')
					},
					btnClick:function(){
						console.log('btnClick======')
					},
					customSend2Server:function(){
						console.log('customSend2Server.....')
					},
					toggle:function(){
						this.isShow = !this.isShow;
					},
					showKey:function(val){
						alert(val);
					},
					current:function(index){
						this.current_index = index
					},
					addOrdel:function(){
						
<!-- 操作数组的响应式方法,能更新页面的方法-->

						 //往数组尾部插入N个元素
						 //this.array.push('aaaaaaa');
						 //this.array.push('a','b','c');
						
						//删除数组的最后一个元素
						 //this.array.pop();
						 
						 //删除数组的第一个元素
						 //this.array.shift();
						
						 //往数组头部插入N个元素
						 //this.array.unshift('xxxxxxxxxxxxx','yyyyyyyyy');
						
						
						
<!-- splice作用  删除/插入/替换元素-->
						
						 //从第几个下标开始,一次删除几个元素
						//this.array.splice(0,2);
						//this.array.splice(0,this.array.length)
						
						//从下标0开始替换2个元素,替换为'a'和'b'
						//this.array.splice(0,2,'a','b');
						
						//从下标0开始替换2个元素,变为一个元素'a'
						//this.array.splice(0,2,'a');
						
						//从下标零开始插入元素 第一个参数表示数组的下标,第二个参数给0表示插入,后面跟着待插入的元素 
						//this.array.splice(0,0,'a','b','c')
						
						//将数组中的元素进行倒叙
						//this.array.reverse();
						
						//this.array.sort()
						
						//这个不是响应式的,改变数组元素,页面不会刷新 !!!
						//this.array[0] = '00000000';
					   // this.array.splice(0,1,'00000000');//响应式
					   
<!--Vue自带的方法set为响应式方法-->					   
					    //响应式 param1:修改的对象,param2:下标 param3: 修改的值
						Vue.set(this.array,0,'vue==========');
						
					}
				}
			});
		</script>
	</body>	
</html>

本文地址:https://blog.csdn.net/weixin_43766298/article/details/107396126

相关标签: 进击的Vue