VUE基础

一、VUE基础
//首先页面引入vue.js 官网自行下载即可
const obj={
   counter:0,
   message:'abc'
}
const app= new Vue({
    el: "#app" //可以字符串，也可以是html元素
    data: 函数 或者 obj
    methods:{  //方法
   	 add:function(){
   		alert(1111)
   	  },
   	 edit:function(){
   		alert(2222)
   	 }
    },
    beforeCreate:function(){  //函数
    
    }
    created:function(){
    	console.log('created')
	}, 
	mounted:function(){
    	console.log('mounted')
	}
})
二、vue 生命周期
//通过vue源码中的callHook 进行生命周期回调（ created、mounted ）等函数，通过钩子进行回调
生命周期详解：https://www.cnblogs.com/zzw731862651/p/9372427.html

三、基本语法 模板语法
//CLI 脚手架=》editconfig

const app = new Vue({
    el: "#app" 
    data: {
    	message:"你好",
    	fistName:"kobe"，
    	lastName:"qwer",
    	counter:100
    }
})
【插值操作】
1.Mustache (双大括号语法)
<div id='app'>
   <h1>{{message}}</h1>
   <h1>{{fistName +' '+ lastName}}</h1>
   <h1>{{counter * 2}}</h1> //200
</div>

-----------------------------------------------------------------------
2.指令 v-once 指令的使用
<div id='app'>
   <h1 v-once>{{message}}</h1> //不会根据数据变化来改变
</div>

--------------------------------------------------------

3.v-html指令的使用
const app = new Vue({
    el: "#app" 
    data: {
    	url:'<p>123456</p>' //服务器返回的标签
    }
})
<div id='app'>
   <h1 v-html='url'></h1>  //解析html标签
</div>

---------------------------------------------------
4.v-text 指令的使用,用起来不灵活
const app = new Vue({
    el: "#app" 
    data: {
    	text:'123456' 
    }
})
<div id='app'>
   <h1 v-text='text'></h1>  
</div>

-----------------------------------------------------------------------
5.v-pre 指令的使用
const app = new Vue({
    el: "#app" 
    data: {
    	message:'123456' 
    }
})
<div id='app'>
   <h1 v-per>{{message}}</h1> //不做任何解析， 把{{message}}  原封不动显示出来
</div>

-----------------------------------------------------------
6.v-cloak 指令的使用 (斗篷）
//在vue解析之前，div中有一个属性v-cloak
//在vue解析之后，div中没有一个属性 v-cloak
<style>
   [v-cloak]{
   	display:none;
   }
</style>
<div id='app' v-cloak>
   <h1>{{message}}</h1> 
</div>

----------------------------------------------------------
7.v-bind 的基本使用 动态绑定属性
const app = new Vue({
    el: "#app" 
    data: {
    	message:'123456' ,
    	imgUrl:'https://v3.cn.vuejs.org/logo.png'，
    	hrefUrl:'https://www.baidu.com/'
    }
})
<div id='app'>
   <img v-bind:src="imgUrl"/>
   <a v-bind:href="hrefUrl"/>百度一下</a>
</div>

----------------------------------------------
8.v-bind 语法糖写法，可简写
<div id='app'>
   <img :src="imgUrl"/>
   <a :href="hrefUrl"/>百度一下</a>
</div>

----------------------------------------
9.v-bind动态绑定class(对象语法)
<style>
   .active{
   	color:red
   }
</style>
const app = new Vue({
    el: "#app" 
    data: {
    	message:'123456' ,
    	active:active,
    	isActive:true,
    	isLine:true
    },
    methods:{
    	btnClick:function(){
    		this.isActive = !this.isActive
    	},
    	getClasses:function(){
    		return {activ1：this.isActive,line:this.isLine}
    	}
    }
})
<div id='app'>
<h1 :class='{key1：value1,key2:value1}'>{{message}}</h1>
<h1 :class='{类名1：true,类名2:false}'>{{message}}</h1>
<h1 :class='{activ1：true,line:boolean}'>{{message}}</h1>
<h1 :class='{activ1：isActive,line:isLine}'>{{message}}</h1>
<h1 :class='getClasses()'>{{message}}</h1>
<button v-on:click='btnClick'></button>
</div>


------------------------------------------------

10.v-bind动态绑定class(数组语法)
const app = new Vue({
    el: "#app" 
    data: {
    	message:'123456' ,
    	active:'aaa',
    	line:'bbbb'
    },
    methods:{
   	 getClasses:function(){
   	 	return [this.active,this.line]
   	 }
    }
})
<div id='app'>
   <h1 :class="['active','line']">{{message}}</h1> //有单引号字符串
   <h1 :class="[active,line]">{{message}}</h1>//没单引号变量
   <h1 :class="getClasses()">{{message}}</h1> //
</div>

--------------------------------------------------------------------------------
11.v-for 遍历
const app = new Vue({
    el: "#app" 
    data: {
    	movies:['海贼王','火影忍者','黑猫警长'] ,
    }
})
<div id='app'>
   <ul>
   	<li v-for="变量 in 列表">{{变量}}</li>
   	<li v-for="item in movies">{{itme}}</li>  //item 仅仅变量名称，可随意设置
   	<li v-for="(item,index) in movies">{{index}}-{{itme}}</li>  // index为下标值
   </ul>
</div>

-----------------------------------------------
12.v-bind 动态绑定style(对象语法)
const app = new Vue({
    el: "#app" 
    data: {
    	message:'abcdefg',
    	finalSize:'100px'
    	finalSize_a:100,
    	finalColor:'red'
    },
    methods:{
   	 getStylese:function(){
   		 return {fontSize:this.finalSize,color:this.finalColor}
   	 }
    }
})
<div id='app'>
   <h1 :style='{key(属性名):value(属性值)}'></h1>
   <h1 :style="{fontSize:'50px'}">{{message}}</h1> //50px必须加单引号，否则当变量使用
   <h1 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h1>
   <h1 :style="{fontSize:finalSize_a + 'px'}">{{message}}</h1>
   <h1 :style="getStylese()">{{message}}</h1>
</div>

-------------------------------------------------------------
13.v-bind 动态绑定style(数组语法)

const app = new Vue({
    el: "#app" 
    data: {
    	message:'abcdefg',
    	baseStyle:{color:'red'},
    	baseStyle1:{color:'red'}
    },
    methods:{
   	 getStylese:function(){
   		 return [this.baseStyle,this.baseStyle1]
   	 }
    }
})
<div id='app'>
   <h1 :style='[baseStyle,baseStyle1]'></h1>
   <h1 :style='getStylese()'></h1>
</div>

-------------------------------------------------------------------
14.计算属性 会缓存只会调用一次
const app = new Vue({
    el: "#app" 
    data: {
    	message:'abcdefg',
    	fistName:'lilei',
    	lastName:'han meimei'
    },
    computed:{  //计算属性 固定名称，不可乱起
    	fullName:function(){
    		return this.fistName + ' ' + this.lastName
    	}
    }
   methods:{
   	getFullName:function(){
   		return this.fistName + ' ' + this.lastName
   	}
   }
})
<div id='app'>
   <h1>{{getFullName()}}</h1>   //
   <h1>{{fullName}}</h1>  //计算属性不需要加小括号
</div>

----------------------------------------------------------------
15.计算属性的复杂操作
const app = new Vue({
    el: "#app" 
    data: {
    	books:[
    		{id:001,name:'数学',price:10},
    		{id:002,name:'语文',price:12},
    		{id:003,name:'英语',price:13}
    	]
    },
    computed:{
      	//高阶函数 filter/map/reduce
    	totalPrice:function(){
    		//return this.books.reduce()
    		let result=0
    		for(let i=0;i < this.books.lenhth;i++){
    			result += this.books[i].price
    		}
    		return result
    		//es6语法
    		//for(let i in this.books){
    		//	this.books[i]
    		//}
    		//for(let book of this.books){	
    		//}
    	}
    }
   
})
<div id='app'>
   <h1>计算价格：{{totalPrice}}</h1> 
</div>



-----------------------------------------------------------------
16.计算属性的setter和getter
const app = new Vue({
    el: "#app" 
    data: {
    	fistName:'lilei',
    	lastName:'han meimei'
    },
    computed:{  
    	//fullName:function(){
    	//	return this.fistName + ' ' + this.lastName
    	//}
    	//计算属性一般没有set方法，只读属性。
    	fullName:{
   	 	set:function(newValue){
   	 		const names = newValue.split(' ') //根据空了对字符串分割
   	 		this.fistName = names[0];
   	 		this.liatName = names[1]
   	 	},
   	 	get:function(){
   	 		return '123'
   	 	}
    }
   }
})
<div id='app'>
   <h1>{{getFullName()}}</h1>   //
   <h1>{{fullName}}</h1>  //计算属性不需要加小括号
</div>

--------------------------------------------------------------
17.ES6 补充
   1.let/var
   		let可以看做更完美的var
   块级作用域
   没有块级作用域引起的问题
   var fun;
   if(1){
   	var name='123'
   	
   }
   console.log(name)  //name 123
   ES5之前中的var没有块级作用域，ES6中的let有块级作用域
   const 将某个变量修改为常量，不可再次修改，可以修改对象内部的属性
   对象字面量的增强写法
   const name='aaa'
   const age='18'
   const obj={
   	name,
   	age,
   	run(){
   	}
   }
   
-------------------------------------------------------------------
18.事件监听 v-on的基本使用 绑定事件监听器
const app = new Vue({
    el: "#app" 
    data: {
    	counter:0
    },
    methods:{
    	increment(){
    		this.counter++
    	},
    	decrement(){
    		this.counter--
    	}
    }
   }
})
<div id='app'>
   <h1>{{counter}}</h1>  
   <button v-on:click="increment">+</button>
   <button v-on:click="decrement">-</button>
   <button @click="increment">+</button>  //语法糖 v-on 可简写成@
   <button @click="decrement">-</button>
</div>

-------------------
19.v-on的参数问题
const app = new Vue({
    el: "#app" 
    data: {
    	counter:0
    },
    methods:{
    	but2(name){  //event
    		console.log(name)
    	}，
    	but3(name,event){
    	}
    }
   }
})
<div id='app'>
   <button @click="but1">按钮一</button>  
   <button @click="but2(111)">按钮二</button>
   <button @click="but3('abc',$event)">按钮3</button> //$event 获取浏览器生成的对象作为参数
</div>

----------------------------------------------------------------
20. v-on 的修饰符        
const app = new Vue({
    el: "#app" 
    data: {
    	counter:0
    },
    methods:{
    	divClick(){  
    		console.log()
    	}，
    	but1(name,event){
    	},
    	subClick(){
    	},
    	keyUp(){
    	
    	}
    }
   }
})
<div id='app'>
   <div @click="divClick">
   	<button @click.stop="but1">按钮一</button>  //stop 阻止事件冒泡
   </div>
   <from action='baidu'>
   	<input type='submit' value='提交'  @click.prevent='subClick'/> //prevent  
   </from>
   <input type='text' @keyup.enter='keyUp'/> //监听 回车按键 
   <button @click.once="but1">按钮一</button> //只点击第一次有效
</div>

-----------------------------------------------------------------------
六、条件判断
1.v-if的基本使用
const app = new Vue({
    el: "#app" 
    data: {
    	msg:'你好',
    	isShow:true
    }
})
<div id='app'>
   <h1 v-if='isShow'>{{msg}}</h1>   
</div>
2.v-if和v-else的结合使用
const app = new Vue({
    el: "#app" 
    data: {
    	msg:'你好',
    	isShow:true
    }
})
<div id='app'>
   <h1 v-if='isShow'>{{msg}}</h1> 
   <h1 v-else>isShow为false时显示</h1>  
</div>
3.v-if和v-else-if和else的使用
const app = new Vue({
    el: "#app" 
    data: {
    	score:90
    }，
    computed:{
    	//条件很多的话建议用计算属性
    	let showMsg='';
    	if(this.score>=80){
    		showMsg='优秀'
    	}elseif(){
    	//.....
    	}else{
    	//....
    	}
    	return showMsg
    }
})
<div id='app'>
   <h1 v-if='score>=90'>优秀</h1> 
   <h1 v-else-if='score>=80'>良好</h1>
   <h1 v-else-if='score>=60'>及格</h1>
   <h1 v-else>不及格</h1>  
</div>
4.v-show 的用法
const app = new Vue({
    el: "#app" 
    data: {
    	msg:'你好',
    	isShow:true
    }
})
<div id='app'>
   <h1 v-if='isShow'>{{msg}}</h1>
   <h1 v-show='isShow'>{{msg}}</h1>   
</div>

---------------------------------------------------------
七、循环遍历
1.v-for遍历数组
const app = new Vue({
    el: "#app" 
    data: {
    	names:['a','b','c']
    }
})
<div id='app'>
<ul>
   <li v-for='item in names'>{{item}}</li>
   <li v-for='(item,index) in names'>{{index+1}}.{{item}}</li>
</ul>   
</div>
2.v-for遍历对象
const app = new Vue({
    el: "#app" 
    data: {
    	info:{
    		name:"zhangsan",
    		age:"13"
    	}
    }
})
<div id='app'>
<ul>
   <li v-for='item in names'>{{item}}</li>
   <li v-for='(value,key) in info'>{{value}}---{{key}}</li>
   <li v-for='(value,key,index) in info' key=''>{{value}}---{{key}}---{{index}}</li>
</ul>   
</div>
push 在数组后面添加元素
pop 删除数组中的最后一个元素
shift :删除数组中第一个元素
unshift ：在数组前面添加元素
splice: 在数组中间添加元素
sort : 排序
reverse :数据反转
VUE.set(要修改的对象，索引值，修改后的值)

过滤器
const app = new Vue({
    el: "#app" 
    data: {
    }，
    filters:{
    	guolv(value){
    	return '123'+ value+ '456'
   	}
	}
})
<div id='app'>
<ul>
   <li>{{item | guolv}}</li>
   
</ul>   
</div>

-------------------------------------------------
filter 的使用
const nums =[10,20,50,100,201,302]
//let newNums=[];
let newNums = nums.filter(function(n){
//return true
return n<100
})
map的使用
let new2Nums = newNums.map(function(n){
return n*2
})
reduce 的使用 对数组中的内容汇总 相加或相乘等
new2Nums .reduc(function(prevalue,n){
}，0）

------------------------------------------------------
v-model的基本使用 双向绑定
const app = new Vue({
    el: "#app" 
    data: {
    	info:{
    		name:"zhangsan",
    		age:"13"
    	}
    }
})
<div id='app'>
<ul>
   <input type='text'  v-model="name"/>
   <li>{{name}}</li>
</ul>   
</div>

修饰符 双向绑定时
v-model.lazy失去焦点在更新
v-model.number  定义数字类型
v-model. trim 删除空格

-------------------------------------------------
八、 Vue组件化思想
   1.组件构造器
   
<div id="app">
   <my-cpn></my-cpn>
   <my-cpn></my-cpn>
   <my-cpn></my-cpn>
   <my-cpn></my-cpn>
</div>
<script>
   //1.创建组件构造器对象
   const cnpC = Vue.extend({
       template: "<div> <h2>我是标题121212</h2> <p>123456</p> <p>123456</p></div>"
   });
   //2. 注册组件
   Vue.component('my-cpn', cnpC)
   const app = new Vue({
       el: "#app",
       data: {
           message: '你好',
       }
   })
</script>


-------------------------------------------------
2.全局组件和局部组件
<div id="app">
   <cpn></cpn>
</div>
<div id="app2">
   <cpn></cpn>
</div>
<script>
   //1.创建组件构造器对象
   const cnpC = Vue.extend({
       template: `
       <div>
           <h2>我是标题121212</h2>
           <p>123456</p>
           <p>123456</p>
      </div>`
   });
   //2. 注册组件(全局组件意味着可以在多个vue的实例下使用)
   Vue.component('cpn', cnpC) //全局组件
   const app = new Vue({
       el: "#app",
       data: {
           message: '你好',
       }
   })
   const app2 = new Vue({
       el: "#app2",
       data: {
           message: '你好',
       },
       components:{ //局部组件
           cpn:cnpC
       }
   })
</script>

---------------------------------------------------------------------------------
3.父组件和子组件
<div id="app">
   <cnp2></cnp2>
</div>
<script>
   //1.创建第一个组件
   const cnpC1 = Vue.extend({
       template: `
           <div>
               <h2>我是标题1</h2>
               <p>111111111</p>
               <p>11111111</p>
           </div>`
   });
   //第二个组件
   const cnpC2 = Vue.extend({
       template: `
           <div>
               <h2>我是标题2</h2>
               <p>222222</p>
               <p>333333</p>
               <cnp1></cnp1>
           </div>`,
       components:{
           cnp1:cnpC1
       }
   });

   const app = new Vue({
       el: "#app",
       data: {
           message: '你好',
       },
       components:{
           cnp2:cnpC2
       }
   })
</script>

---------------------------------------------------------------------------------
4.注册组件语法糖
<div id="app">
 <cpn1></cpn1>
 <cp2></cp2>
</div>
<script>
 //1.全局组件注册的语法糖
 //1.创建第一个组件
 // const cnpC1 = Vue.extend();
 Vue.component('cpn1',{ //全局组件语法糖
   template: `
      <div>
        <h2>我是标题1</h2>
        <p>111111111</p>
        <p>11111111</p>
      </div>
   `
 })
 const app = new Vue({
   el: "#app",
   data: {
     message: '你好',
   },
   components:{
     'cp2':{ //局部组件语法糖
       template: `
      <div>
        <h2>我是标题2</h2>
        <p>222</p>
        <p>222</p>
      </div>
   `
     }
   }
 })
</script>

------------------------------------------------------------
5.组件模板的分类写法 ，通过script 类型text/x-template
<script type="text/x-template" id="cpn">
 <div>
   <h2>123123</h2>
   <h2>222222</h2>
 </div>
</script>
<script>
 Vue.component('cpn1',{
   template:'#cpn'
 })
 const app = new Vue({
   el: "#app",
   data: {
     message: '你好',
   }
 })
</script>
或者 使用template标签 
<template id="cpn">
 <div>
   <h2>123123</h2>
   <h2>222222</h2>
 </div>
</template>
<script>
 Vue.component('cpn1',{
   template:'#cpn'
 })
 const app = new Vue({
   el: "#app",
   data: {
     message: '你好',
   }
 })
</script>

-------------------------------
6.子传父
<div id="app">
   <cpn @item-click='cpnClick'></cpn> <!--@itemClick事件监听-->
</div>
<template id="cpn">
 <div>
 <button v-for='item in categories' @click="btnClick(item)">{{item.name}}</button>
 </div>
</template>
<script>
// 子传父
 const cpn={
     template:'#cpn',
     data(){
   	  return{
   		  categories:[
   			{'id':'aaa',name:"热门推荐"},
   			{'id':'bbb',name:"手机数码"},
   			{'id':'ccc',name:"家用电器"},
   			{'id':'ddd',name:"电脑办公"}
   		  ]
   	  }
     },
     methods:{
   	  btnClick(item){
   		  //自定义事件 子传父
   		 this.$emit('item-click',item)  //发射出去事件
   	  }
     }
 }
 const app = new Vue({
   el: "#app",
   data: {
     message: '你好',
     movies:['海贼王','海尔','兄弟']
   },
   components:{
   	cpn
   },
   methods:{
   	cpnClick(item){
   		console.log(item)
   	}
   }
 })
</script>

wetch

7. 父子组件的访问方式
   父-》子 $children $refs
   一般使用 $refs

<div id="app">
	<cpn ref='aaa'></cpn> <!--@itemClick事件监听-->
	<button @click="msg">anniu </button>
</div>
<template id="cpn">
  <div>
  我是子组件
  </div>
</template>
<script>
// 子传父
  const cpn={
	  template:'#cpn',
	  data(){
		  return{
		  }
	  },
	  methods:{
		  btnClick(item){
			  //自定义事件 子传父
			 this.$emit('item-click',item)  //发射出去事件
		  }
	  }
  }
  const app = new Vue({
    el: "#app",
    data: {
      message: '你好',
    },
	components:{
		cpn:{
			template:"#cpn",
			data(){
				return{
					name:"我是子组件"
				}
			},
			methods:{
				showMessage(){
					console.log('showMessage')
				}
			}
		}
	},
	methods:{
		msg(){
			// this.$children[0].showMessage()
			// console.log(this.$children)
			console.log(this.$refs)
		}
	}
  })
</script>

子->父 $parent root 属性

访问根组件 root 直接访问vue实例