vue基础知识（一）

1. Vue框架
    【Vue是一个核心注重视图开发的渐进式的框架，更加侧重于配置式的从底层向上层开发的流程】
    为什么要选择使用Vue框架
    它有什么样的特性
2. 数据绑定
    Vue的双向数据绑定是什么意思？
    为什么说Vue的双向数据绑定是[语法糖]？v-model只是模拟双向绑定，是v-bind和v-on的语法糖,通过绑定绑定INPUT事件来更新对应对象的值。


    绑定数据的三种方式
1：普通文本绑定：mustach语法【双大括号】：使用v-text绑定【常用】
2：解释HTML标签的绑定，使用v-html绑定【慎用】
2.1注意：除非是信任的内容使用这样的方式进行数据绑定
2.2这样的绑定方式，如果内容不是被信任的，有可能会造成XSS攻击
3：将数据绑定到标签的属性上，使用v-bind：属性名称："变量"来绑定【常用】

3. 内置指令
    什么是指令？


    常见内置指令：
v-text:渲染普通文本[自己练习]
v-html：渲染为浏览器解释的html内容[自己练习]
v-show: 用于定义元素的显示/隐藏
v-if: 判断
v-else: 判断
v-else-if: 判断
v-for：循环
v-on：参考JQuery on---绑定事件
v-bind：绑定数据到属性[自己练习]
v-model:数据双向绑定【表单元素】
v-pre:
v-cloak:确保mastach语法，在渲染完成之后显示到页面上。[使用并不是很多，通常会用v-text进行替换]
v-once: 数据只绑定一次


    这些指令常见的使用方式【认识指令，并会使用指令】
    扩展：可以在官方文档中，阅读以下自定义指令
4. 过滤器
    什么是过滤器？有什么作用？
过滤器：主要针对展示的数据进行格式化处理的
    Vue1.x中的常见内置过滤器
完全参照了angular中的过滤器，并且都做了实现
    Vue2.x中的过滤器
自定义过滤器


    Vue2.x中为什么废弃了1.x中的内置过滤器？鸡肋。。。
5. 缩写
    Vue提供了两种缩写
  有什么作用(优点)？
      缩写语法：Vue针对经常频繁使用的两个指令进行简化处理，并且预期以后会出现更多的缩写语法
        属性绑定的缩写： v-bind:属性名称  ==   :属性名称
        事件绑定的缩写： v-on:事件名称 == @事件名称


        缩写的好处和缺点：
        好处：简化开发，让技术人员在开发的过程中，对于频繁操作的指令进行了简化处理，提高了工作效率
             简化开发的好处2：让技术人员在开发项目的过程中，更多的关注业09务处理，而不是技术本身
       缺点！【如果缩写出现更多的其他方式的时候，可能会造成的困扰】
6. Vue实例
    Vue实例有什么作用？
Vue应用运行的入口是Vue实例
        el:是Vue实例运行的入口元素[这个选项是可选的，如果不配置的话，需要加上$mount()来选择入口元素]
        template：实例模板【很少使用，要理解是什么意思，会操作】
          作用：直接用template定义的模板替换选中的入口元素
           
     /*第一种方式，通过el选项，指定入口元素*/
   /*
   var vm = new Vue({
       el:"#app",
       data:{
           msg:"数据测试"
       }
   });*/
   /*第二种方式，通过$mount()函数指定入口元素*/
   /*var vm = new Vue({
       data:{
           msg:"数据测试"
       }
   });
   vm.$mount("#app");
   */
   6.1. 常见选项
   var vm = new Vue({
        el:         入口元素
        template:   模板
        data:       数据
        filters:    过滤器
        methods:    方法函数
        computed:   计算属性
        watch:      观察属性
        directives: 自定义指令
        components: 自定义组件
   })
   6.2 常见属性
   this.$el         获取实例的入口元素
   this.$data       获取实例的数据
   this.$parent     获取实例的父实例
   this.$root       获取实例的根实例
   this.$children   获取实例的子实例/组件