VUE学习笔记(二)

charming 7月前 ⋅ 190 阅读

组件

封装代码,可重用

注册组件语法

Vue.component(tagName, options) tagName为组件名称

全局组件

<div id="app">
    <ul>
        <my-li v-for="item in list" :message="item"></my-li>
    </ul>
</div>
	

	Vue.component("my-li",{
		props:['message'],
		template:'<li>{{message}}</li>'
		})
	new Vue({
		el:"#app",
		data:{
			list:["aa",'bb','cc']
			}
	})

局部组件

	<div id="app">
		<mycom></mycom>
	</div>
	
	
		var myComponent={
			template:'<h1>局部组件</h1>'
		}
		
		new Vue({
			el:"#app",
			components:{
				//mycom组件名 
				'mycom':myComponent
			}
		})

自定义指令

<div id="app">
		<p>页面加载时,自动获取焦点</p>
		<input type="text" v-focus />
</div>

	
		/* 注册全局自定义z指令 */
		Vue.directive('focus', {
			inserted: function(e) {
				e.focus()
			}
		})
		new Vue({
			el: "#app",
		})
	
    局部自定义
    <div id="app">
		<p>页面加载时,自动获取焦点</p>
		<input type="text" v-focus />
	</div>

	
		new Vue({
			el: "#app",
			directives: {
				focus: {
					inserted: function(e) {
						e.focus()
					}
				}
			}
		})

钩子函数

  • bind 指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
  • inserted 被绑定元素插入父节点时调用
  • update
  • componentUpdated
  • unbind

钩子函数参数

el: 指令所绑定的元素,可以用来直接操作 DOM binding: 一个对象,包含以下属性:

  • name: 指令名,不包括 v- 前缀。

  • value: 指令的绑定值

  • expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。

  • arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。

  • modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

  • vnode: Vue 编译生成的虚拟节点。

      <div id="app">
      	<p v-bgcolor="'green'">123</p>
      	<p v-bgtext="{ color: 'red', text: 'v-text' }"></p>
      </div>
    
      	/* 注册全局自定义z指令 */
      	Vue.directive('bgcolor',function(el,binding){
      		el.style.backgroundColor=binding.value
      	})
      	Vue.directive('bgtext',function(el,binding){
      		el.style.backgroundColor=binding.value.color;
      		el.innerHTML=binding.value.text
      	})
      	new Vue({
      		el: "#app",
      	})
    

全部评论: 0

    我有话说: