Vue基础语法

概念

指令

• v-bind：
  数据绑定（一般用于绑定标签属性）v-bind:src=" “，
  绑定的属性是动态参数时，需要用方括号括起来 v-bind[attr]=” "。
  缩写：v-bind:title === :title

• v-model：
  数据双向绑定，和input、textarea、select等表单搭配使用

• v-show：
  显示/隐藏元素

• v-if：
  条件渲染，插入/移除元素

• v-else/v-else-if：
  必须紧跟在v-if或者v-else-if后面，否则将不会被识别

• v-for：
  列表渲染，遍历数组或对象（使用时要给每一项绑定一个key属性，key为字符串或数值类型）

<li v-for="item in list" :key="item.value">

</li>

• v-on：
  事件绑定，缩写：v-on:click === @click

• v-once：
  一次性地插值，当数据改变时，插值处的内容不会更新。

  <span v-once>This will never change: {
      { msg }}</span>
  

• v-text：类似于插值表达式，填充纯文本内容

<span v-text='msg'></span>
<span>{
  { msg }}</span>

• v-html：
  识别并解析html代码，而不是直接输出字符串<h2>...</h2>

• v-pre：vue不进行编译，显示原始信息。例如以下代码输出为 { { msg }}

<span v-pre>{
  { msg }}</span>

• v-cloak：解决插值表达式渲染成功前显示双括号的问题。

定义全局指令

Vue.directive('focus',{
   
    bind: function(el, binding){
   
    //当指令绑定到元素上时执行bind函数，只执行一次
    //和样式相关的操作，一般写在这里
        el.style.color='red';
    },
    inserted: function(el){
   
    //元素插入到Dom中时执行inserted函数，只执行一次
    //与JS相关的操作，一般在这里执行，防止JS行为不生效
        el.focus();
    },
    update: function(el){
   
    //当VNode更新时执行updated函数，可能会触发多次
        
    }
})

• 指令名称
  • 第一个参数为指令名称，定义时名称不需要加v-前缀，调用时必须加“v-”前缀。 <input v-focus>
  • 自定义的指令名称不接受驼峰命名法，要么全部小写字母，要么用“-”把单词隔开。
  • 定义局部指令时，如果使用了连接符，指令名称需要用引号括起来。
• 第二个参数是一个对象，这个对象提供几个钩子函数，可以在特定的阶段执行相关的操作。
  • 第二个参数对象中的钩子函数中，第一个参数永远是“el”，表示被绑定了指令的那个元素，这个el是一个原生的JS对象。
  • 钩子函数的binding参数是一个对象，包含以下属性：
    • binding.name 指令名，不包含“v-”前缀
    • binding.value 指令的绑定值(计算过后的)，如v-focus="1+1"，value为 2；v-focus="'blue'"，value为 blue。
    • binding.expression 字符串形式的指令表达式，如v-focus="1+1"，expression为 1+1；v-focus="'blue'"，value为 ‘blue’。即：双引号里边的表内容以字符串形式原样输出。
  • 如果只想在 bind和update 时执行操作，可以简写为

    Vue.directive('name', function(el, binding){
    
    })
    

定义局部指令

var vm = new Vue({
   
    el: '#app',
    data: {
   
        
    },
    methods:{
   
        
    },
    directives:{
   
        name1:{
   
            bind: function(){
   
                
            }
        },
        'name2':{
   
            inserted: function(){
   
                
            }
        },
        
        //函数简写
        name3: function(){
   
            
        }
    }
})

---

过滤器

Vue可以自定义过滤器，用于文本格式化。过滤器只能用在双花括号插值和v-bind表达式中。在表达式尾部用管道符 | 指示。

{
  {msg | filterName}}

<div :id="id | filterName"></div>

全局过滤器

Vue.filter('filterName', function(msg){
   
    <!--回调函数的第一个参数永远是管道符前边要处理的数据-->
    <!--❗️过滤器名称要加引号-->
    <!--对 msg 进行处理，返回处理后的结果-->
})

var vm = new Vue({
   
})

私有过滤器

var vm = new Vue({
   
    el: '#app',
    data: {
   
        
    },
    methods:{
   
        
    },
    filters:{
   
        filterName(data, param1, param2...){
   
            <!--第一个参数为要处理的数据-->
            <!--当全局过滤器和私有过滤器命名相同时，❗️优先调用私有过滤器-->
        }
    }
})

---

特性

ref

类似于id，<div ref="box"></div>，通过 this.$refs.box 可以获取这个dom元素或子组件。

<div id="app">
    <v-header ref="header"></v-header>
</div>

父组件可以通过 this.$refs.header.属性/方法名 获取子组件 header 的属性和方法。

⚠️ id不可以重复，但ref可以重复，当页面中有多个同样的的ref时， this.$refs[refName] 是一个数组，可以通过索引值 this.$refs[refName][index] 来获取元素或组件。

key

在组件中使用v-for时，必须给每一项绑定一个key属性

<div v-for="item in list" :key="string|number"></div>

slot

在子组件中使用 标签为子组件添加一个插槽，在父组件中使用子组件时，child-component 标签中的内容会替换子组件中的 slot 标签以及其中的内容。

父组件

<child-component>
    这里的内容将替换子组件中的 slot 标签。
</child-component>

子组件 child-component.vue

<template>
    <div class="default">
        <slot>如果没有插入内容，我将作为默认内容出现。</slot>
    </div>
</template>

最终的渲染结果为：

<div class="default">
    这里的内容将替换子组件中的 slot 标签。
</div>

具名插槽
子组件的 slot 标签可以添加一个 name 属性，在向具名插槽提供内容时，可以使用一个带有 v-slot 的 template 标签。

没有指定 name 的 slot 默认为 default。

任何没有包裹在带有 v-slot 的 template 标签中的内容，都将被视为默认插槽的内容。

父组件

<layout>
    <template v-slot="header">
        <h1>头部</h1>
    </template>
    <p>正文</p>
    <template v-slot="footer">
        <div>底部</div>
    </template>
</layout>

子组件 layout.vue

<template>
    <div class="container">
        <slot name="header">Header</slot>
        
        <slot>Body</slot>
        
        <slot name="footer">Footer</slot>
    </div>
</template>

最终渲染的结果：

<div class="container">
    <h1>头部</h1>
    <p>正文</p>
    <div>底部</div>
</div>

事件修饰符

.stop： 阻止冒泡

<div @click="父盒子的点击事件">
    <button @click.stop="子元素的点击事件">按钮</button>
</div>

.prevent： 阻止元素的默认行为，比如a标签的跳转链接，form的submit事件

<a href="www.baidu.com" @click.prevent="a标签的点击事件">a链接</a>

.capture： 使用捕获模式(与冒泡相反)触发事件，先触发父盒子的点击事件，后触子元素的

<div @click.capture="父盒子的点击事件">
    <button @click="子元素的点击事件">按钮</button>
</div>

.self：
只有点击元素本身时，才触发事件。因此即使点击父元素包裹的按钮，也不会触发父元素的事件

<div @click.self="父盒子的点击事件">
    <button @click="子元素的点击事件">按钮</button>
</div>

.once：
只触发一次事件处理函数

按键修饰符

Vue允许v-on在监听键盘事件时添加按键修饰符

<input @keyup.enter="submit">
<!--只有在key是enter时 触发submit事件-->

Vue内置的按键码

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

自定义按键修饰符别名

Vue.config.keyCodes.f1 = 112

Vue.config.keyCodes = {
    f1: 112,
    f2: 113
}

---

构造器

构造一个Vue实例

var vm = new vue({
   
    el: '#app',
    //render属性的值是一个函数，这个函数返回一个虚拟节点（VNode），并且替换掉 el 指定的那个容器。
    //参数 createElement 是一个方法，这个方法的返回值也是一个 VNode。
    render:<