// 1.下载
npm install vue --save：vue核心文件
// 注意：下面两个不是必须，需要就下载
npm install vue-resource --save：vue资源文件-ajax
npm install vue-router --save：vue路由

// 2.页面内使用
// HTML代码
<div ></div>

// JS代码
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
// 实例化Vue对象（可以有多个实例，但是不推荐）
new Vue({
    // 指定Vue作用范围
    el: "#box"
})
</script>

注意事项：
1.Vue的内容都必须在在el属性值表示的标签范围内
2.一个页面中可以有多个vue实例,但是以后网页都是单页面，推荐写一个vue实例
3.不要将el设置为html和body

3.{{}}使用-数据输出

// Mustache语法
// 数据msg改变，插值内容将会更新
<span>message:{{msg}}</span>

// 只绑定一次
<span v-once>{{msg}}</span>

{{'hello world'}}：纯字符串
{{4*8}}：数字运算表达式
{{ num }}：变量（数据模型）
{{ num*price }}：变量（数据模型）运算
{{ boolean ? 'yes' : 'no' }}：三元运算符
{{data.join('->')}}：数组拼接
    data=[1,2,3,4] 1->2->3->4
{{ msg.split('').reverse().join('') }}：字符串反转处理

// JS代码
new Vue({
    el:"#box",
    data:{
        msg:"Hello world",
        num:8,
        price:3.99,
        boolean:true,
        data:['zhangsan','lisi','wangwu']
    }
})

2.指令

指令里的字符都是变量
v-model="red"  //此时red是变量，如果想输出red字符串，需要给red加引号v-model="'red'"

2.0 v-text:绑定文本

<span v-text="msg"></span>
等价于 <span>{{msg}}</span>

2.1 v-bind：绑定属性

// **下面写法 img数据不能解析
<img src="{{img}}">

// **v-bind绑定（此处“”内的img，title都是模型数据）
<img v-bind:src="img" alt="" v-bind:title="title">

// button按钮
<button v-bind:disabled="false">Button</button>：启用按钮
<button v-bind:disabled="true">Button</button>：禁用按钮

// 绑定自定义data属性
<h3 v-bind:data="msg">绑定自定义属性-绑定模型</h3>

// v-bind内容做字符串和变量值拼接
<div v-bind:title="'list-'+id"></div>

// **简写
<img :src="img" :title="title">

2.2 v-html

// 问题：{{}}只可以解释纯文本，写标签原形输出

// 解决办法：v-html绑定html标签内容输出
<div v-html="model"></div>

注意：
        1.内部的数据绑定会被忽略
        2.只对可信内容使用HTML插值，绝不要对用户提供内容插值，防止XSS攻击

2.3 v-model

<input type="text" v-model="message">
// v-model定义的message模型改变，h3内的{{message}}同步更新
<h3>{{message}}</h3>

注意：v-model定义的数据必须在data中定义

2.4 **v-if

// bool=true=>显示
// bool=false=>不显示
<h3 v-if="model">显示与不显示</h3>

// template:模板-views
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>


v-if 满足条件则显示
不满足条件隐藏
v-else-if
必须和前面的v-if结合使用
v-else
当以上条件都不满足时，触发，只和最近的的v-if 或者是v-else-if搭配使用

2.5 v-for

**普通遍历
<ol>
    <li v-for="todo in todos">
    {{ todo.text }}
    </li>
</ol>

**数组遍历 value为值，key为索引
<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

// 普通0-10循环
<span v-for="n in 10">{{ n }}</span>

// 模版遍历
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

2.6 v-show

// v-show="boolean"
<p v-show="boolean">v-show指令</p>

2.6.1 v-if和v-show区别

与v-if区别：
    v-if：是vue在编译的时候，v-if="false"直接不会显示对应的代码,代码以注释形式存在浏览器中，并且不显示，只显示<!---->
    v-show：v-show="false"仅仅是隐藏对应的代码

*********************
还有一个区别
<div v-show="isShow">
	<video></video>
</div>
如果是v-show 即使退出这个div不显示了，视频仍然播放着，只不过在页面不显示，视频依然有声音
但是v-for就可以退出视频了

2.7 绑定事件:v-on

绑定多个事件

@mousedown="dragShow();moveShow()"

jquery阻止事件冒泡
    1.return false
    2.e.stopPropagation()
jQuery阻止默认行为
    1.return false
    2.e.preventDefault()

js中阻止事件冒泡
    1.var e = ent || window.event;
        e.cancelBubble = true
    2.e.stopPropagation();

    注意啦：在JS中不能使用return false阻止事件冒泡
JS中阻止默认行为
    1.e.preventDefault();
    2.return false;
<button v-on:click="show">点击</button>
// 简写事件格式
<button :click="show($event)"></button>

// 事件属性
new Vue({
    el:'',
    methods:function(e){
        e.cancelBubble = true;  // 阻止事件冒泡
        e.preventDefault(); // 阻止默认行为
        e.clientX/e.clientY // 鼠标事件属性
        e.keyCode   // 键盘事件属性
    }
})

// 阻止事件冒泡方法2
@click.stop="show()"
@click.prevent="show()"

// 键盘事件特殊用法
@keyup.13="show()"
@keyup.enter/tab/delete/esc/space="show()"
@keyup.left/up/right/down="show()"

// 等价于@keyup.13="show()"
show:function(ev){
    if (ev == 13) {
        alert('您按回车了')
    }
}

// 拖拽事件可以直接被使用

2.8 自定义指令

// 为什么用自定义指令(举例子)
Vue2.0中，代码复用的主要形式和抽象是组件，然后，有的情况下，你仍然需要对纯DOM元素进行底层操作，这就需要自定义指令

// 注册一个全局自定义指令 v-demo="color"
Vue.directive('demo', function(el, binding) {
    // el：绑定的元素
    // binding.value：绑定的值
    el.style.backgroundColor = binding.value;
})

// 实例化Vue对象
new Vue({
    el: '#box',
    data: {
        color: "yellow"
    }
})

2.9区别

v-if和v-show的区别
v-if 是通过控制元素节点是否存在，控制元素的显示与隐藏
v-show 是通过控制元素的style.display 控制元素的显示与隐藏

v-html和v-text的区别
v-html 支持解析HTML标签
v-text 不支持解析HTML标签，将HTML标签全部以实体字符的形式显示，也就是标签原样输出

3.计算属性

任何复杂的逻辑运算，使用计算属性

// HTML标签代码
<div >
    <input type="text" v-model="num1">
    <div>{{num1}}</div>
    <div>{{num2}}</div>
    <div>{{getNum2()}}</div>
    <div>{{fullName}}</div>
    <!-- 使用对象添加class对象 -->
    <div v-bind:class="classObject">Hello world</div>
</div>

//实例化Vue
var app = new Vue({
    el: '#box',
    data: {
        price: 0,
        num: 0,
        message: "hello world"
    },
    // 只讲计算属性，方法放在简书案例中即可
    computed: {
        // 计算属性不能出现在data数据中
        total: function() {
            console.log(this.price);
            return this.price * this.num;
        },
        // 随时跟着message进行相应的变换
        reverse: function() {
            return this.message.split('').reverse().join('');
        }
    }
})

注意：
1.计算属性（computed）和方法（methods）都可以修改数据，但是计算属性依赖缓存提升效率，方法调用不会依赖缓存
2.观察对象watchers：当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的（官方demo-尝试做一个ajax的例子）

4.过滤器

//过滤器
    Vue.filter('number', function(value) {
        // 转换为浮点数
        var num = parseFloat(value);

        // 保留两位小数点
        return num.toFixed(2);
    })

    // 格式化日期
    Vue.filter('date', function(input) {
        // 将个位数加前置0
        function toZero(value) {
            console.log(value);
            if (value <= 9) return '0' + value;
            else return value;
        }

        var oDate = new Date(input);
        return oDate.getFullYear() + '-' + toZero((oDate.getMonth() + 1)) + '-' + toZero(oDate.getDate()) + ' ' + toZero(oDate.getHours()) + ':' + toZero(oDate.getMinutes()) + ':' + toZero(oDate.getSeconds());
    });

5.表单控件绑定

6.Class与Style绑定

// HTML标签代码
// class绑定
    <h3>1.:class="model"</h3>
    <div :class="className">:class="model"</div>
    <h3>2:class="{className:bool}"</h3>
    <div :class="{red:bool}">:class="{className:bool}"</div>
    <h3>3:class="arr"</h3>
    <div :class="['red','fs']">3:class="object"</div>    

// style样式绑定
    <!-- 1.直接绑定样式 -->
    <div :style="{'100px',height:'100px',background:'red'}"></div>
    <!-- 2.直接绑定模型 -->
    <div :style="style"></div>
    <!-- 3.绑定数组 -->
    <div :style="styleArr"></div></div>

//实例化Vue
new Vue({
        el: '#box',
        data: {
            style:{
                '150px',
                height:'150px',
                background:'#ddd'
            },
            styleArr:[
                {'200px',height:'200px'},
                {background:"blue"}
            ],
            '50px'
        }
    })

3.created 实例化 mounted 挂载

		created:function () {
           console.log('vue实例化');
        },
        mounted:function () {
            console.log('vue挂载');
        }
        
 // 无论先写挂载，还是实例化，首先执行实例化，其次执行挂载

4.组件

|注意：template:里的内容必须是一个标签，不能直接输出文本，如果需要输出多个标签，需要用一个标签在外进行包裹

组件：具有某个相对独立的功能的模块，
应用：一般由一个或多个组件进行组成
web开发的应用，SPA 单页面应用，只有一个页面

4.1全局组件

<div >
    <div class="show">
        <!--显示的组件-->
        <my></my>
        <!--引入第二个组件-->
        <two></two>
    </div>
</div>
<script src="../dist/vue.js"></script>
<script>
    // 全局组件   
    Vue.component('my', {  // my自定的组件名
        // template 模板 组件中有且只有一个标签，作为最外侧的容器，不能直接输出文本
        template: `
            <div>
                <h3>我是h3</h3>
                <h4>我是h4</h4>
            </div>
        `
    })
</script>

4.2局部组件（子组件）

    Vue.component('two',{
        template:`
            <div>
                我是第二个组件,我要引用第一个组件
                <my></my>
                <child></child>
            </div>
        `,
//        子组件，局部组件
        components:{
            'child':{
                template:'<h3>我是一个局部组件</h3>'
            }
        }
    })
    new Vue({
        el: '#app',
    })

5.路由router

路由：约定好的一种特定的访问方式！
直接引入vue-router.js文件
下载：npm install vue-resource --save：vue资源文件-ajax
	npm install vue-router --save：vue路由
JS操作：
	1.创建组件
	2.约定路由规则，指定组件
	3.创建路由实例
	4.挂载路由
	
HTML操作：
	1.设置路由链接
	2.设置路由组件显示的区域

<body>
<div >
    <span>
    // <router-link>类似a链接，固定写法
        <router-link to="/index1">首页</router-link>
        <router-link to="/me1">我的</router-link>
    </span>
    <div class="content">
        <router-view></router-view>
    </div>
</div>
<script src="../dist/vue.js"></script>
<script src="../dist/vue-router.js"></script>
<script>
//    创建组件
    const index = {
        template:`
            <div>
                <p>首页组件</p>
                <ul v-for="(item,index) in goods">
                <li>{{index+1}}</li>
                <li>{{item.title}}</li>
                <li>{{item.price}}</li>
                </ul>
            </div>

            `,
            // 路由里data必须是一个函数
        data:function () {
            return {
                goods:[
                    {title:'可乐',price:2.50},
                    {title:'雪碧',price:2.50},
                    {title:'橙汁',price:2.50}
                ]
            }
        }
    };
    const me = {
        template:'<p>我的组件</p>'
    };
//   约定路由规则，指定组件
    const routes = [
        {
            path:"/index1",
            component:index
        },
        {
            path:'/me1',
            component:me
        },
        {
            path:'/*', 
            // 重定向
            redirect:index
        }
    ];
//    创建路由实例
    const router = new VueRouter({
        routes:routes
    });
    new Vue({
        el:'#app',
//        挂载路由
        router:router
    })

</script>

6.vue-cli vue-router vue-loader

vue-cli相当于脚手架 给你自动生成模板工程
vue-router是 vue路由插件 支持你单页应用的
vue-loader是webpack加载器，webpack下loader插件 可以把.vue文件转换为js模块

7.vue-loader

vue-loader是webpack加载器，webpack下loader插件 可以把.vue文件转换为js模块,这其中最最值得关注的是，它生成了 render function 
coderender function code 是从模板编译而来（可以并且应该预编译）的组件核心渲染方法，在每一次组件的 Render 过程中，通过注入的数据执行可生成虚拟 Dom
<template>
    ...
</template>
<script>
    ...
</script>
<style>
    ...
</style>

8.vue-draggable 插件拖拽

npm install vuedraggable -D
// 引入拖拽插件
import Draggable from 'vuedraggable'
挂载组件
components: {
    Draggable
  },
应用组件
    <draggable v-model="tags" :move="getdata" @update="datadragEnd">
      <h3>是什么爱国讲述了过了我个我</h3>
      <transition-group>
        <div v-for="element in tags" :key="element.id">拖啊拖啊他拖他就哦啊图爱过几个；啊 {{element.name}}</div>
      </transition-group>
    </draggable>

9.v-touch 插件移动端触摸拖拽

下载cnpm install vue-touch@next   
	@next 下一个版本号，不写的话下载的是vue1.0的，写上下载1.0的下一个2.0
实例化
let vueTouch = require('vue-touch')
Vue.use(vueTouch, {name: 'v-touch'})

<!-- tab渲染一个标签，默认渲染div panright向右滑动-->
如果需要绑定多个 滑动，就直接写
<v-touch  tag="div" v-on:panright="moveRight" v-on:panleft="moveLeft"></v-touch>

moveRight 和moveLeft 是定义的一个方法，在methods中写



因为vue-touch其实封装了 hammer.js的方法 其实我们这里介绍的也就是他几个事件；详情可以搜索 hammer.js的文档;
hammer.js主要针对触屏的6大事件进行监听。如下图所示：

1、  Pan事件：在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理：

Panstart：拖动开始、Panmove：拖动过程、Panend：拖动结束、Pancancel：拖动取消、Panleft：向左拖动、Panright：向右拖动、Panup：向上拖动、Pandown：向下拖动

2、  Pinch事件：在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件。该事件事以分别对以下事件进行监听并处理：

Pinchstart：多点触控开始、Pinchmove：多点触控过程、Pinchend：多点触控结束、Pinchcancel：多点触控取消、Pinchin：多点触控时两手指距离越来越近、Pinchout：多点触控时两手指距离越来越远

3、  Press事件：在指定的dom区域内触屏版本的点击事件，这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理：

Pressup：点击事件离开时触发

4、  Rotate事件：在指定的dom区域内，当两个手指或更多手指成圆型旋转时触发（就像两个手指拧螺丝一样）。该事件分别对以下事件进行监听并处理：

Rotatestart：旋转开始、Rotatemove：旋转过程、Rotateend：旋转结束、Rotatecancel：旋转取消

5、  Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。

Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动

6、Tap事件：在指定的dom区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

10.vue 获取DOM元素ref

vue中获取DOM元素，不用像原生js那么麻烦
<div ref="recommend"></div> 在HTML中定义的时候需要写ref,才能调用
在script中调用
// 通过在html标签内写的ref来获取DOM,recommend需要和html中的ref的值对应
let nav = this.$refs.recommend

11.

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中

意思就是：用<keep-alive></keep-alive>包裹我们在vue项目中创建的组件，可以做到切换无刷新，保留缓存


当组件在 keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 

include - 字符串或正则表达式。只有匹配的组件会被缓存。 
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

12.访问的接口跨域解决方法

在npm官网下载jsonp 利用jsonp来解决跨域，


想要获取服务器数据：
1. 百度的页面请求百度服务器，直接ajax请求
2. 百度的页面跨域请求其他（贴吧，音乐等）数据中的三种方法
	一种是：贴吧，音乐服务器允许百度页面直接请求，服务器端设置权限（这样可以直接通过ajax跨域请求数据）
	一种是：通过jsonp，这得服务器配合使用
	一种是：通过代理，让服务器模拟浏览器请求（本质是欺骗服务器）

13. 路由间数据传递

app.vue 父级
	 <router-link to="/tab/5572a109b3cdc86cf39001e3">热点</router-link>
	 <router-view></router-view>
router--index.js
	routes: [
  		path: '/tab/:num',
  		name: 'tab',
  		component: Tab
	]
调用数据
tab.vue 子级
	this.$route.params.num
	路由监听事件
	$route(a,b) {console.log(a,b)} // 返回两个对象
	

14.exact

exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组件，exact能够使得路由的匹配更严格一些。

15.props父子间组件传递

15.1 父===》子

父级
<show :showList="showid"></show>

<script>
data () {
    return {
      showid: '传的参'
    }
  }
</script>

子级
<script>
	props: ['showList']
</script>
调用 {{showList}}  便可打印

动态调用
watch: {
    // 检测showList是否发生变化
    showList () {
      console.log(this.showList)
    }
  }

15.2 子===》父

子组件
在一个方法里写，比如单击按钮写
this.$emit('listenToChildEvent', false)

父组件
<show v-on:listenToChildEvent="showChild"></show>
<script>
 methods: {
    showChild (data) {
      console.log(data) 便拿到到了子组件里的数据
    }
}
</script>

16.打包apk

vue打包
1.运行生产模式	npm run build
  如果出现Built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.
   因为vue-cli的默认配置中, publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:
    cd dist
	npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了.
	hs