初学前端小菜鸡的自我修炼

weixin_40996577

于 2019-04-25 13:35:50 发布

阅读量128

点赞数

文章标签： VUE 前端初学

本文链接：https://blog.csdn.net/weixin_40996577/article/details/89514365

版权

                                     前端初学小菜鸡日记

Vue中的 v-for以及v-if v-else

    <body>
    <div id ="app"> 
   				  <div v-if="flag">
     				    <span>1小猪</span>
      				   <input type="text" key="1">
      				   
       				！！！ 这里如果没有key  flag变化时重新渲染时框内数据不会被删除 仍然显示   
       				   
    			 </div>
 			    <div v-else>
   				      <span>2小猪</span>
       				  <input type="text" key="2">
       				  
             	！！！ 这里如果没有key 重新渲染时框内数据不会被删除 仍然显示  
             	
  				  </div>
					<script src="node_modules/vue/dist/vue.js"> </script>

				 <script> 
					  let vm = new Vue({
 				     el:'#app',
				      data:{ //for value of [1,2,3]
       		       fruits:['?','?','?'],
       		       info:{name:'chenxiaozhu',age:20,address:'深圳'},
        		      flag:true   
         			    }   
   										    })    ;
      				   </script>
      				   	  </body>
 							</html>


 尽量不要用index代替key, index消耗更大
			   <li key="1">? </li>
				<li key="2">? </li>
 			    <li key="3">? </li>
          if use index索引 正序变倒序 First渲染1变成3   Second渲染 香蕉变草莓  
                      需要经过两次渲染，若是使用key则消耗较小
				 <li key="3">? </li>      
				<li key="2">? </li>
 			    <li key="1">? </li>

此时插入一条vm功能 .$mount() 挂载
第一种方法如下

       	let vm = new Vue({
     					 el:'#app',
  					     data:{   
  					    		 }   
   							        })     ;

第二种挂载方法如下将当前实例挂载到模板
单元测试不使用真实DOM 创动态虚拟DOM 到时找不到ID APP 则挂载到虚拟DOM上面

		  	let vm = new Vue({
  					  	      data:{   
  					    	     	 }   
   							        }）.$mount('#app') ;

使用方法如下

		  	let vm = new Vue({
  					  	      data:{   
  					    	     	 }   
   							        }）.$mount('DIV') ;
   		    let div=document.creatElement('DIV')

单向绑定 vue中数据变化导致视图更新只有数据改视图变单向
双向绑定试图更新也会影响数据变化（想使用双向需要可输入，如input type=“text”)

			<body>
	     <div id ="app"> 
	     	<input type="text" ：value="msg" @input="fn" >  
	     								    value="msg" 此时msg是字符串 会出错
	     									 需要写成 :value="msg"
	     									 v-on:inpt="fn()" 绑定方法 触发函数
	     									 
	     			@小知识V-blind绑定属性  缩写等同于 ":"  
	     			 V-on绑定方法 缩写等同于"@"
	     									 	  
	        {{msg}}                         此时取出的值  与text文本框内的值 互不干扰
	     
          <script src="node_modules/vue/dist/vue.js"> </script>
       <script> 
		   let vm = new Vue({
 			        el:'#app',
                    data:{ 
                    msg:'hello',
                    fn:function(){
                    		console.log('xxx') 
                    		 //触发fn方法时 输入台 输入XXX
                    		// XXX改为this，则变成window 但是不可能在内使用VM
                    		//于是需要将其放在一个method中  如下文的 新vue中
           				         }
                           }   
                            }) ;
	  </script>
	   </body>

新VUE！！！！

 let vm = new Vue({
 			        el:'#app',
                    data:{ 
                    msg:'hello',
                          },
                    methods:{
                    fn(e){
                        /* console.log(this)  //方法中的this都是指向当前实例 实例上有msg */
                         this.msg=e.target.value
                         }
                            }
                            }) ;

此时实现了双向绑定，试图更新影响数据变化，框内内容和MSG内容同步更新。
!!!
出现的小问题绑定方法的时候 @input=“fn” 要不要括号呢？
如果添加了括号则出现报错没有target 如果非要加一个括号怎么办呢？
在括号内传入参数，写成 @input=“fn（$event）” 该event等于数据中fn(e)中的e相同
若需要传入其他参数，也可以在event后面加上a 用逗号隔开即可，若是想看运行内容
则写入 fn(e,a){
console.log(a); //对应括号内的a
this.msg=e.target.value //对应括号内的e

此时的代码可以继续简化！ 如何简化呢？
		  <div id ="app"> 
  简化如下<input type="text" :value="msg" @input="(e)=>(msg=e.target.value)">  
	     	
	     	/* v-model是 @input + :value的一个语法糖  */ 
	     	
插入！！此行为语法糖	     	<input type ="text" v-model="msg">
							{{msg}}                          
	     
            <script src="node_modules/vue/dist/vue.js"> </script>
     		  <script> 
		 		  let vm = new Vue({
 			     			   el:'#app',
                			    data:{ 
                			   msg:'hello',
                      				    },
                    methods:{
                 			  /*  fn(e){    
               		             this.msg=e.target.value      //这两行 到上面去了
                         }    */
                            }
                            }) ;

上图代码运行出现三个两个方框一个msg 两个方框都是双向绑定同时变化数据。
第二个方框运用的是语法糖， v-model是 @input + :value的一个语法糖。
第二个方框直接使用了v-model=msg 而第一个方框的值为msg 且有方法函数
所以第二个方框直接具有了第一个方框所具备的功能。

select,radio,checkbox常用双向绑定。
 First example
	     <div id ="app"> 
  <input type="text"  :value="msg" @input="(e)=>(msg=e.target.value)">  
  <input type ="text" v-model="msg">
                 {{msg}}

  <select v-model="selectValue">
 <option v-for="(list,key) in  lists " :value="list.id">{{list.value}}</option>
  </select>
          {{selectValue}}         
         </div>
         
  			  <script src="node_modules/vue/dist/vue.js"> </script>
	          <script> 
			     let vm = new Vue({
         					         data:{ 
                     			    msg:'hello',
                    			     selectValue:'2',  //这里选择2则默认下的选择为2
                   	  			    lists:[{value:'菜单1',id:'1小猪'},{value:'菜单2',id:'2小猪'},{value:'菜单3',id:'3小猪'}]
                        						  },
            methods:{
                 
                    }
                    }).$mount('#app');
                    
				 </script> 
上图代码 呈现的是一个下拉表格  左边是菜单1-菜单3 点击对应的是1小猪 2小猪 3小猪