20190425记录

Vue## 标题
渐进式框架，采用自底向上的增量开发，Vue关注视图层

MVVM
	Model-View-ViewModel
	采用双向数据绑定，改变数据影响元素，反之亦然。
	
如何使用Vue：
	1、引入Vue的核心JS文件
	2、准备Dom结构
	3、实例化组件
		通过el属性，挂载元素，绑定id为app的html元素
		通过data属性，定义数据，可以在html代码段中显示的数据
	4、获取数据
		数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

<!—对应第2步、准备Dom结构–>

<!—对应第4步、双花括号取值–>
{{msg}}

	<script type="text/javascript">
		/*对应第3步、实例化组件*/
		var app = new Vue({
			el:"#app", // el：element的简写。挂载元素，绑定id为app的html元素
			data:{ // 定义数据，可以在html代码段中显示的数据
				msg:"Hello Vue！"
			}
		});
	</script>

注意：双花括号取值时，类似var a = 1的语句不会生效，流控制（if(){}else{}）也不会生效（但是可以使用三元表达式？：）。
文本渲染## 标题
指令 (Directives)
是带有 v- 前缀的特殊属性。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

	v-text:
		显示数据，响应式（默认）
		简写：{{}}
	v-once:
		数据只会更新一次，下次更新数据不影响dom
	v-html:
		可以显示html元素

{{msg}}

---

{{txt}}

---

{{tpl}}

data:{ msg:"Hello", txt:"Hello Vue", tpl:"

上海

" } v-bind v-bind指令可以绑定元素的属性，动态给属性赋值。 比如：v-bind:class、v-bind:style、v-bind:href形式。 v-bind的简写形式： v-bind:属性名="组件中定义的数据" 简化为 : :属性名="组件中定义的数据" 上边的形式可以改写成： :class、:style、:href

class绑定## 标题
绑定DOM对象的class样式有以下几种形式：
绑定多个class
使用对象classObject绑定
使用数组classList绑定
绑定的对象可以同时切换多个class

		对象和数组绑定的区别：
			对象可以控制class的添加和删除；数组不能控制删除
例子：

Vue

---

Vue

Vue

Vue

	data:{
			classObj:{
				red:true,
				green:false,
				item:true
			},
			classList:["red","item","test"]
		}

style绑定## 标题
绑定形式跟class一致：
使用内联对象Object
直接传入对象styleObject
使用数组对象styleList
例子：

我是文本

我是文本

我是文本

我是文本

data:{
styleObj:{
‘color’:‘red’,
‘font-size’:‘30px’,
‘font-family’:‘楷体’
},
styleObj2:{
‘background’:‘pink’
}
}
绑定事件## 标题
v-on
语法：
v-on:事件名
简写：
@事件名
方法事件处理器
一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。
需要在methods属性中定义方法，然后v-on引用对应相关的方法名。

例子：
<button @click=“addCount()”>add
<button @click=“downCount”>add
//绑定的是methods中定义的方法
el:"#app",
data:{
count:0
},
methods:{
addCount:function(){
this.count++;
},
downCount:function(){
this.count–;
}
}
下面这种方式能够获得事件对象
<button @click=“addCount($event)”>add
事件修饰符## 标题
在事件处理程序中调用 event.preventDefault()（阻止元素发生默认行为） 或 event.stopPropagation()（阻止事件冒泡到父元素） 是非常常见的需求。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
stop ： 阻止event冒泡，等效于event.stopPropagation()
prevent ： 阻止event默认事件，等效于event.preventDefault()
capture ： 事件在捕获阶段触发
self ： 自身元素触发，而不是子元素触发
once ： 事件只触发一次
例子：
<div @click=“father”>
<div @click=“child”>child

---

stop ： 阻止event冒泡

<div @click=“father”>
<div @click.stop=“child”>child

---

prevent ： 阻止event默认事件

<a href="http://www.baidu.com" @click.prevent="prevent1">百度</a>
<hr />

capture ： 事件在捕获阶段触发

<div @click.capture=“father”>
<div @click.capture=“child”>child

self ： 自身元素触发，而不是子元素触发

---

<div @click.self=“father”>
father
<div @click=“child”>child

---

once ： 事件只触发一次

<div @click.once=“child”>child
键值修饰符## 标题
在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
例子：

条件渲染## 标题
1、v-if
当条件返回true时，执行
2、v-else
当if条件不满足时，执行（要结合v-if一起使用）
3、v-else-if
当满足条件时执行（要结合v-if一起使用）
4、v-show
满足条件时显示，不满足隐藏

v-if 和 v-show
	两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。
	v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。
	一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。

成年啦

刚成年

小屁孩

<hr />
<h4 v-show="flag">你能看见我！</h4>

v-if：不满足条件的标签，根本不会存在于页面上
v-show：不满足条件的标签会被隐藏（display：none），在页面的代码里还是看得见的
列表渲染v-for
v-for 目测比较重要
可以把一组值进行列表渲染，语法形式： item in items，
items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
v-for也可以遍历对象，可以指定三个形参:
形式: v-for="(value, key, index) in object"
value: 对象的值
key: 对象的键
index: 遍历的索引
例子：

• {{item.name}}

• ---

  • {{type}}--{{index}}--{{item.name}}

  ---

  • {{index}}--{{key}}--{{value}}

  el:"#app",
  data:{
  	type:"水果",
  	items:[
            {name:'西瓜'},
            {name:'苹果'},
            {name:'菠萝'}
      ],
      person:{
             name:'Tim',
             age:12,
             love:'music'
             }
  }
  

  :key

• {{item.name}}
• //用id作为key {id:1,name:'西瓜'}, {id:2,name:'苹果'}, {id:3,name:'菠萝'} 表单校验## 标题

  el:"#root",
  data:{
  uname:"",
  msg:"",
  validClass:""
  },
  methods:{
  validTxt:function(){
  console.log(this.uname);
  // 判断用户名的长度是否大于等于6
  if (this.uname.length >= 6) {
  this.msg=“验证成功”
  this.validClass = “success”;
  } else {
  this.msg=“验证失败”
  this.validClass = “error”;
  }
  }
  }
  表单输入绑定## 标题
  v-model
  用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
  v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。

  单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组。

  例子：

  	<input type="text" v-model="txtMsg" placeholder="请输入用户名..." />
  	文本值：{{txtMsg}}
  

   选中状态：{{ck}}
  
  
  HTML5
  JavaScript
  Vue
  

  多选结果：{{lesson}}

  喜欢
  不喜欢
  都喜欢
  

  是否喜欢: {{love}}

  <select v-model="selected">
  	<option>西瓜</option>
  	<option>苹果</option>
  	<option>菠萝</option>
  

  结果: {{selected}}

  el:"#root",
  data:{
  txtMsg:"",
  ck:"",
  lesson:[],
  love:"",
  selected:""
  }
  修饰符## 标题
  使用v-model绑定数据后，可以使用修饰进行数据处理：
  .lazy：绑定数据默认实时更新，lazy可以在onChange触发
  .number：返回数字类型的值，转换不成返回NaN
  .trim：去除数据的前后空格
  例子：

  定义组件（Component）## 标题
  组件
  组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
  1、定义组件
  Vue自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前Vue实例使用。
  1）全局注册
  使用Vue.component(tagName, options)来定义：
  2）局部注册
  在Vue实例中使用components属性来定义：

  	注意：HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。
  	即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用<my-component>进行引用。
  

  		<inner-hello></inner-hello>
  	</div>
  	/*定义全局组件：需要在new Vue之前定义*/
  	Vue.component("my-hello",{
  		template:"<h3>Hello Vue</h3>"
  	});
  	
  	new Vue({
  		el:"#app"
  	});
  	new Vue({
  		el:"#root",
  		components:{
  			"inner-hello":{
  				template:"<h3>我是局部组件</h3>"
  			}
  		}
  	});
  

  is属性## 标题
  在table标签中直接使用自定义组件，无法正常显示。DOM解析时会解析到

  标签的外部：
  原因是：table/ol/ul/select 这种html标签有特殊的结构要求,不能直接使用自定义标签。他们有自己的默认嵌套规则，比如:
  table> tr> [th, td];
  ol/ul > li;
  select > option
  例子：
  模板（组件的html结构比较复杂时使用）## 标题 当组件html结构比较复杂时，直接在template属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式: 1)直接使用字符串定义 2)使用