[Vue.JS]:学习记录

1.关键字：

methods：功能方法定义。

{{        }}：单向绑定，常用于显示动态数据，更改内容数据不改变。

v-text，v-html，v-bind，v-once

v-model：双向绑定，常用于显示动态数据，更改内容数据会改变，会忽略所有表单元素的 value、checked、selected 特性的初  始值而总是将 Vue 实例的数据作为数据来源。

v-for=“x in xx”：循环，xx为循环体，x为xx被循环的单体。

v-if/v-else：判断条件，和v-show的区别：v-show只是操作了css的display属性进行隐藏而if是直接不渲染元素。

v-on:xxxx(行为事件)：用于绑定行为事件，例如点击事件v-on:click=“click”

methods : {
    click : function(){
        xxxx;
    }
}

2.自定义指令：

   总结：bind:function一般用于css吧!?not sure。。。inserted:function一般用于js吧。。。

   全局指令：

Vue.directive("focus",{
    insterd : function(el,binding){
        xxxx;
    },
    bind : function(el){
        xxxx;
    }
})

  局部指令：

directives : {
    focus: {
    inserted: function (el,binding) {
      xxxx;
    },
    bind : function(el){
        xxxx;
    }
  }
}

 3.组件

 模板名字推荐使用a-b的方式而不是驼峰，因为引用组件的时候只能使用a-b，保持一致比较好。

 组件中的data属性与普通Vue实例中的data属性有所不同，组件中的data属性是一个function并且用return返回数据，同时数据类   型为key : value.

 子组件定义在父组件的components对象里，定义的子组件的方式和一般组件的相同。

const componentB = {
					template : `
						<div>
							{{ name }} 
							<component-child></component-child>
						</div>
					`,
					components:{
						"component-child" : componentChild 
					}
};

 template中的html模板只能放在一个root(div)里面否则会报错.

整合练习代码：

截止2019年10月19日10:31:47，基础练习。

	<div id="demo">
  		<input type="text" value="1" v-model="price">
  		<button v-on:click="addPrice">click +1</button>
  		<br>
  		<h3 v-if="seen">nihao</h3>
  		<h3 v-else>nihao else</h3>
  		<ul v-for="item in list">
  			<li>{{ item.name }}</li>
  			<li>{{ item.old }}</li>
  		</ul>
	</div>

	<script>
		new Vue({
			  el: "#demo",
			  data: {
			    message : "Hello Vue!",
			    price : 10,
			    seen : true,
			    list : [
			    	{"name":"min","old":"22"},
			    	{"name":"dmz","old":"23"}
			    ]
			  },
			  methods: {
			  	addPrice: function(){
			  		console.log("add");
			  		this.price ++;
			  	}
			  }
			});
	</script>

截止2019年10月21日17:28:37，自定义指令练习。

    <div id="demo">
		<p v-upper-case="messageG">{{messageG}}</p>
		<input type="text" v-focus v-red placeholder="edit this">
	</div>

	<script type="text/javascript">
		Vue.directive("upper-case",{
			inserted : function(el,binding){
				el.innerHTML = binding.value.toUpperCase();
			}
		});
		new Vue({
			el : "#demo",
			data : {
				message : "oh my god!!",
				messageG : "hello wordld!!"
			},
			directives : {
				"focus" : {
					inserted : function(el){
						el.focus();
					}
				},
				"red" : {
					bind : function(el){
						el.style.color = "red";
					}
				}
			}
		});
	</script>

 截止2019年10月25日11:45:09 组件练习

    <div id="demo">
		<component-a></component-a>
		<component-b></component-b>
	</div>

	<script type="text/javascript">
		Vue.component("component-a",{
			template : "<div>{{ name }}</div>",
			data: function(){                 
				return {                    
					name: "全局组件"               
				}            
			}
		}),
		
		new Vue({
			el : "#demo",
			data : {
				message : "oh my god!!",
				messageG : "hello wordld!!"
			},
			components:{
				"component-b" : {
					template : "<div>{{ name }}</div>",
					data : function(){
						return {
							name : "局部组件"
						}
					}
				}
			}
		});
	</script>