Vue前端从入门到精通（二）

Vue的介绍：
    核心概念：组件化 双向数据流(基于ES5中的defineProperty来实现的)，IE9及以上才支持
    angular核心：模块化 双向数据绑定(脏检测：一个数组($watch)，性能不如Vue)
        开发一个登陆的模块，登陆需要显示的头部、底部、中部
        组件：组合起来的一个部件(头部、底部、中部)
        细分代码：
            头部：页面、样式、动态效果
            代码：template、script、style
数据流：
    js内存属性发生改变，影响页面的变化
    页面的改变影响js内存属性的改变
常用指令：
    *v-text是元素的innerText只能在双标签中使用
    *v-html是元素的innerHTML，不能包含{{xxx}}
    *v-if元素是否移除或者插入
    *v-show元素是否显示或者隐藏
    *v-model双向数据绑定
    *v-bind单向绑定数据(js内存改变影响页面)
class结合v-bind使用：
    需要根据可变的表达式的结果来给class赋值，就需要用到v-bind:class="xxx"
//class 取一个 返回一个字符串
//取多个 返回一个对象
//一个学生列表 每个人都有成绩AB，根据当前学生的成绩匹配显示不同的颜色
//A-red B-green
    取多个情况的时候，通过遍历，根据当前对象的成绩，匹配成绩和样式的清单对象，用成绩做key，取对象的value，最终返回字符串做样式名
v-bind:属性名="表达式"，最终表达式运算结果赋值给该属性名
    简化的写法：:属性名="表达式"
class：结果的分类
    一个样式：返回字符串(三元表达式的key和样式的清单对象)
    多个样式：返回对象(样式做key，true或false做值)
绑定事件的方法：
    methods和v-on的使用
    v-on:事件名="表达式||函数名"
        简写：@事件名="表达式||属性名"
    函数名如果没有参数，可以省略() 只给一个函数名称
    在export default这个对象的根属性加上methods属性，其是一个对象
        key 是函数名 值是函数体
    在export default这个对象的根属性加上data属性，其是一个函数，返回一个对象
        对象属性是我们初始化的变量的名称
    凡是在template中使用变量或者函数，不需要加this
    在script中使用就需要加this
v-for的使用
    可以使用操作数组(item,index)
    可以使用操作对象(value,key,index)
    不仅可以拿到元素而且可以拿到索引，:key="index"
    key 是类似于trank by 的一个属性
        为的是告诉vue，js中的元素，与页面之间的关联，当视图删除元素的时候，
        是单个元素的删除而不是整版替换，所以需要关联其关系，设置(必须，性能) 2.xxx之后必须设置 
父子组件使用(父传子)
    父和子，使用的是父，被用的是子
    父需要声明子组件，引入子组件对象，声明方式如下：
        import 子组件对象 from './xxx.vue'
        {
            components:{
                组件名:子组件对象
            }
        }
    全局组件，使用更加方便，不需要声明，直接用
    在main.js中引入一次，在main.js中使用vue.component('组件名',组件对象)
    所有的组件就可以直接通过组件名，直接使用
    1、父组件通过子组件的属性将值进行传递
        方式有2
            常量：prop1="常量值"
            变量： :prop2="变量名"
    2、子组件需要声明
        根属性props:['prop1','prop2']
        在页面中直接使用{{prop1/prop2
        在js中应该如何使用prop1？this.prop1获取
看文档的对象分类
    1、全局的代表Vue.的
    2、实例的代表this.或者new Vue().
    3、选项代表new Vue()的参数
        或者export default里边的属性
子组件向父组件通信vuebus
    通过new Vue()这样的一个对象，来$on('事件名',function(prop1,prop2))
    另一个组件引入同一个vuebus，来$emit('事件名',prop1,prop2)
vue单文件方式xxx.vue
    1、准备好配置文件 package.json(包描述文件&&封装命令 npm run dev)+webpack.config.js文件(打包的配置文件)
    2、创建index.html(单页应用的页)
    3、创建main.js(入口文件)
    4、引入vue和相关的文件xxx.vue
    5、new Vue(options)
    6、options(选项)：
        data
        methods
        components(组件内声明子组件)
        props
    7、实例：
        在组件内(xxx.vue)中的this
        new Vue()
        事件
            +this.$on(事件名,回调函数(参数))
            +this.$emit(事件名,数据)
            +this.$once(事件名,回调函数(参数))
            +this.$off(事件名);取消事件
    8、全局
        Vue.component('组件名',组件对象)在哪里都可以使用
    9、组件之间的传值：
        父传子：属性作为参数
            常量 title="xxx" 子组件声明接收参数props:['xxx']
            变量 title="num" 子组件声明接收参数props:['xxx']
        子传父：vuebus(只能同一辆车)
            先停车到父组件，on一下
            再开车到子组件，如果需要的话，emit一下，触发上述时间的回调函数
过滤器：
    content | 过滤器，vue中没有提供相关的内置过滤器，可以自定义过滤器
    组件内的过滤器 + 全局过滤器
        组件内的过滤器就是options中的一个filters的属性(一个对象)
        多个key就是不同过滤器名，多个value就是与key对应的过滤方式函数体
        Vue.filter(名,fn)
获取DOM元素
    前端框架就是为了减少DOM操作，但是特定的情况下，也给你留了后门
    在指定的元素上，添加ref="名称"
    在获取的地方加入this.$refs.名称
        如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象
            可以直接操作
        如果ref放在了组件对象上，获取的就是组件对象
            获取到DOM对象，通过this.$refs.sub.$el，进行操作
        对应的事件
            created
                组件创建后，数据已经完成初始化，但是DOM还未生成，无法操作DOM
            mounted
                数据装载后，各种数据已经就位，将数据渲染到DOM上，DOM已经生成，可以操作DOM
wappalyzer
    获取当前网站的使用的技术
Vue.use
    1、组件库，在内部注册了各种全局组件
    2、插件，挂载属性，为了方便this.可以使用到其功能
做项目的时候保证包的大小，按需引入
meta:vp适配屏幕 视口
    使用对象的时候要引入变量，在js部分所有的变量都是模块作用域
    如果需要使用就必须引入
如果是全部安装的方式：
    1、在template中可以直接使用组件标签
    2、在script中必须要声明，也就是引入组件对象(按需加载)
vue-router
    前端路由 核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
    ui-router:锚点值改变，如何获取模板？ajax
    vue中，模板数据不是通过ajax请求来，而是调用函数获取到模板内容
    核心就是锚点值的改变
    以后看到vue开头就知道必须Vue.use()
    vue的核心插件：
        vue-router路由
        vuex 管理全局共享数据
    使用方式
        1、下载npm i vue-router -S
        2、在main.js中引入import VueRouter from 'vue-router';
        3、安装插件Vue.use(插件)Vue.use(VueRouter);
        4、通过创建路由对象并配置路由规则
            let router = new VueRouter({
                routes:[
                //一个个对象
                    {path:'/HelloWorld',component:HelloWorld}
                ]
            });
        5、将其路由对象传递给Vue的实例，options中
            在options中加入router:router,
        6、在app.vue中留坑
基于webpack的编译
    核心，最终理解打包的好处，关注vue的代码怎么写