七天学完Vue之第一天学习笔记（Vue的介绍，时间修饰符以及常用指令）

1.1. 第一天 vue介绍 时间修饰符以及常用指令

1.1.1. 什么是vue

• Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架(React除了开发网站，还可以开
  发手机App，Vue语法 也是可以用于进行手机App开发的，需要借助于Weex)
• Vue.js 是前端的主流框架之- -,和Angular.js、React.js一起，并成为前端三大主流框架!
• Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项
  目整合。(Vue有 配套的第三方类库，可以整合起来做大型项目的开发)
  +前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道;
  1.1.2. 为什么要学习流行框架
  +企业为了提高开发效率:在企业中，时间就是效率，效率就是金钱;
  +提高开发效率的发展历程:原生JS -> Jquery之类的类库 ->前端模板引擎-> Angular.js /Vue.js
  +在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑;
  1.2. 一些方法
  1.2.1. push——unshift
  1、push()和unshift()
  向数组的 尾部/头部 添加若干元素，并返回 数组的 新长度；

2、pop()和shift()
从数组的 尾部/头部 删除1个元素(删且只删除1个)，并返回 被删除的元素；空数组是继续删除，不报错，但返回undefined；

添加方法 push
this.list.push({id: this.id, name:this.name});
1.3. 第一天内容
1.3.1. el， data， methods
el : 选择操作的范围

data ： 渲染标签或者内容（el需要用到的数据）

methods ：定义当前vue可用的方法
1.3.2. 事件修饰符
1.3.3. 指令
• v-cloak，v-text，v-html的使用
v-cloak : 插值只会替换自己的占位符，其他内容不会清空
v-text : 会覆盖原本的内容
v-html : 渲染标签（也会覆盖原来的内容）

<div id="app">
			<p v-cloak>+++++++++++++++{{a}}+++++++++++++++++</p>
			<h1 v-text="b">111111111111</h1>
			<div v-html="c">
			</div>
</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					a: '123',
					b: '456',
					c: '<h1>贾真琦</h1>'
				}
			})
		</script>

• v-on
v-on可以绑定click等鼠标事件或者键盘按键事件keyup等（简化写法@）
• v-bind
v-bind:用于绑定属性的指令 （简写为 :），在v-bind中可以写合法的js表达式

<input type="button" name="1" value="tt" v-bind:title="tt+2" />
<script>
			var vm = new Vue({
				el: '#app',
				data: {
					tt: '我是一个按钮'
				}
			})
		</script>

• v-model
v-bind指令只可以实现单项绑定。

v-model可以实现双向绑定 (可以实现表单元素和model中的双向数据绑定)
此指令只能运用在表单元素中
• 使用class
1.数组

<h1 :class="['ned', 'thin' ]">这是一个邪恶的0</h1>

2.数组中使用三元表达式

<h1 :class="['red', 'thin', isactive? ‘active' :’ ']">这是一个邪恶的H1</h1>

3.数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

4.直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的1</h1>

示例：

		<!-- 第一种方法 直接传递一个数组 -->
		<!-- <h1 v-bind:class="['size', 'color', 'thin']">这是一个超级大的篮球boy写下的一句话</h1> -->
		
		
		<!-- 第二种方法 使用三元表达式 -->
		<!-- <h1 v-bind:class="['size', flag?'color':'', 'thin']">这是一个超级大的篮球boy写下的一句话</h1> -->
		
		
		<!-- 第三种方法 使用对象代替三元表达式 -->
		<!-- <h1 v-bind:class="[{'size':false}, 'color', 'thin']">这是一个超级大的篮球boy写下的一句话</h1> -->
		
		<!-- 第四种方法 使用 v-bind 来绑定对象，对象的属性是类名，可以带引号，也可以不带引号 -->
		<!-- <h1 :class="{thin:true, color:true, size:true}">这是一个超级大的篮球boy写下的一句话</h1>-->
		
		<!-- 第四种方法的进阶 -->
		<h1 :class="class1">这是一个超级大的篮球boy写下的一句话</h1>
	</div>
	
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				flag: true,
				class1: {thin:true, color:true, size:true}
			},
			methods:{
				
			}
		})
	</script>
</body>

• v-for (组件加绑定key)
1.迭代对象中的属性
<I–循环遍历对象身上的属性–>

<div v-for="(val, key, 1) in userInfo">{{val}} --- {{key}} --- {}}</div>

2.迭代数字

<p v-for"i in 10°">这是第(}})个P标签</p>

|22.0+ 的版本里,当在组件中使用vfor时, key现在是必须的。
+
当Vue,js用v-for正在更新已渲染过的元表列表时,它默认用“就地复用” 策略。 如果数据项的顺序被改变,
Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素,并且确保它在特定索引下显示
已被渲染过的每个元素。
为了给Vue -个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元表,你需要为每项提供一个
唯一key属性。

例子：

<p v-for="item in list" :key="item.id">
	<input type="checkbox"/>
	id：{{item.id}}---name:{{item.name}}
</p>

• v-if 与 v-show

<!-- v-if 的特点:每次都会重新删除或创建元素-->
<!-- v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none 样式-->
<!-- v-if有较高的切换性能消耗  （理解为初始false不渲染）-->
<!-- v-show 有较高的初始演染消耗-->
<!--如果元素涉及到频繁的切换，最好不要使用v-if, 而是推荐使用v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if-->

1.4. this的指向问题
（）=> 相当于里面的函数与外面的函数的this一样

lang() {
						var _this = this
						setInterval(function(){
							var start = _this.text.substring(0, 1);
							var end = _this.text.substring(1);
							_this.text = end+start;
						}, 400)
					}



					
lang() {
						setInterval(()=>{
							var start = this.text.substring(0, 1);
							var end = this.text.substring(1);
							this.text = end+start;
						}, 400)
					}

谢谢观看~