vue基础 1.vue-介绍
Vue.js (view)是一套构建用户界面的前端框架技术（渐进式框架）。
内部集成了许多基础技术，例如html、css、javascript、ajax、node等，
当然还有vue本身高级技术体现，例如组件、过滤器、指令、路由、webpack等等.
2012年由中国人尤雨溪开发，正式发布于2014年2月 ，2016年3月加入阿里巴巴公司(该事件助推了vue的发展)
jquery与vue的区别：
jquery：库 侵入性弱 (工具 库)，项目 对其进行 安装卸载 非常方便
vue：框架 侵入性强 (框架)，项目 从内到外 都是vue，不可以随便拆卸
Vue只关注视图（页面）层的开发，文档非常丰富、易于上手，流行度高，拥抱经典的web技术、早期灵感来源于angular
vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点
支持所有兼容ECMAScript 5的浏览器，IE9以上，Vue.js 不支持 IE8 及其以下版本
vue是前端的主流框架之一，和Angular、React 一起，并成为前端三大主流框架！
2.MVVM设计模式
m: model 数据部分 data
v：view 视图部分 div容器
vm： view & model 视图和数据 的 结合体
3.vue基本使用
<div id="app">
{{ city }}--------{{ weather }}
</div>
<script src="./vue.js"></script>
<script>
// 3. 实例化Vue对象
var vm = new Vue({
// el:'选择器' ,// el固定名称，理解为element，使得 Vue实例 与 标签容器 联系
el:'#app',
// data固定名称，给 Vue实例 声明数据，用于使用
data:{
city:'北京',
weather:'sunshine'
}
})
</script>
4.插值表达式{{}}
<标签> {{ 表达式 }} </标签>
表达式：变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等
如果{{}}使用中有冲突，想更换为其他标记，可以这样：
var vm = new Vue({
//delimiters:['${'，'}$'], // 标记符号变为${ }$
delimiters:['#{','}#'], // 标记符号变为#{ }#
})
插值表达式只能用在html标签的内容区域；不能用在其他地方
插值表达式使用时，页面加载时出现会闪烁问题
解决方法：v-cloak
<style type="text/css">
/* 通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏*/
[v-cloak]{
/* 元素隐藏 */
display: none;
}
<div id="app">
<div v-cloak >{{msg}}</div>
</div>
5.v-text
v-text与{{}}的作用是一样的，都是操控标签的内容区域信息
<标签 v-text="表达式"> </标签>
v-text 是通过标签的属性形式呈现
如果 标签 内容区域 有默认信息，则会被v-text覆盖掉
v-text 可以进行 变量、常量、算术符号、比较符号、逻辑符号、三元运算符号等运算
6.v-html
v-html 与 v-text、{{ }} 的作用一样，都是操控 标签的内容区域
<标签 v-html="表达式"> </标签>
v-html、v-text、{{ }}的异同：
v-html对 html标签 和 普通文本 内容都可以设置显示v-text、{{ }} 只针对 字符串 起作用，如果数据中有html标签，那么标签的箭头符号要做字符实体转换，进而使得浏览器上直接"显示箭头"等标签内容，等同于不解析html标签内容 v-html和v-text没有加载闪烁问题它们都可以进行 变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用
应用场景
如果服务器返回的数据中，包含有HTML标签(例如富文本编辑器内容)，可以使用 v-html 来渲染,(v-text和 {{}}都不行)
默认内容
<p>{{score}}默认内容</p>
<p v-text="score">默认内容</p>
<p v-html="score">默认内容</p>
以上三者，v-text和v-html标签有默认内容，但是都会被覆盖掉，而 插值表达式 不会覆盖
注意：
v-html尽量避免使用(除非完全掌控)，否则会带来危险(XSS攻击 跨站脚本攻击)标签的默认内容会被v-html覆盖 7.属性绑定v-bind(冒号:) 7.1属性绑定-基本使用
使用 v-bind指令 对标签属性进行绑定
<标签 v-bind:属性名称="表达式" ></标签>
<标签 :属性名称="表达式"></标签>
如果有需要，绑定的内容可以进行 变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用
通过v-bind对img标签的src、width、height属性进行绑定
<div id="app">
<p>
<img v-bind:src="mysrc" alt="" :width="wh" :height="ht" />
</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
mysrc:'./laofu.jpg',
wh:280,
ht:190
}
})
</script>
7.2属性绑定-class属性
使用 v-bind 对标签的class属性进行绑定
class属性较比其他属性不一样的地方是，其既可以接收一个值，也可以通过空格分隔接收多个值
<tag class="apple"></tag>
<tag class="apple pear orange"></tag>
class属性绑定的语法:
1) 对象方式
<tag :class="{xx:true, xx:false}"></tag>
2) 数组方式
<tag :class="['xx','yy','zz']"></tag>
<style>
.apple{color:blue;}
.pear{font-size:25px;}
.orange{background-color:hotpink;}
</style>
<div id="app">
<h2>属性绑定</h2>
<p :class=" {apple:true, pear:true, orange:true, banana:false} ">学习Vue课程</p>
<p :class=" ['apple','pear','orange'] ">学习Vue课程</p>
</div>
7.3属性绑定-style属性
使用v-bind指令操控style属性
style样式属性较比普通属性也比较特殊，其也可以接收多个值
<p style="color:red; font-size:25px; background-color:lightgreen;"></p>
style属性绑定语法：
1) 对象方式
<tag :style="{xx:yy,xx:yy.....}"></tag>
2) 数组方式
<tag :style="[{xx:yy},{xx:yy.....}]"></tag>
<p style="color:blue;font-size:25px;background-color:hotpink;">学习Vue课程-style绑定</p>
<div id="app">
<h2>属性绑定</h2>
<p :style=" {'color':'blue','fontSize':'25px','background-color':'hotpink'} ">学习Vue课程-style绑定</p>
<p :style=" [{'color':'blue','fontSize':'25px','background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
<p :style=" [{'color':'blue'},{'fontSize':'25px','background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
<p :style=" [{'color':'blue'},{'fontSize':'25px'},{'background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
</div>
数组方式绑定style属性，每个数组元素可以包含一个或多个css样式对象复合属性带中横线(例如background-color)的需要通过单引号圈选，或变为驼峰命名
通过传统方式也可以操作class或style属性，但是Vue的操控会更加灵活 和 精准，可以针对某一个值进行设置
8.事件绑定v-on(@) 8.1事件绑定-基本使用
使用v-on给标签绑定事件
web端网页应用程序开发，事件是一个不可或缺的技术
在vue中给元素进行事件绑定，需要通过v-on:指令实现，或使用@符号，@是v-on:的简写，使用更方便
事件类型：
鼠标事件：click dblclick mouseenter mouseleave mouseover mousedown等等
键盘事件：keyup keydown keypress 等等
注意：
事件处理驱动 需要通过methods定义被绑定的事件类型可以是 click、dblclick、keyup、keydown等等，不需要设置on标
<div id="app">
<h2>事件操控</h2>
<button v-on:click="say()">说</button>
<button @click="say()">说</button>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
},
// 给Vue实例 声明方法，该方法可以给事件使用
methods:{
say(){
console.log('hello,北京')
}
}
})
</script>
8.2事件绑定-传递参数
vue“单击”事件参数的3种类型：
有声明()，也有传递实参，形参就代表被传递的实参有声明(),但是没有传递实参，形参就是undefined没有声明()，第一个形参就是事件对象 [object MouseEvent/鼠标事件对象] 8.3事件绑定-访问data成员
根据业务需要，事件在执行过程中需要对Vue实例的data数据进行操作，通过this关键字实现
this代表Vue实例对象，并且针对data或methods成员都可以直接进行调用
8.4事件绑定-this是谁
在Vue实例内部包括不限于methods方法中，this关键字 是Vue实例化对象，具体与 new Vue() 是一样的
并且其可以对 data 和 methods成员进行直接访问
可以理解为this和vm是同一个对象的两个不同名字，this === vm
8.5事件绑定-方法简易设置
根据es6标准，可以给methods各个成员方法做简易设置如下：
方法名称:function(){} 简易设置为： 方法名称(){}
9.this指向
普通函数调用，this就是window对象
var age = 20
function getInfo(){
console.log(this) // window
console.log(this.age)
}
getInfo() // 20
作为对象的方法调用，this代表调用该方法的当前对象
const tiger = {
name:'东北虎',
act:'猛虎扑食',
say(){
console.log('我的名字是'+this.name+'，我的招牌动作是'+this.act)
// this代表tiger对象
}
}
tiger.say()
this代表元素节点对象
<button onclick="this.style.color='red'" />确定</button>
注意：this在不同情况下代表不同对象，不用强记，通过console.log输出查看便知
10.双向数据绑定v-model
v-model，其被称为双向数据绑定指令，就是Vue实例对数据进行修改，页面会立即感知，相反，页面对数据进行修改，Vue内部也会立即感知.
v-model是vue中 唯一实现双向数据绑定指令
v-bind(单向)数据绑定，Vue实例修改数据，页面会感知到，相反页面修改数据Vue实例不能感知
v-model(双向)数据绑定，页面修改数据，Vue实例会感知到，Vue实例修改数据，页面也会感知到
10.1基本使用
<标签 v-model="data成员"></标签>
注意：
v-model只针对value属性可以绑定，因此经常用在form表单标签中，例如input(输入框、单选按钮、复选框)/select(下拉列表)/textarea(文本域)，相反div、p标签不能用v-model只能绑定data成员，不能设置其他表达式，否则错误v-model绑定的成员需提前在data中声明好
<div id="app">
<p>{{ city }}</p>
<p><input type="text" :value="city"></p>
<p><input type="text" v-model="city"></p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
city:'北京'
},
})
</script>
v-model对应的city发生变化后，其他的{{ }} 和 :value的值也会发生变化
10.2响应式
v-model数据双向绑定步骤：
页面初始加载，vue的data数据渲染给div容器通过v-model修改数据，修改的信息会直接反馈给vue内部的data数据vue的data数据发生变化，页面上(也包括Vue实例本身)用到该数据的地方会重新编译渲染。
响应式：
vue实例的data数据如果发生变化，那么页面上(或Vue实例内部其他场合)用到该数据的地方会重新编译执行，这样就把更新后的内容显示出来了，这个过程就是“响应式”，即上面步骤3
注意：响应式 是Vue中非常重要的机制
10.3v-model实现原理
给input输入框中定义oninput事件，在该事件中把用户输入的信息都给随时获得到，并对data成员进行赋值
data成员变化了，页面上用到数据的地方就重新渲染，达成简易双向绑定的效果
<div id="app">
<h2>v-model简易原理</h2>
<p>{{city}}</p>
<p><input type="text" :value="city" @input="city = $event.target.value"></p>
<p><input type="text" :value="city" @input="feel"></p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
city:'北京'
},
// 给Vue实例 声明方法，该方法可以给事件使用
methods:{
feel(evt){
this.city = evt.target.value
}
}
})
</script>
oninput：是一个键盘事件，可以随时感知输入框输入的信息
$event:在vue的事件被绑定元素的行内部，代表事件对象
event.target: 触发当前事件的元素节点dom对象
注意：
事件声明没有小括号()，第一个形参就是 事件对象在元素行内事件驱动中可以直接使用**$event**,其也是事件对象 11.遍历v-for
使用v-for指令，遍历数组信息
<标签 v-for="成员值 in 数组"></标签>
<标签 v-for="(成员值,下标) in 数组"></标签>
<div id="app">
<ul>
<li v-for="item in color" :key="item.id">{{item}}</li>
</ul>
<ul>
<li v-for="(item,k) in color" :key="item.id">{{k}}-----{{item}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
color:['red','yellow','pink']
},
methods:{
}
})
</script>
注意：使用v-for指令的html标签，由于遍历机制，本身标签会被创建多份出来
在vue中v-for做遍历应用时，都需要与**:key**一并进行使用
在2.2.0+版本里边，v-for使用的同时必须使用:key，以便vue能准确跟踪每个节点，从而重用和重新排序现有元素，需要为每个数据项提供一个唯一的、代表当前项目的属性值赋予给key
<tr v-for="(item,k) in brandsList" :key="item.id">
注意：
:key不设置，也是存在的，默认绑定每个项目下标序号信息key是一个普通属性，前边设置**:冒号**，代表属性绑定 12. v-if 和 v-show
在vue中，v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果
<标签 v-if="true/false"></标签>
<标签 v-show="true/false"></标签>
原理：
v-if：通过 创建、销毁dom的 方式达到显示、隐藏效果的(销毁后有一个占位符 )
v-show：其是通过css样式控制达成显示、隐藏效果的
特点：
v-if 有更高的切换消耗 、v-show有更高的渲染消耗
如果需要频繁切换 则v-show 较合适，如果运行条件不大,可能改变 则v-if 较合适。
注意：
v-if使得元素被隐藏后，这个元素的物理位置有一个名称为" "的占位符，其与html的注释信息没有关系
简单案例：通过按钮控制，使得元素内容在 显示 和 隐藏 之间切换
<div id="app">
<h2>v-if和v-show</h2>
<button @click="flag=!flag">切换</button>
<p id="one" v-if="flag">学习vue第二天---v-if</p>
<p id="two" v-show="flag">学习vue第二天---v-show</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false // 控制标签是否显示true/false
},
});
</script>
注意：事件驱动不仅可以是methods方法，也可以是简单的js语句
13. v-if 和 v-else
在Vue中，v-if 、v-else-if 和 v-else 三个指令结合可以实现多路分支结构
<标签 v-if="true/false"></标签>
<标签 v-else-if="true/false"></标签>
<标签 v-else-if="true/false"></标签>
<标签 v-else></标签>
以上4个标签分支结构，最终只会走一个，第一个为true的那个标签会执行 或 执行v-else
判断信息是否存在，并显示对应内容
<table v-if="brandList.length>0">
……
</table>
<table v-else>
<tr><td>没有任何记录！</td></tr>
</table>
注意：v-if和v-else一并使用，页面没有 占位符了
14.vue生命周期
生命周期是指vue实例(或者组件)从诞生到消亡所经历的各个阶段的总和
生命周期分为3个阶段，分别是创建、运行、销毁
成员方法：
各个阶段在Vue实例内部都有对应的成员方法，可以定义、执行、感知
创建：beforeCreate created beforeMount mounted
运行：beforeUpdate updated
销毁: beforeDestroy destroyed
不同阶段完成不同的任务，开发者可以利用各个阶段的特点完成业务需要的相关功能
14.1创建阶段
创建阶段一共有4个方法，它们与 el、data都是并列关系的，重点记住created()方法
new Vue({
beforeCreate(){ }, //Vue实例已经创建完毕，但是相关的成员都没有
created(){ }, //此时data 和 methods已经准备好了，但是还没有去找div容器
//可以用于页面首屏数据获取操作，获取回来的数据存储给data的某个成员
beforeMount(){ }, //Vue实例获取到div容器，但是div容器的内容还是没有编译前的原生内容
mounted(){ }, //Vue实例已经完成了div容器内容的编译，并把编译好的内容渲染给div容器
})
beforeCreate：此时Vue对象刚创建好，没有任何成员，data、methods等都没有，只有this
created：此时vue对象内部已经完成了data、methods等成员的设置，也是data初始化的最好时机
beforeMount：此时vue实例已经把div容器给获得到了，但是内部的vue指令等信息还没有被编译处理
mounted：此时，vue获取到的div容器内部的原生指令已经被编译处理好了，并且也完成了容器的渲染工作，此时模板中已经看不到vue原始指令了
