Vue.js的一些基本语法知识汇总

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
    1.创建Vue对象
    new Vue({
        el:'id选择器',
    })
    注：el是Vue的保留字，用来指定实例化的DOM的ID号

    使用v-html 用于输出html代码
    如:<div v-html = "message"></div>
    2. 数据绑定
        VUE这个框架的数据流向是单向的
        这个双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式出现的
       <div id="myVue">
            {{ message}}
       </div>
       <script>
                new Vue({
                    var myVue = new Vue({
                        data:{
                            myVue: "Hello World !"
                        }    
                    })
                })
       </script>
       data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔
       如果想绑定某个HTML标签的属性值，就要用到v-bind:属性
       v-bind:后面写想要绑定的属性，my_hidden也不需要用两个大括号括起来了，直接写就可以了，然后在VUE实例中声明这个绑定数据
       如：<div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div>
       new Vue({
            data:{
                my_data: "test",
                my_hidden: "hidden"
            }
       })
      v-bind: 可以写成缩写 :hidden
      
    3.事件绑定
     v-on: 主要用来绑定事件 
     如：v-on: click
     new Vue({
        el:"",
        data:{},
        methods:{
            事件名:function(){
                this.my_data = "world"
            }
        }
     })
     简写:  @click ="clickBtn"
    4.表单控件绑定
      v-model 通过两步实现了数据反向传递，
      第一步：绑定DOM标签的input事件
      第二步：当用户进行输入时候，触发tapinput() 函数，函数内部读取此DOM标签的Value值，赋值给vue实例
     
    5.渲染列表
    <li v-for="arr in array">
        {{ arr.msg}}
    </li>
    <span v-if="ok"></span>
    data:{ ok:true }
    6.过滤器（自定义过滤器）
    如：  {{ message | capitalize }}
    filters:{
        capitalize:function(value){
            if(!value) return ''
            value = value.toString()
            //document.write(value)
            return value.charAt(0).toUpperCase()+value.slice(1,8)
        }
    }
    过滤器还可以进行串联：{{ msg | filterA | filterB }} 
    过滤器是 JavaScript 函数，因此可以接受参数：
    {{ message | filterA('arg1', arg2) }}
    message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
      
    二、Vue.js 条件与循环
    格式：
          v-if="ok===true"
          v-else-if="ok == true "
          v-else-if="ok == true"
          v-else

    三、循环输出  v-for
    如：
    1.    <template v-for =" name in Names">
            {{ name.键名 }}
        </template>
    2. 通过一个对象的属性来迭代数据：
        <template v-for="value in object">
            {{ value }}
        </template>
    3.    提供第二个的参数为键名：
        <template v-for="(value,key) in object">
            {{key}} : {{value}}
        </template>
    4.    第三个参数为索引：
        <template v-for="(value,key,index) in arr">
            {{index}}:{{key}}:{{ value}}
        </template>
    四、计算属性
        关键词：computed
    五、监听属性  watch
        可以通过 watch 来响应数据的变化。
    六、样式绑定
        1. v-bind:hidden = "{ hidden}"
        2. v-bind:class = "{ className:classname}"
        3. v-bind:style ="{ color:active,fontSize:fontSize+'px'}"
        data:{
            hidden:true,
            classname: 'active',
            active: '#000000',
            fontSize: 20,
        }
    七、事件
    事件修饰符（.）
        .stop
        .prevent
        .capture
        .self
        .once
        <!-- 阻止单击事件冒泡 -->
        <a v-on:click.stop="doThis"></a>
        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>
        <!-- 修饰符可以串联  -->
        <a v-on:click.stop.prevent="doThat"></a>
        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>
        <!-- 添加事件侦听器时使用事件捕获模式 -->
        <div v-on:click.capture="doThis">...</div>
        <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
        <div v-on:click.self="doThat">...</div>

        <!-- click 事件只能点击一次，2.1.4版本新增 -->
        <a v-on:click.once="doThis"></a>
    按键修饰符
        v-on:keyup.13 = "submit"
        记住按键缩写：
           @keyup.enter = 'submit'
        全部的按键别名：
            .enter
            .tab
            .delete (捕获 "删除" 和 "退格" 键)
            .esc
            .space
            .up
            .down
            .left
            .right
            .ctrl
            .alt
            .shift
            .meta
    实例：
        <p><!-- Alt + C -->
        <input @keyup.alt.67="clear">
        <!-- Ctrl + Click -->
        <div @click.ctrl="doSomething">Do something</div>
    八、表单
       1. 复选框
       2. 单选按钮
       3.修饰符
          (1) .lazy
         在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
        <!-- 在 "change" 而不是 "input" 事件中更新 -->
        <input v-model.lazy="msg" >
         (2)  .number
           自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
        <input v-model.number="age" type="number">
         (3)  .trim
         自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
        <input v-model.trim="msg">     
    九、组件
        1.全局组件
            组件（Component）是 Vue.js 最强大的功能之一。
            组件可以扩展 HTML 元素，封装可重用的代码。
            全局组件语法格式：    Vue.component(tagName, options)
            说明：tagName为组件名，options为配置选项
            使用以下方式来调用组件：<tagName></tagName>
            如：Vue.conponent('user',{
                    template: "<span>自定义组件</span>"
            })
        2.Prop  
            是父组件用来传递数据的一个自定义属性
        3.动态Prop
            注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
        4.prop验证
           prop 是一个对象而不是字符串数组时，它包含验证要求：
           如：
           Vue.component('example', {
                  props: {
                    // 基础类型检测 （`null` 意思是任何类型都可以）
                    propA: Number,
                    // 多种类型
                    propB: [String, Number],
                    // 必传且是字符串
                    propC: {
                      type: String,
                      required: true
                    },
                    // 数字，有默认值
                    propD: {
                      type: Number,
                      default: 100
                    },
                    // 数组／对象的默认值应当由一个工厂函数返回
                    propE: {
                      type: Object,
                      default: function () {
                        return { message: 'hello' }
                      }
                    },
                    // 自定义验证函数
                    propF: {
                      validator: function (value) {
                        return value > 10
                      }
                    }
                  }
            })
        type 可以是下面原生构造器：
                String
                Number
                Boolean
                Function
                Object
                Array
    5.自定义事件
        父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

        我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

        使用 $on(eventName) 监听事件
        使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
在组件当中，data并不是一个对象，必须是一个函数
    十、自定义指令
      1.自定义指令
         注册一个全局自定义指令 v-focus
         如： Vue.directive('focus',{
            //当绑定元素插入到 DOM中
            inserted :function(el){
                el.focus()
            }
         })
        
        局部：
            directive:{
                focus:{
                    inserted:function(el){
                        el.focus()
                    }
                }
            }
        2.钩子函数
            bind :  只调用一次，指定绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
            inserted ： 被绑定元素插入到父节点时调用（发节点存在即可调用，不必存在于document中）
            update：被绑定元素所在的膜版更新时调用，而不论绑定值是否变化。
            componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
            unbind：只调用一次，指令与元素解绑时调用。
            
           钩子函数参数
                el:指令所绑定的元素
                binding：一个对象。
                       name：指令名，不包括v-前缀
                       value : 指令的绑定值
                       oldValue: 指令绑定的前一个值
                       expression: 绑定值的表达式或变量名
                       arg: 传给指令的参数。
                       modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
                vnode: Vue编译生成的虚拟节点
                oldValue:上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
    有的时候不需要用到钩子函数，简写如下格式：
    如： Vue.directive('runoob',function(el,binding){
                el.style.backgroundColor = binding.value.color
            })
十、路由
    <router-link>是组件，该组件用于设置一个导航链接，切换不同HTML内容，to属性为目标地址，即要显示的内容