1.vue的新建：
（1）在head添加<script src="vue.js"></script>来添加vue库。
（2）在下边的body中再添加
<script>
var vm =vue({ //创建vue的实例
el:'标签',//跟将vue实例跟id绑定
data:{//数据源
msg:'你好呀',//数据源中的一个数据
msg:'<h1>我是一个大大的h1</h1>' //数据源会把h1标签渲染成字符串直接显示.
},
methods:{ //方法源,定义了当前vue实例所有可用的方法
show:function(){
alert('Hello')
}
}
})
</script>
2.v-clock的学习
在网速慢的时候，vue库还未被加载完成，所以标签中的插值表达式{{msg}}还未跟vue的数据源取代，
所以页面会有闪烁，在含有插值表达式的标签内添加v-clock
既<p v-clock>{{msg}}</p>中，让vue库在加载前，不让插值表达式显示出来。就不会出现闪烁问题。
3.v-text的学习
除了插值表达式{{msg}},还可以用
<h4 v-text="msg"></h4>的形式取代。v-text相比插值表达式的优点是没有闪烁的问题，因为其标签内
没有内容。但是插值表达式可以任意添加其他符号，如
<h4>++++{{msg}}-----</h4>插值表达式只会替代它的占位符，不会把整个元素内容清空，而使用v-text
既<h4 v-text="msg">++++++-------</h4>会将数据源msg的内容完全取代其间的内容。
4.v-html的学习
使用插值表达式和v-text时，数据源会把h1标签渲染成字符串直接显示，既
data:{msg:'<h1>我是一个大大的h1</h1>'},会直接输出<h1>我是一个大大的h1</h1>。可以使用v-html既
<div v-html="msg2"></div>解决这个问题。
5.v-bind的学习
v-bind是vue中提供的用于绑定属性的指令，input标签中的title就是其中的一个属性，在其前面加上v-bind:既
<input type="button" value="按钮" v-bind:title="msg" />
告诉其绑定的msg是一个变量。
注意：v-bind：的简写为：。v-bind中，可以写合法的JS表达式。
6.v-on的学习
vue中提供了v-on：事件绑定机制。如果input标签如下
<input type="button" value="按钮" v-bind:title="msg" id="btn"/>
在传统的原生js的条件下，需要使用dom操作既
document.getElementById('btn').onclick=function(){alert('Hello')}
而使用v-on指令，既
<input type="button" value="按钮" v-bind:title="msg" v-on:click='show'/>
即可在点击事件中绑定show事件，然后在vue对象的方法源中定义show方法即可。
注意：v-on：的缩写是@：。
7.事件修饰符的学习
由v-on提供的事件修饰符。事例如下：
<input type="button" value="" @click.事件修饰符="方法源" />
·stop 阻止冒泡（阻止全部冒泡）
·prevent 阻止默认事件
·capture 添加事件侦听器时使用事件捕获模式
·self 只当事件在该元素本身（比如不是子元素）触发时触发回调（只阻止其上对它的冒泡）
·once 事件只触发一次
事件修饰符可有多个对v-on进行修饰。如v-on.prevent.once就是只制止一次默认行为，顺序不影响结果。
8.v-model的学习
v-bind和v-on都是单向数据绑定。只有v-model是双向数据绑定。
v-bind和v-on都是从model层修改数据，然后同步到页面既visual层中，数据是单向的，无法从
visual层中将数据传送给model层。而v-model依介表单元素（用户交互需要使用表单元素）可以
让v层的表单对m层进行双向数据更新。代码如下
<input type="text" style="width: 100%;" v-model="数据源msg" />
v-model取代了value属性的位置。
注意：v-model只能运用在表单元素中（input select checkbox textarea）。
9.v-for的学习
（item in 数组，对象，方法），类似js的for循环遍历数组或对象。通常加在表格数据进行迭代赋值。
注意使用key使他唯一。
10.一些循环查找，数组遍历的方法
1.foreach（）方法用于调用数组的每个元素，并将元素传递给回调函数。
语法：array.forEach(function(currentValue,index,arr),thisValue)
第一个参数为必需，第二个可选。第一个参数里的第一个参数为必须，其他可选。其中currentValue指当前元素，index指当前元素的索引值。
arr指当前元素所属的数组对象。
例如：
show:function(){
var newList= []
this.list.forEach(item => {
if(item.name.indexOf(this.keywords)!=-1){
// 来自keywords实参的疑惑,keywords初始值为空,为什么能把所有值都显示呢/？
// 领悟:因为空字符串indexof方法放回的是0并不等于-1,也就是空字符串是每个字符串的子集,因此,遍历数组,
// 的属性都能显示处理.
newList.push(item)
}
})
return newList
}
注意：foreach方法没法被终止
2.some()方法
some可以通过return true停止循环
3.findIndex()方法
4.filter()方法
es6的新方法，例
array.filter(item=>{
console.log(item)
})会将array的值一个个输出到控制台。
11.过滤器的学习
Vue.js允许自定义过滤器，可被用作一些常见的文本格式化。
过滤器可以用在两个地方：mustache插值（既插值表达式{{}}中）和v-bind表达式。
过滤器应该添加在js表达式的尾部，由管道符|（shift+\）指示。实例如下
在body中 {{name|过滤器的名称}}
在vue中 Vue.filter('过滤器的名称',function(data){})
过滤器中的function，第一个参数已经被规定死，永远是过滤器管道符前面传过来的数据
私有过滤器的写法是在vm实例中添加filter对象
var vm =new Vue({
data:{}
methods:{}
filters:{
过滤器名称：（回调函数）=>{
函数体
}
}
})
12.一些ES6的新方法
1.PadStart(maxlength,fillstring='')方法或PadEnd(maxlength,fillstring='')方法
这两个方法可以用来填充字符串，例如
date.getHours().toString().PadStart(2,'0')
既如果小时数小于两位数，即在前面加0。
13.自定义按键符
像在keyup属性中有：enter，deleter等常用的按健符。
可以用@keyup.enter来定义
而F1，F2这些按健符就需要使用js的按健码来使用。
而这些按健码需要记忆，可能会比较繁琐，而Vue中提供了一种自定义按健符的属性
既Vue.config.keyCodes.f2(按健符) = 113(按健码)
示例是将f2设置为113按健码。
之前不能使用@keyup.f2，现在就能用了。
14.自定义全局指令
使用 Vue.directive('')定义全局的指令
其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀
参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
指令定义函数提供了几个钩子函数bind，inserted，undate
例如
Vue.directive('focus',{
数据还在内存的时候，还未渲染到页面中
bind：function(el,binding){}
el.focus() //在每个函数中，第一个参数，永远都是el，表示被绑定了指令的那个元素
这个el参数，是一个原生的js对象
//第二个参数binding是一个对象
包含有name，value，oldvalue，expression等属性
name是指令的名称，value是指令的绑定值(表达式)
expression是绑定值的字符串
元素插入到Dom中的时候，会执行inserted函数
inserted：function(el){}
数据更新的时候，其他都触发一次，update可能会触发多次
update：function(el){}
})
注意：Vue中的指令都是以v-开头
15.定义私有指令
例子如下
var vm =new Vue({
data:{}
methods:{}
directives:{
'指令名称'：function(el,binding){
函数体
}
}
}
})
简写：如果只需要用到bind喝update钩子做重复动作，可以像下面一样简写
Vue.directive('指令名称',function(el,binding){
函数体
})
16.Vue实例的生命周期
创建期间的生命周期函数：
beforcreate(){}实例刚在内存中被创建，还没初始化
created(){}刚初始data和methods，此时还未编译模板
beforemount(){}此时完成了模板的编译，还未挂载到页面
mounted(){}此时已经挂载到页面
运行期间的生命函数：
beforeupdate(){}状态更新前
update(){}状态更新后
销毁期间的生命函数：
beforedestroy(){}
destroy(){}
17.vue-resource实现get，post，jsonp请求
除了vue-resourse之外，还可以使用`axios`的第三方包实现数据的请求
vue-resource包需要导入在vue包的后面，因为vue-resource依赖于Vue
测试网址：http://vue.studyit.io/api/getlunbo
vue-resource在vue中挂载了this.$http.get('地址'，可选属性).then(成功的回调函数)
this.$http.get('http://vue.studyit.io/api/getlunbo'，可选属性).then(function(result{
console.log(result)
}))
18.JSONP的实现原理
由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
用script标签去请求http协议就不受安全性的限制
例如在<script src="http://192.168.0.1:3000/地址"></script>
使用script的src属性就可以向服务器的3000端口请求回想要的脚本，实现跨端口号请求http
19.使用v-resource改进品牌列表
获取接口：http://www.liulongbin.top:3005/api/getprodlist
添加接口：http://www.liulongbin.top:3005/api/addproduct
删除接口：this.$http.get("http://www.liulongbin.top:3005/api/delproduct/" + id).then（）
添加时，使用v-resource的post进行传送，第一个参数是地址，第二个是数据为对象{name:this.name}
第三个是格式{emulateJSON:true}如果result.body的status为0既传送成功了
这时再调用ALLlist即可。
删除使用get传id过去即可
20.vue动画
vue动画分为了俩个部分，
<style>
一个为
.v-enter-active(进入半场动画)， 入场动画的时间段
一个为v-leave-to(离开半场动画) 离场动画的时间段
其中又分为了
.v-enter(进入起始)， 是进入之前，元素的起始状态，此时还未进入
.v-enter-to(进入结束)和
.v-leave(即将离开)，
.v-leave-to(离开之后) 是动画离开之后，动画已经结束
</style>
v-enter(进入起始) = v-leave-to(离开之后)，v-enter-to(进入结束)=v-leave(即将离开)
21.使用过渡类名实现动画
使用vue内置函数transition，把需要被动画控制的元素，包裹起来
在配置两个css标签来实现动画效果
<style type="text/css">
//初始状态
.v-enter,
.v-leave-to{
opacity: 0;//透明度
transform: translateX(150px);//位移
}
/* 时间段*/
.v-enter-active,
.v-leave-active{
transiton: all 0.8s ease;
/* 第一个参数是所有指向动画
第二个参数是持续时间
第三个参数
*/
}
</style>
注意：他们都带.v-前缀
如果想定义两个不同的动画，在transition标签的属性name中加入名称
这时就可用 .你加入的名称-前缀来区分，如
<transition name="my"></transition>
则其样式可以这样写
<style type="text/css">
//初始状
my-enter,
my-leave-to{
opacity: 0;//透明度
transform: translateX(150px);//位移
}/
my-enter.active,
my-leave-active{transiton: all 0.8s ease;}
22.使用第三方类实现动画
使用animate类来实现动画，进入其官网就可即使浏览效果
使用过度类名实现动画有很多动画不能做到，animate既解决了这个问题
使用如下
在head的引入animate样式表
<link rel="stylesheet" type="text/css" href="animate.css"/>
然后从其官网挑选出动画，如bouncein，bounceout
在transiton标签中加入
<transition
enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut"//进场动画和离场动画都有第三方类库,引用类名实现,记得加基本类名animated
:duration="{enter:200,leave:400}"//使用duration设置动画的时间,毫秒
>
被包裹的动画元素
</transiton>
23.钩子函数实现半场动画
前面两种方式都不能实现半场动画，使用钩子函数进行定义，定义如下
<transition
//这是进入的半场动画过程
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
//这是离开的半场动画过程,如果只需进入半场动画,下面的事件不用添加
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
</transition>
上面v-on都是动态绑定了事件，因此需在methods中第一其上的方法，如下
methods: {
beforeEnter: function (el) {
el.style.color ="color(red)"
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
el.offsetTop //这句话没有实际意义，但它会强制动画刷新，需添加
el.style.transform="translate(120px,240px)"
el.style.transiton="all 1s ease"
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},他们
第一个参数都是el，可认为是js中的getelementbyid获取的js原生dom
注意，在enter过渡到after-enter的时候会有卡顿，这时需在enter第二个形参添加done，里面加done()
实现立即刷新，done是afterenter函数的引用。
24.列表动画
在实现列表过渡动画的时候，由于它不是单个元素，因此不能用transiton进行包裹，
要使用tansiton-group标签进行包裹
注意：如果要为v-for循环创建的元素设置动画，!!必须为每一个元素设置：key属性。
<style type="text/css">
.v-enter
.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active
.v-leave-active{
transition: all 0.8s ease;
}
.v-move{
transition: all 0.6s ease;
}//这个类名是指文件区域一有移动就使用这个类
.v-leave-active{
position: absolute;
} //这个是跟v-move一起的固定写法
</style>
列表渐渐出现的效果，给transiton标签添加appear属性即可
25.vue中的组件
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化和模块化的不同：
+ 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
+ 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
### 全局组件定义的三种方式
1. 使用 Vue.extend 配合 Vue.component 方法：
```
var login = Vue.extend({
template: '<h1>登录</h1>'
});
Vue.component('login', login);
```
2. 直接使用 Vue.component 方法：
```
Vue.component('register', {
template: '<h1>注册</h1>'
});
```
3. 将模板字符串，定义到script标签种：
```
<script id="tmpl" type="x-template">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</script>
```
同时，需要使用 Vue.component 来定义组件：
```
Vue.component('account', {
template: '#tmpl'
});
```
> 注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
26.组件中的数据和方法
组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法
组件中的data除了必须为一个方法外，这个方法内部还必须返回一个对象才行；
Vue.component('组件名称',{
template:'<h1>这是一个组件</h1>',
data:function(){
return {
msg:'这是组件自己定义的数据'
}
},
//为什么要将数据data做成方法来返回呢？因为当引用多次组件时，能做到数据不指向同一个对象。
methods:{
functionName(){}
}
})
27.组件的切换
使用v-if和v-else属性，用点击事件使得flag变换，可做到
也可使用Vue自带的标签<component :is="tagName"></component>将tagName替换成想要展示的组件名即可
例如：
{
<a href="" @click.prevent='tagNmae=login'></a>
<a href="" @click.prevent='tagNmae=register'></a>
<component :is="tagName"></component>
</body>
<script type="text/javascript">
Vue.component('login',{
template:'<h3>这是登陆组件</h3>'，
})
Vue.component('register',{
template:'<h3>这是注册组件</h3>'，
})
var vm =new Vue({
el:'app',
date:{
tagName:'login'
}
})
</script>
28.组件切换衔接动画
动画标签<transition></transition>中有个属性mode，
将其value设置成out-in就可实现先出后进的效果
29. 父组件给子组件传值，传方法
父组件可以在引用子组件的时候，通过属性绑定的形式，把需要传递给子组件的数据，以属性
绑定的形式，传递到子组件内部，给子组件使用
例如
<div id="app">
<com1 v-bind:parentmsg='msg'></com1>
</div>
{
el："#app"
data:{msg:'123 啊-父组件中的数据'}
methods:{}
components:{
com1:{
template:'<h1>这是一个子组件 --- {{parentmsg}}</h1>',
props:['parentmsg']
}
}
//父组件传递过来的自定义parentmsg属性，需要先在props数组中定义一下。
}
注意：props中的数据都是只读的。
父组件给子组件传方法跟传数据大致一样，其最大的区别就是
1.使用V-on事件绑定机制来传递方法，而不是数据绑定V-bind
2.调用时，不需在类似props数组中在定义一下，而是使用自身定义的方法使用this.$emit()方法来调用
<div id="app">
<com2 @func='show'></com2>//func是自己定义的方法名
</div>
{
el："#app"
data:{}
methods:{
show(){
console.log('这是父组件的方法')
}}
components:{
com2:{
template:'<input type="button" value="这是子组件按钮,点击触发父组件的方法" @click="myclick"/>'，
methods:{
myclick(){
//emit的英文原意是触发，发射，调用的意思
this.$emit('func'，第二个参数)//触发调用过来的func方法，第二个参数是调用过来，你要添加的参数
}}}}}
使用第二个参数就能实现子组件向父组件进行传值
此时数据已经从子组件传到父组件
show(data){
console.log(data)//就输出子组件的数据
}
30.localStorage
localStorage.getItem('对象名或文件名？' || '[]' ) //避免取数据时，无数据会报错，使用[]避免报错
使用JSON.parse(localStorage.getItem('对象名或文件名？' || '[]' ))将其转化为对象
获取来的对象赋值给list，在调用localStorage.setItem('cmts',JSON.stringify(要存储的对象))
既将对象存入localstorage了
31.$ref获取DOM元素
vue中不提倡调用DOM，那你vue就得提供的方法让我获取dom函数
在标签添加属性ref，就可在vue实例创建ref元素
使用this.$refs.ref属性值.innerText就可获取元素
ref英语是reference
如下
<h3 ref='myh3'></h3>
console.log(this.$refs.mth3.innerText)
当有多个标签有ref属性时，refs是一个数组
组件也可获取
32.vue路由导航守卫
router.beforEach((to,from,next)=>{
//1.to是将要访问的网站 2.from是表示从那个路径来的 3.next()表示放行 next('/home')表示强制跳转
if(to.path='/login') return next() //表示要去login路径时，放行
var tokenStr = window.sessionstorage.getItem('token') //获取token
if（！tokenStr）return next('/login') //如果没有token，强制跳转到登录页
next（） //有token就直接放行
})
33.退出功能
window.sessionstorage.clear() //清除token
this.$router.push('/login') //强制跳转到登录页
