vue1-day1

概述

什么是vue

vue是目前最火的一个前端框架，react是最流行的一个前端框架（react除了开发网站，还可以开发手机app，vue语法也是可以进行手机app开发，需要借助weex）
vue是前端的主流框架之一，和react、angular一起，称为前端三大主流框架
vue 是一套构建用户界面的框架，指关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（vue由配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责为MVC中的V层，主要就是和界面打交道，来制作前端页面效果

为什么学习流行框架

企业为了提高开发效率，企业中使用框架能够提高开发效率
提高开发效率的过程：原生js->jQuery之类的类库->前端模块引擎->angular.js/Vue.js（帮助我们减少不必要的DOM操作；提高渲染效率，双向数据绑定的概念（通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的））
在vue中，一个核心的概念就是让用户不再操作DOM元素

框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性比较大，项目需要更换框架，则需要重新架构整个项目。
- node中的express
库（插件）：提供一个某一个小功能，对项目的侵入性比较小，如果某个库无法完成某些需求，可以很容易切换到其他库需求。
- 1.从jquery切换到zepto
- 2.从EJS切换到art-template

node（后端）中的mvc和前端中的mvvm之间的区别

mvc是后端的分层开发概念（view前端->app.js项目入口模块->router.js路由部分->controller业务逻辑处理层->model层只负责操作数据库；controller层包括router.js和controller两个部分）
mvvm是前端视图层的概念，前端图层分层开发思想，主要把每个页面分成了M,V,VM。其重VM是MVVM思想的核心，因为VM是M和V之间的调度者。这三个部分都是在view视图层里面的。M指的是每个页面中单独的数据，V是每个页面中的HTML结构，VM它是一个调度者，分割了M和V；每当v层想要获取后保存数据的适合，都要由vm做中间的处理。这么做的好处：前端页面中采用mvvm的思想，主要是为了让我们开发更加方便，因为mvvm提供了数据的双向绑定；注意：数据的双向绑定是由vm提供的。mvvm主要关注于视图分离层，也就是说，mvvm把前端的视图层，分为了三部分，model，view，vm viewmodel

vue基本代码和mvvm之间的对应关系

步骤：1、导入vue的包；2、创建一个vue实例，当我们导入包以后，在浏览器的内存中，就多了一个vue构造函数

//在头部要先引入vue的包，后续的才有用
<body>

//vue实例所控制的这个元素区域，就是我们的V
<div id="app">  //将来new的Vue实例，会控制这个元素中 的所有内容
<p>{{ msg }}</p>
</div>    

<script>

//注意：我们new出来的vm对象，就是我们mvvm中的vm调度者
var vm = new Vue({
	el: '#app', //表示当前我们new的这个实例，要控制页面上的哪个区域

	//这里的data就是mvvm中的m，专门用来保存每个每个页面的数据
	data:{  //data属性中，存放的是el元素中要用到的数据,是一个data对象
       msg:'welcom vue' //通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了。前端的vue之类的框架不提倡我们取手动操作DOM元素
	}

	})
</script>

v-cloak、v-text、v-html

直接用插值表达式的时候，如果网速有点慢，就会先显示然后再显示出msg的值，解决办法就是可以再插值表达式的标签里面添加v-cloack

<body>

<div id="app">
<p>{{ msg }}</p>//网速较慢的情况下会直接显示插值表达式
</div>

<script>
var vm = new Vue({
	el:'#app',
	data:{
		msg:'123'
	}
	})

解决办法1：

使用v-cloack能够解决插值表达式闪烁问题

<head>
<style>
[v-cloack]{
	display:none;//这是让网络比较慢的时候显示为none
}
</style>
</head>

<body>

<div id="app">
<p v-cloack>{{ msg }}</p>
</div>

<script>
var vm = new Vue({
	el:'#app',
	data:{
		msg:'123'
	}
	})

解决办法2：

v-text也可以解决插值闪烁问题

<body>

<div id="app">
<p v-text="msg"></p>
</div>

<script>
var vm = new Vue({
	el:'#app',
	data:{
		msg:'123'
	}
	})

v-cloack和v-text的区别

1、v-cloak如果没有写style样式中的display的话，也是会有闪烁问题。而v-text默认没有闪烁问题
2、v-text会覆盖元素中原本的内容，但是v-cloak插值表达式只会替换自己的占位符，不会把整个元素的内容清空

v-html

v-html是把data中的插值解释为html元素，也会覆盖元素中原本的内容

<body>

<div id="app">
<p v-html="msg"></p>
</div>

<script>
var vm = new Vue({
	el:'#app',
	data:{
		msg:'<h1>llllllll</h1>'
	}
	})

v-bind

v-bind是vue中提供用于绑定属性的一个指令
v-bind会把后面的属性绑定当作是一个变量，以js语句来解析，如果想要自己再添加什么东西，就往里面添加字符串就可以了，所以会把v-bind冒号里面的东西当作解析式来解析，然后把解析的结果来进行渲染

<body>

<div id="app">
//mytitle是一个变量，如果直接写上去的话，会把它当作是一个直接的值从而显示在按钮上，如果想要告诉title这是一个变量的话，需要用v-bind来绑定title的值，mytitle是一个属性，所以这样的话解析title的时候就会去查找mytitle这个变量所代表的值
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
</div>

<script>
var vm = new Vue({
	el:'#app',
	data:{
		mytitle:'这是一个我自己定义的title'
	}
	})

简写：
v-bind可以被简写为一个英文的:，v-bind中可以写合法的js表达式

1	<input type="button" value="按钮" :title="mytitle + '123'">

v-on

v-on是用来绑定事件的，

<body>

<div id="app">
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
</div>

<script>
var vm = new Vue({
	el:'#app',
	data:{
		mytitle:'这是一个我自己定义的title'
	},
	methods:{//这个methods对象中定义了当前vue实例所有可用的方法
		show:function(){
			alert('hello')
		}
	}
	})

1	<input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="show">

简写：

1	<input type="button" value="按钮" v-bind:title="mytitle + '123'" @click="show">

注意：在vm实例中，如果想要获取打他上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问，这里的this，就表示我们new出来的vm实例对象。

vm实例，会监听自己身上data中所有数据的改变，只要数据以发生变化，就会自动把最新的数据，从data上同步到页面上去；好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面

箭头函数，this的指向永远跟外部的指向一致

事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

.self和.stop的区别：self并不能当作stop来使用，stop是可以阻止全部的冒泡行为，但是self只能阻止自己本身的冒泡行为，如果在该元素上级的上级还有父元素，则不能阻止该元素的父元素进行冒泡行为。但是stop会全部阻止冒泡行为。self只会阻止自己身上的冒泡行为，并不会阻止真正的冒泡行为

v-model 和双向数据绑定

使用该指令，可以实现表单元素和model中数据的双向绑定，v-model只能运用在表单元素中，select、input（radio、text、address、email）、checkbox、textarea

1	<input type="button" value="按钮" v-model="msg">

class类样式

1、数组

:class

1 2	2、数组中使用三元表达式 ```<h1 :class="['red','thin',isactive?'active':'']">这是一个邪恶的h1</h1>

3、数组中嵌套对象

:class

1 2	4、直接使用对象 ```<h1 :class="{red:true,italic:true,active:true,thin:true}">这是一个邪恶的h1</h1>

在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，属性的值是一个标识符.但是如果是复合属性名字，则必须要加引号，改成驼峰属性名称就可以不加引号

为元素绑定style行内样式

1、直接在元素上通过：style形式，书写样式对象
<h1 :style="{color:'red','font-size':'40px'}">这是一个善良的h1</h1>
2、姜堰市对象，定义到打他中，并直接引用到：style中

在data中定义样式

1
2
3

data:{
	h1styleobj:{color:'red','font-size':'40px','font-weight':'200'}
}

在元素中，通过属性绑定的形式，将央视对象应用到元素中：
1
<h1 :style="h1styleobj">这是一个善良的h1</h1>
3、在：style中通过数组，引用多个data上的样式对象

在data上定义样式

data：{
	hh1styleobj:{color:'red','font-size':'40px','font-weight':'200'},
	h1styleobj2:{fontStyle:'italic'}
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中
1
<h1 :style="[h1styleobj,h1styleobj2]">这是一个善良的h1</h1>

v-for指令四种使用方法和key属性

1、迭代数组

1
2
3

<ul>
 <li v-for="(item,i) in list">索引：{{i}}----姓名：{{item.name}}---年龄：{{item.age}}</li>
 <ul>

2、迭代对象中的属性

1 2	<!--循环遍历对象身上的属性--> <div v-for="(val,key,i) in userInfo">{{val}}---{{key}}---{{i}}</div>

3、迭代数字

1	<p v-for="i in 10">这是第{{i}}个p标签</p>

注意：在遍历对象身上的键值对的时候，除了有val key，在第三个位置还有一个索引

v-for的使用事项

注意:2.2.0+的版本里，挡在组件中使用v-for时，key现在时必须的。当vue用v-for正在更新已渲染的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保他在特定索引下显示已被渲染过的每个元素。

为了给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key属性。

注意：1、v-for循环的时候，key属性只能能使用number或者string
2、key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值

在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时指定唯一的字符串/数字类型作为key值来进行绑定。进行绑定以后，每一个单选项会跟自己的各个选项一起绑定成为一个主体，循环的时候，是全部一起来进行循环，不会只是他们分开来进行循环，从而有一些选项会落下。

v-if和v-show

1	一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。

如果一个元素从来都没有显示过或者说它可能会永远不会显示出来，也就是它的条件变化不是特别大，这个时候就使用v-if比较好，因为v-show有较高的渲染消耗。

对比

v-if的特点：每次都会重新删除或者创建元素
v-show特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display：none样式

总结

1、mvc和mvvm的区别
2、学习了vue中最基本代码的结构
3、插值表达式 v-cloak、v-text、v-html、v-bind（：）、v-on（@）、v-model、v-for、v-if、v-show
4、时间修饰符 .stop .prevent .capture .self .once
5、el：指定要控制的区域、data：是个对象，制定了控制区域内要用到的数据、methods：虽然带个s后缀，但是是个对象，这里可以自定义了一些好用的方法
6、在vm实例中，如果要访问data上的数据或者要访问methods中的方法，必须要带this
7、在v-for中要会使用key属性（只接受string/number类型）
8、v-model只能用于表单元素
9、在vue中绑定央视的两种方式：v-bind：class（class类样式）、v-bind：style（行样式）