vue基本指令

what

jq是js框架
用起来方便。兼容性问题 。 代码简化
vue框架
用起来方便 是真方便

vue 将减少开发者在dom操作的精力(都不用管dom操作了，通过指令将元素和数据关联到一起)
将精力转移到数据操作
数据变页面变

实例

	new Vue({
	  el:'#app',//挂载
	  data:{},//存放数据
	  methods:{},//方法
	  computed:{},//计算属性
	  filter:{},//过滤器
	})

指令

内置指令 v- 开头
自定义指令
条件渲染 v-if v-else v-else-if
列表渲染 v-for
事件处理 v-on：eventname click dblclick …
组件
过滤器
计算属性
监听
axios

router
vuex
vue-cli
vue全家桶 vue-cli（脚手架工具） vuex（状态管理） axios（数据请求）router（路由）

vue内置指令

v-if 条件渲染

	<div id='app'>
		<p v-if='show'>我在这 if</p>
	    <p v-show='show'> 我在这  show</p>
	</div>

	let vm=new Vue({
		el:'#app',
		data:{
			show:false
		}
	})
	
		// v-if 条件渲染 根据参数的真假 来控制元素是否渲染 操作的是元素节点的增删  不经常切换
	    // v-show 根据参数的真假 来控制元素是否显示 控制display：none|block 使用于频繁切换显示隐藏 

v-for 用于遍历数组和对象

数组

	<div id='app'>
		<ul>
			<li v-for='(item,index) in list'>{{item}}--{{index}}</li>
		</ul>
	</div>

	let vm=new Vue({
		el:'#app',
		data:{
	      list:['爱情','动漫','恐怖','科幻']
		}
	})
	// v-for 列表渲染  绑定一个数据（数组或者对象）到元素上
	// 会根据数据循环创建元素
	// item 数组里的每一项  index 下标

对象

	<div id='app'>
		<ul>
			<li v-for="(val,key,index) in obj">{{key}}:{{val}}---{{index}}</li>
		</ul>
	</div>

	let vm=new Vue({
		el:'#app',
		data:{
	      obj:{name:'wangyi',age:16,sex:1,pass:456}
		}
	})
	//  遍历一个对象  val  值  key：键  index 下标
	//  关键字 in of 都可以

v-on 绑定事件 v-on:等同于@

	<div id='app'>
		<button v-on:click="test">点我</button>
	 	{{show}}
	 	<div v-show='show'>显示隐藏</div>
	</div>

	let vm=new Vue({
		el:'#app',
		data:{
	      show:false
		},
		methods:{
			// test:function(){
			// 	alert(111)
			// }
			// test:()=>{
			// 	alert(111)
			// }
			test(){
				this.show=!this.show
			}
		}
	})

v-bind 绑定属性 v-bind:等同于 :

	div{
	      width: 200px;
	      height: 100px;
	   }
	   .red{
	      background: red;
	   }
	   .green{
	      background: lightgreen;
	   }

	<div id='app'>
		  <div v-bind:class='state?"red":"green"'>
		     
		  </div>
		  <button @click="toggle">toggle</button>
	</div>

	let vm=new Vue({
		el:'#app',
		data:{
	      list:[1,2,3,4,5,6,7],
	      state:false
		},
		methods:{
	      toggle(){
	         this.state=!this.state
	      }
	 	}
	})
	// v-bind 绑定一个属性  这个属性的值就可以用data里的变量来表示

事件修饰符

阻止冒泡

	<div id="content">
	   <div @click.self="c1">
	   	这里是yy
	   	<div @click="c2">
	   		这里bb
	   		<div @click.stop="c3">
	   			这是son
	   		</div>
	   	</div>
	   </div>
	 </div>

	 let vm=new Vue({
		el:'#content',
		data:{
	
		},
		methods:{
		   c1(){
		   	console.log('点到爷爷')
		   },
		   c2(){
		   	console.log('点到爸爸')
		   },
		   c3(){
		   	console.log('点到son')
		   }
		}
	})

阻止浏览器的默认行为

	<div id="content">
	 	<form v-on:submit.prevent="onSubmit">
	 		<input type="text">
	 		<input type="text">
	 		<button>add</button>
	 	</form>
	 </div>

	let vm=new Vue({
		el:'#content',
		data:{
	
		},
		methods:{
			onSubmit(){
				console.log(111)
			}
		}
	})

键盘事件快捷键

	<div id="content">
	    <!-- <input type="text" v-on:keyup.37='enter'> -->
	     <!-- <input type="text" v-on:keyup.enter='enter'> -->
	      <!-- <input type="text" v-on:keyup.left='enter'> -->
	      <input type="text" v-on:keyup.haha='enter'> 
	 </div>

	Vue.config.keyCodes.enter = 13
	let vm=new Vue({
		el:'#content',
		data:{
		
		},
		methods:{
		   enter(){
		   	console.log(111)
		   }
		}
	})

vue实例的配置项

• el
• data
• methods
• computed
• filters
• components

组件

组件的创建与注册

	<div id='app'>
		<hehe></hehe>
	</div>

	// 第一种方法 先创建 再注册
 	// 组件就是vue的一个拓展实例
 	let component=Vue.extend({
 	 	template:'<h1>假装我是一个非常复杂的banner图</h1>'// 模板  这个组件的html元素
 	 })
    //注册组件
     Vue.component('hehe',component)
	   
	//  第二种方法 
	Vue.component("hehe",Vue.extend({
   	 	template:'<h1>假装我是一个非常复杂的banner图</h1>'// 模板  这个组件的html元素
   	 }))
	// 第三种方法 最简版 创建+注册
   Vue.component('hehe',{
 		template:'<h1>假装我是一个非常复杂的banner图</h1>'// 模板  这个组件的html元素
 	})
 	new Vue({
 		el:'#app',
 		data:{
 			test:11
 		}
 	})
 	// 创建组件 
	// 注册组件  全局组件和局部组件
	// 将组件作为标签使用

全局组件

	<div id='app'>
		//使用
		<hehe></hehe>
	</div>
	<hr>
	<div id='app1'>
		//使用
		<hehe></hehe>
	</div>

	//全局组件缩写 创建+注册
    Vue.component('hehe',{
 		template:'<h1>假装我是一个非常复杂的banner图</h1>'// 模板  这个组件的html元素
 	})
 	new Vue({
 		el:'#app',
 		data:{
 			test:11
 		}

 	})
	new Vue({
 		el:'#app1',
 		data:{
 			test:11
 		}
 	})

组件内的配置项

• data

	<div id='app'>
		<hehe></hehe>
	</div>

 	// 组件就是vue的一个拓展实例
 	let component=Vue.extend({
 		template:'<h1>你好{{name}},我是李雷</h1>',// 模板  这个组件的html元素
 		data(){
 			return {
 				name:'韩梅梅'
 			}
 		}
 	})
    //注册全局组件
    Vue.component('hehe',component);
 	new Vue({
 		el:'#app',
 		data:{
 			test:11
 		}

 	})
 	// 组件内部的数据  可以绑定到组件内部的模板
	  // 组件的data数据格式不是对象而是一个函数，在函数的内部返回对象 让每一个组件都有自己单独的作用域

• methods
• filters
• computed
• watch
• components 注册组件名时含有大写字母 使用时用-连接 大写改成小写
• template 必须有根节点

使用vue

1.创建数据信息 数据源 数据
2.将元素和数据进行关联 通过指令
3.根据需求修改数据， 数据变页面