vue指令篇

vue基础篇

vue的使用

使用vue的步骤：

• 01：首先先实例化一个vue对象
• 02：然后传入参数(对象），传入的对象里面常用的配置有
  • el —用于挂载要渲染的视图（也就是html）
  • data —用于要挂载渲染视图中的数据
• 03：创建视图 例如
• 04：使用插值表达式，来显示数据

注意点：vue对象中的数据绑定到视图的时候，可以实现实时更新！

• eg：在控制台中输入app.name = “?” —查看视图的变化（无刷新哦）
  注意点2：写在data里面的数据，其实都是vue实例对象的属性。
  注意点3：data中的数据，需要在methods访问的时候，需要使用this.属性名
  注意点4：在data之中，可以存放一些共享的数据，这样我们可以在任何地方都可以直接使用，使用的时候，直接this.属性名来访问这些共享的数据
  比如简单计数器的操作符，或者节流阀中的flag状态，或者定时器的名字！

  <div id="app">
    <h1>{{name}} - {{age}}</h1>
  </div>

  <script>
    let vm = new Vue({
      el: "#app",
      data: {
        name: "lala",
        age: "19"
      }
    })
  </script>

MVVM模型

MVVM:
05:MVVM设计思想：

• M(Model)—就是数据（data之中的数据）
• V（View）—就是视图（简单来说就是html）
• VM（View-Model）—实现控制逻辑（把它们两个关联在一起，
  第一：DOMListeners事件监听：从view视图监听Model的数据（表单value值发生改变事件，从而影响数据）
  第二：Data Bingdings:从Model数据绑定来绑定视图）（
  【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：
  一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
  二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
  这两个方向都实现的，我们称之为数据的双向绑定。

指令篇

vue指令是什么？

在vue之中以v-来表示是属于vue框架的属性（所谓指令就是一个vue的属性），v-属性名=“具体表达式”
所谓表达式：最简单的表达式就是声明一个变量并且为这个变量初始值，更为复杂的表达式则涉及逻辑等运算，这就不一一列举了！

vue指令的作用？

就是绑定属性，实现数据的动态，当表达式对应的值发生变化后，将响应式的作用于Dom，从而影响视图层。

v-text指令

• 运用：在一个标签使用

• 作用：用于在视图中显示数据，文本等等！
• 解释：v- vue的属性 text 为文本 结合起来就是 v-text 绑定一个文本属性指令，右边为赋值的表达式！

  <div id="app">
    // 在视图之中，最后显示的是 我是消息
    <p v-text="msg"></p> 
  </div>

  <script src="../vue.js"></script>
  <script>
    let data = {
      msg: "我是消息"
    }
    const vm = new Vue({
      el: "#app",
      data
    })
  </script>

{{}}插值表达式和v-text指令的区别

• {{}}插值表达式：在双大括号里面，可以写任何合法的JS表达式
  • 比如简单的运算 {{10 + 10}} {{10 + “lala”}}

    {{flag?“我是真”:“我是假”}}

  • 缺点：网络差的时候，会显示{{}}，也就是内容闪烁问题 解决这个问题，就是需要给使用插值表达式的标签，
    添加一个v-cloak指令
  • 插值表达式里面，不会替换掉标签里面的内容
• v-text:指令
  • v-text指令，不存在内容闪烁问题
  • 指令会替换掉，书写在标签中间的内容

    123

    其中123会被msg这个表达式替换掉！

v-cloak指令

• 作用：就是来解决{{}}刷新的时候，显示{{}}和内容
• 特点：就是当{{}}里面的内容渲染完毕后，vue会自动移除这个指令

    [v-cloak] { //这是样式
      display: none;
    }

  <div id="app">
    <p v-text="msg"></p>
    <p v-cloak>{{msg + "lala"}}</p>
    <p v-cloak>{{flag?"我是真":"我是假"}}</p>
  </div>

    <script>
    let data = {
      msg: "我是消息",
      flag: true
    }
    const vm = new Vue({
      el: "#app",
      data
    })
  </script>

v-html指令

• 作用：就是用来渲染html标签的！
• 缺点：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。
  只在可信内容上使用 v-html，永不用在用户提交的内容上。

<div id="app">
    <p>{{msg2}}</p>
    <p v-text="msg2"></p>
    //唯独这个 v-html绑定的标签，不存在外面的h2标签
    <p v-html="msg2"></p>
  </div>

  <script src="../vue.js"></script>
  <script>
    let data = {
      msg: "我是消息",
      msg2: "<h2>我是小标题</h2>"
    }
    const vm = new Vue({
      el: "#app",
      data
    })
  </script>

v-bind指令 语法糖形式 => :属性=“数据（变量名）”

• vue-bind可以给元素的属性绑定一些数据（这些数据，都是以变量的形式存在，若是需要拼接字符串的话，则需要添加 ‘’)
• 作用：就是v-bind:属性=“表达式” ,就是把这个属性托管于vue，vue中查询到后面的表达式时候，把它当做变量去自身的data查找数据，这样可以实现响应式更新这个属性后面的表达式（数据）！
• 其实可以将v-bind理解为： 被v-bind修饰的都是动态获取的值。 而非被v-bind修饰的，仅仅是一个字符串

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-on指令 语法糖形式 @事件类型 =“事件处理函数”

• 语法： v-on:事件类型=“事件处理函数变量名”
• 作用：v-on指令，用来绑定事件 ，而这事件处理函数，需要定义在data中methods之中
  在methods的定义方式为 事件处理函数的变量名:function(){ }
  或者使用ES6中对象的简写方式 => 事件处理函数的变量名(){}
• 注意点1：在methods方法里面，需要拿到data中的数据，需要指向vue这个对象实例！
  所以在methods里面中的变量需要添加this，来指向Vue实例对象中data数据！
• 但是值得注意的是，data里面的数据，vue内容已经处理了，挂载在Vue实例对象身上了，
  因此直接使用this.变量名，就可以访问了！
• 注意点2：在 v-on:绑定的事件=“事件处理函数变量名()” 添加() 的话，代表着()里面可以传递参数！

这是不传参数的绑定的事件

 <div id="app">
    <button v-on:click="sub">点击这个按钮，小白就瘦10斤</button>
    <p>小白现在的体重为: {{ weight }} 斤</p>
  </div>

  <script src="../vue.js"></script>
  <script>
    let data = {
      weight: 100
    }
    let methods = {
      sub() {
        if (this.weight <= 80) {
          alert("你已经很瘦了，不需要在瘦了")
        }
        this.weight -= 10;
      }
    }
    const vm = new Vue({
      el: "#app",
      data,
      methods,
    })
  </script>

v-model指令

• 作用：实现数据的双向绑定 为表单值等添加的指令
• 分析：数据双向绑定就是：表单value通过属性的绑定来拿到data的数据，然后通过对表单绑定oninput事件
  来实现表单值的修改的时候，从而修改了data中的数据，也就是修改了显示页面的data！
• 注意点：v-model只能应用在我们表单元素身上！

数据的双向绑定

01：就是通过 Model => View

• 原理：通过数据的改变来修改视图中的数据，就是在浏览器中的控制台，输入vm.? 或者data.？ 修改插值表达式显示的数据
  也就是响应式属性（getter&setter&)
  02:就是通过 View => Model
• 原理：通过视图来修改数据，也就是表单的输入值来修改数据 就是对表单绑定了一个v-model指令（属性）实现数据的双向绑定
  也就是input等事件

v-model的原理：
双向数据绑定—需要添加v-model指令
v-model这个指令是由两个指令组成的，分别为v-bind(绑定单项数据)，v-input(绑定表单的值)

• 原理：
  v-bind:attr — 就是给属性绑定数据(单项)，用于显示数据
  v-on:input=“事件处理函数” —就是给表单添加一个事件，并且处理数据
• 分析：数据双向绑定就是：表单value通过属性的绑定来拿到data的数据，然后通过对表单绑定oninput事件
  来实现表单值的修改的时候，从而修改了data中的数据，也就是修改了显示页面的data！

  /*数据的双向绑定： v-model的原理
    + 01：事件绑定：对表单绑定一个事件，检测表单的值发生变化的时候，就把数据传递到控制层，进而来影响视图
    + 02：属性绑定：就是把表单的值绑定数据，用于显示数据*/
  <div id="app">
    <p>姓名：{{username}}</p>
    <p>年龄：{{age}}</p>
    <input type="text" v-bind:value="age" v-on:input="changeAge">
  </div>

  <script src="../vue.js"></script>
  <script>
    let data = {
      username: "pink",
      age: 20
    }

    const vm = new Vue({
      el: "#app",
      data,
      methods: {
        changeAge: function (e) {
          //e为事件对象，target-当前目标 ---也就是当前目标的值
          data.age = e.target.value;
        }
      }
    })

事件修饰符

• @click.stop=“事件处理函数”
  • 作用：阻住事件冒泡的修饰符
• @link.prevent=“事件处理函数”
  • 作用：阻住a链接的跳转（自动跳转），表单的提交按钮（自动刷新）
• @click.capture=“事件处理函数”
  • 默认的情况下：事件处于冒泡阶段（事件冒泡和捕获只能存在一个）
  • 作用： @click.capture 使得事件处于捕获阶段！ 于是先打印 我是爸爸 然后打印 我是儿子
• @click.once = “事件处理函数”
  • 作用：添加了这个之后，事件只能触发一次
• @click.self=“事件处理函数”
  • 作用：只当事件在改元素本身（比如不是子元素）触发时触发回调

阻住冒泡事件

  <div id="app">
    <div class="father" @click="fatherClick">
      <div class="son" @click.stop="sonClick">
      </div>
    </div>
  </div>

  <script src="../vue.js"></script>
  <script>
    //分析：对父亲和儿子两个盒子绑定相同的事件，存在冒泡事件，点击子元素的时候，会冒泡到父元素！
    //解决冒泡事件： @click.stop= "事件处理函数" 这是给子元素添加的，防止冒泡上去！
    let data = {
      msg1: "父亲",
      msg2: "儿子"
    }
    let methods = {
      fatherClick() {
        alert("我是父亲")
      },
      sonClick() {
        alert("我是儿子")
      }
    }
    const vm = new Vue({
      el: "#app",
      data,
      methods
    })
  </script>

阻住a链接的跳转，或者表单的提交（存在自动刷新）

  <div id="app">
    <a href="http://www.baidu.com" @click.prevent="links">去百度</a>
    <form action="" @click.prevent="postSubmit">
      <input type="text" name="username">
      <input type="text" name="pwd">
      <input type="submit" value="提交按钮">
    </form>
  </div>

  <script src="../vue.js"></script>
  <script>
    let date = {
    }
    let methods = {
      links() {
        console.log("我要去百度"); //原本要跳转到百度的，只不过使用了事件修饰符，就阻住了！
      },
      postSubmit() {
        console.log("表单提交被阻住"); //原本点击会提交，把表单的name属性值当做参数传递过去  阻住后就打印：表单提交被阻住
      }
    }
    const vm = new Vue({
      el: "#app",
      date,
      methods
    })
  </script>

事件捕获

 <div id="app">
    <div class="father" @click.capture="Fclick">
      <div class="son" @click=Sclick></div>
    </div>
  </div>

  <script src="../vue.js"></script>
  <script>
    //默认的情况下：事件处于冒泡阶段（事件冒泡和捕获只能存在一个）
    //添加了 @click.capture 使得事件处于捕获阶段！  于是先打印 我是爸爸 然后打印 我是儿子
    let data = {
      son: "我是儿子",
      father: "我是爸爸"
    }
    let methods = {
      Fclick() {
        console.log(this.father);
      },
      Sclick() {
        console.log(this.son);
      }
    }
    const vm = new Vue({
      el: "#app",
      data,
      methods
    })
  </script>

vue中的样式4种定义方式

第一种：在vue中，使用v-bind为元素绑定数组的 类样式

• 语法： :class="[ 数组里面存放的是变量或者字符串]"
• 解析： 数组元素为变量的时候，则需要在data中定义一个变量，若是字符串的话，则需要’str’

    .red {
      color: red;
    }

    .bg {
      background: yellow;
    }

  <div id="app">
    <h1 :class="['red','bg']">我是一个大标签</h1>
  </div>

      let data = {

    }
    let methods = {}
    const vm = new Vue({
      el: "#app",
      data,
      methods
    })

第二种：在vue中，使用v-bind为元素绑定数组的 以三目运算符控制要显示的类样式

• 语法： :class="[ 数组里面存放的是变量或者字符串]"
• 解析： 数组元素为变量的时候，则需要在data中定义一个变量，若是字符串的话，则需要’str’

    <p>我是使用vue中 v-bind形式为标签绑定一个数组的 类样式（使用三目来控制）！</p>
    <button @click="isShow=true">点击 显示黄色背景</button>
    <h1 :class="['red',isShow?'bg':'']">我是一个大标签</h1>

    let data = {
      isShow: false
    }
    let methods = {}
    const vm = new Vue({
      el: "#app",
      data,
      methods
    })