vue - 基本用法

一、常用指令

1.什么是常用指令

用来扩展html标签的功能

2.vue中常用的指令

• v-mode
  双向数据的绑定，一般用于表单元素
• v-for
  对数组或对象进行循环操作
• v-on
  用来把绑定事件，用法：v-on:事件名 = 函数
• v-show / v-if
  用来显示或隐藏元素，v-show是通过display实现，v-if是每次都删掉元素再重新创建
• v-bind
  用来给元素绑定行内样式：
  普通方式：v-bind:href=“url”
  简写方式：:href=“url”>
  字符串拼接：:href="‘www.mermr.top’ + url"

二、事件和属性

1.事件

1.1事件简写

v-on:click=""
简写方式：@click=""

1.2获取事件对象:$event

包含事件相关信息，如事件源，事件类型，偏移量等等
target,type,offsetx ...

    <a href="#" @click="fn($event)"></a>
js部分：function fn(e){
            console.log(e.target)
        }

1.3 事件冒泡：

阻止事件冒泡
    1).原生js依赖于event对象，方法：event.stopPropagation();
    2).vue不依赖event对象，直接在事件名后面加修饰符.stop
        <a href="javascript:;" @click.stop="fn">

事件捕获：

事件捕获，先执行捕获的事件，再执行冒泡
        <a href="javascript:;" @click.capture="fn">

忽略事件冒泡、捕获

关于.stop和.self的区别，前者是防止事件冒泡，后者则是忽略了事件冒泡和事件捕获的影响。只有直接作用在 该元素上的事件才会被调用，因为它看起来 与.stop好像有一点像，但其实他们作用的对象不同。

1.4 事件默认行为

阻止默认行为
    1).原生js依赖event对象，方法：event.preventDefault();
    2).vue不依赖event对象，直接在事件名后面加修饰符：.prevent
        <a href="javascript:;" @click.prevent="fn">

1.5 键盘事件

事件名：@keydown, @keypress, @keyup
1).原生js依赖event对象，需要判断event.keyCode
2).vue不依赖event对象，直接在事件名后面加（按回车为例）：数字方式(.13)，别名方式（.enter）
    <a href="javascript:;" @keydown.13="fn">
    <a href="javascript:;" @keydown.enter="fn">
3).默认没有@keydown.a/b/c/...事件，但是可以自定义键盘事件，也称为自定义键码或自定义键位别名;
    例如：
    <input type="text" @keydown.f1="show">
    Vue.config.keyCodes = {
        a:65,
        f1:112
    }

1.6 常用事件修饰符

.stop() // 阻止事件冒泡，调用原生的event.stopPropagation();
.prevent // 阻止默认事件，调用原生的event.preventDefault();
.once // 只触发一次事件
.native // 监听组件根元素的原生事件
.{keyCode | keyAlias} // 只当事件是从特定键触发时才触发回调

2.属性

2.1 属性绑定和属性的简写

v-bind: 可以绑定html中的行内属性
    <img src="{{imgUrl}}" />    // 错误的做法
    <img v-bind:src="imgUrl" />         // 可以直接访问到vue中的属性，不需要加 {{}} ；
v-bind:src="" 简写方式为 - :src
    <img :src="imgUrl" />

2.2 class和style属性

绑定class和style属性时愈发比较复杂
1).class属性
    ------css部分------
    .red{color:#f00;}
    .bg{background-color:#ccc;}
    ------vue部分------
    data:{
        redSty:red,
        bgSty:bg
    }
    方式1：变量形式 - <p :class="redSty">方式1：变量形式</p>
    方式2：多个变量数组形式 - <p :class="[redSty, bgSty]">方式2：多个变量数组形式</p>
    方式3：json方式 - <p :class="{red:true, bg:false}">方式3：json方式</p>

2).style属性
    ------vue部分------
    data:{
        styJson:{
            color:"blue",
            fontSize:"30px"
        },
        styJsonBg:{
            backgroundColor:"red"
        }
    }
    方式1：单个json方式 - <p :style="styJson">方式1：单个json方式</p>
    方式2：多个json，数组传入方式 - <p :style="[styJson, styJsonBg]>方式2：多个json，数组传入方式</p>

三、模版

1.简介

vue.js使用基于HTML的模版语法，可以将DOM绑定到vue实例中的数据
模版就是：{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法

2.数据绑定的方式

1).双向绑定
    v-model + {{}}

2).单向绑定
    方式1：使用两对大括号{{}},可能会出现闪烁的问题，可以使用v-cloak解决，需配合css样式一起使用
    ------css部分------
    [v-cloak]{
        display:none
    }
    ------vue部分------
    <p v-cloak>{{msg}}</p>

    方式2：使用v-text 和 v-html
        ------vue部分------
        data:{
            msg:"哈哈<span>,呵呵</span>";
        }
        <p v-text=“msg”></p>        // 输出：哈哈<span>,呵呵</span>
        <p v-html=“msg”></p>        // 输出：哈哈,呵呵

    总结：v-text 无法识别字符串内 html标签
         v-html 可以识别字符串内 html标签
3).其他绑定
    msg:"这里是数据内容";

    v-once      // 数据只绑定一次， 写法：只需要把v-once写入标签内，数据还是用{{}}渲染
    <p v-once>{{msg}}</p>       // 输出：这里是数据内容

    v-pre       // 不编译，写入什么就显示什么
    <p v-pre>{{msg}}</p>        // 输出：{{msg}}