vue2 基础指令、事件修饰符

vue2 基础指令、事件修饰符
Vue.js是一套构建用户界面的渐进式框架。不仅易于上手，还便于与第三方库或既有项目整合。最重要的是在Vue中，核心的概念就是响应式，让程序员可以更多的时间去关注业务逻辑；

既我们再js中操作修改数据等等，页面自动渲染更新
```
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="box">
        // 视图
    div>
body>
html>
<script src="./js/vue-2.4.0.js">script>
<script>
let vue = new Vue({ // vue 实例
    el:'#box', // 控制的视图id
    data:{  // 数据
    },
    methods:{} // 事件
})
script>
```
插值表达式、v-text、v-html、v-mode

插值表达式供我们再html代码中直接访问在vue定义好data 语法{{}}；

后两者和js 的innerText innerHtml 一致替换元素中的内容，html后缀的能解析富文本，语法和普通指令一致如下

最后的 v-model 是数据实现双向绑定既在js中操作数据页面中的数据会变，修改页面中的数据js中定义的数据也会一起改变，故称双向
```
// html
"box">
    <div>插值表达式{{msg}}div>
    <div v-text="'v-text文本'">0000div>
    <div v-html="'v-html文本
'">0000div>
    <input type="text" v-model="msg"> // 双向绑定
div>
// vue
data:{
    msg:'插值表达式'
},
```
注：使用v-text和v-html时命令所在的标签一定是双标签

现在不太直观，可以先试试下面的例子

v-show、v-if v-else

v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。从而让页面不会闪烁
```
// vue
data:{
    msg:'1111111'
}
```
网络慢速时显示的网页会是: 插值表达式{{msg}} 闪烁后=》插值表达式1111111
```
// style
[v-cloak]{
    display: none;
}
// html
"box">
    <div>插值表达式{{msg}}div>
```
// 不加
//
// 插值表达式{{msg}}
//

v-bind

上面是动态的内容的使用，现在介绍动态属性

v-bind:属性 简写为 :属性


// style
.pink{
    color: pink;
}
.big{
    font-size: 50px;
}
// html
class='cl1'>这是一行字
<button :title="nihao">悬浮鼠标展示titlebutton>
<input type="text" v-bind:value="message">
// vue
 
data: {
    message: 'Hello Vue!',
    nihao:'你好世界',
    cl1:['big','pink']
}

v-on

绑定methods事件：v-on:事件名="表达式||函数名" 简写为 @事件名="表达式"

直观的比较详细的例子：


// html
'box'>
    <button v-on:click='addNum'>点击num减一button>
    {{num}}

// vue

let vue=new Vue({

el:'#box',

data:{

num: 100

},

methods:{

addNum(isAdd) {

            isAdd === 'add' ? this.num++ : this.num--

},

}

})

在这里就体现了vue的响应式数据，当我们点击按钮修改定义在data中的数据时，页面中相应的值也会一起变化

v-show、v-if v-else

控制元素的显示，但是有一定区别：

v-if都是对元素进行插入和移除的操作 可理解为直接注释掉了标签，等条件满足时再解开
v-show是显示与否的问题 使用了display：none

结合一下上面知识点的的例子


// html
'box'>
    <div v-if="num">{{num}}div>
    <div v-else>num隐式转换后为falsediv>
    <div v-show="num>10">大于10了div>
    <button v-on:click='addNum'>点击num减一button>
    <input type="text" v-model="num">
    <button @click="addNum('add')">点击num加一button>
div>
// vue
let vue=new Vue({
    el:'#box',
    data:{
        num: 0
    },
    methods:{
        addNum(isAdd) {
            isAdd === 'add' ? this.num++ : this.num--
        },
    }
})

注： v-if 判断num默认是 0 ，但是当我们输入 0 的时候，num 将会是字符创 0 ，而不是数字。

v-for

可以理解为在html中使用for循环渲染数据


// 渲染 100内的数字
for="num in 100" :key="num">{{num}}
// 遍历渲染 对象
<div v-for="(value,key,index) in obj" :key='index'>{{value}}---{{key}}---{{index}}div>
// 遍历渲染 数组
<div v-for="(item,index) in arr" :key='index'>{{item}}---{{index}}div>
 
// vue
data:{
    arr:[
        {age:12,name:'小张'},
        {age:20,name:'张三'},
        {age:50,name:'老张'}
    ],
    obj:{age:12,name:'小张',sex:'male',height:180}
}

可以看到我们可以使用 v-for 遍历数据让数据按照模板渲染出来，配合 v-if v-bind 等等，将会更加灵活。

注：在使用 v-for 时一定注意我们循环渲染标签一定要在标签中设置 :key 这个key相当于标签的id必须唯一，用于vue跟踪数据，最好也不要使用index作为key。

事件修饰符

这项比较简单但是非常的好用，便捷；语法在事件后之间 + . + 修饰符即可

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

除了事件修饰符 vue 还提供了其他的键盘修饰符，鼠标修饰符等等

如果想深入了解某一项,请访问vue官方网站 =》 vue2

插值表达式、v-text、v-html、v-mode

v-html文本

v-cloak

v-bind

v-on

v-show、v-if v-else

v-for

事件修饰符