VUE基本语法1-插值属性绑定

.1 插值绑定

插值绑定是Vue中最常见、最基本的语法，绑定的内容主要有文本插值和HTML插值两种

文本插值

在这里插入图片描述

文本插值的方式十分简单，只要用双大括号（Mustache语法）将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来。下面一段代码演示了文本插值的基本用法：

<style>
       .profile {
     
     
         display: inline-block;
         width: 300px;
       }
     </style>
     <div id="app" style="margin-left: 300px;">
       <h2>文本插值</h2>
       <p><label class="pro file">变量：</label> {
   
   { num }}</p>
       <p><label class="pro file">表达式：</label> {
   
   { 5 + 10 }}</p>
       <p><label class="pro file">三目运算符：</label> {
   
   { true ? 15 : 10  }}</p>
       <p><label class="pro file">函数：</label> {
   
   { getNum() }}</p>
       <p><label class="pro file">匿名函数：</label> {
   
   { (() => 5 + 10)() }}</p>
       <p><label class="pro file">对象：</label> {
   
   { {num: 15} }}</p>
       <p><label class="pro file">函数对象：</label> {
   
   { getNum }}</p>
       <p><label class="pro file">html代码（表达式）:</label> {
   
   { '<span>15</span>'
     }}</p>
       <p><label class="pro file">html代码（变量）:</label> {
   
   { html }}</p>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.
     js"></script>
     <script type="text/javascript">
       let vm = new Vue({
     
     
         el: '#app',
         data () {
     
     
            return {
     
     
              num: 15,
              html: '<span>15</span>'
            }
         },
         methods: {
     
     
            getNum () {
     
     
              return this.num
            }
         }
       })
     </script>

“html代码（表达式）”和“html代码（变量）”的差异：虽然两者绑定的内容是一样的，但是对于前者来说，Vue优先解释了DOM节点span，并隔离了“{ {”和“}}”，所以插值语法并没有生效，“{ {”和“}}”还被当作了p节点的文本内容。可以看到，无论是变量、表达式、执行函数还是DOM代码，**Vue都只将结果当作文本处理。**另外，如果插值绑定的内容是变量或与变量有关，当变量的值改变时，视图也会同步更新。

HTML插值

HTML插值可以动态渲染DOM节点，常用于处理开发者无可预知和难以控制的DOM结构，如渲染用户随意书写的文档结构等，这在一些论坛和博客平台上可以看到，下面来看一段相关代码

<body>
<style>
    .align-center {
     
     
        text-align: center;
    }
</style>
<div id="app" style="width: 800px;margin: 0 auto;">
    <div>{
   
   { blog }}</div>
    <hr>
    <div v-html="blog"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">

</script>
<script type="text/javascript">
    let vm = new Vue({
     
     
        el: '#app',
        data () {
     
     
            return {
     
     
                blog: `<h2 class="align-center">一对"兄弟"</h2>

                 <div class="align-center">
        <img src="ra.png">
                 </div>
                 <p>你看他们多像一对兄弟啊，虽然是一只呆呆兔和一只傻傻猫蹲在了一起，但谁又能说他们不是兄弟呢？</p >`
            }
         }
       })
     </script>
</body>

在这里插入图片描述

文本插值中的代码被解释为节点的文本内容，而HTML插值中的代码则被渲染为视图节点。实际上，HTML插值是对文本插值的补充和拓展，Vue可以解析被绑定的内容为DOM节点，从而实现动态渲染视图的效果。不过Vue本身就支持模板，开发者在使用HTML插值时应秉承以下原则：
●尽量多地使用Vue自身的模板机制，减少对HTML插值的使用；
●只对可信内容使用HTML插值；
●绝不相信用户输入的数据。

.2 属性绑定

除了文本之外，DOM节点还有其他一些重要的属性，那么Vue是如何绑定这些属性的呢？

指令v-bind

DOM节点的属性基本都可以用指令v-bind进行绑定，代码如下：

 <style>
       .italic {
     
      font-style: italic; }
     </style>
     <div id="app" style="margin-left: 300px;">
       <p v-bind:class="className" v-bind:title="title">危险勿触</p >
       <button v-bind:disabled="10 + 10 === 20">点击有奖</button>
       <input v-bind:type="'text'" v-bind::placeholder="true ? '请输入' : '
     请录入'">
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
     <script type="text/javascript">
       let vm = new Vue({
     
     
         el: '#app',
         data () {
     
     
            return {
     
     
              className: 'italic',
              title: '危险勿触'
            }
         }
       })
     </script>

在这里插入图片描述

类名和样式绑定

由于类名class和样式style在节点属性中是两个比较奇怪的存在（虽然他们可接收的类型都是字符串，但类名实际上是由数组拼接而成，而样式则是由对象键值对拼接而成的），所以Vue在绑定类名和样式时也采用不一样的机制。 我们可以通过字符串、数组和对象三种方式为节点动态绑定类名属性，代码如下：

   <style>
       .color-gray {
     
      color: gray; }
       .size-18 {
     
      font-size: 18px; }
       .style-italic {
     
      font-style: italic; }
     </style>
     <div id="app">
            <p class="color-gray size-18 style-italic">过好每一天，
    </p >
       <p :class="classStr">《Vue2.0》，</p >
       <p :class="classArr">《Vue2.0》，</p >
       <p :class="classObj1">《Vue2.0 》，</p >
       <p :class="classObj2">《Vue2.0》，</p >
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.
     js"></script>
     <script type="text/javascript">
       let vm = new Vue({
     
     
         el: '#app',
         data () {
     
     
            return {
     
     
              classStr: 'color-gray size-18 style-italic',  // 拼接字符串
              classArr: ['color-gray', 'size-18', 'style-italic'],  // 数组
              classObj1: {
     
       // 对象，绑定类名
                 'color-gray': true,
                 'size-18': true,
                 'style-italic': true
              },
              classObj2: {
     
       // 对象，未绑定类名
                 'color-gray': 0,
                 'size-18': '',
                 'style-italic': false
              }
                          }
         }
       })
     </script>

在这里插入图片描述
三种方式绑定类名的效果是一致的，但由于classObj2中的键值全部被判定为假，所以类名并未被绑定到对应节点上。
绑定样式的方式与类名相似，不过样式是以键值对的形式，所以不能像类名一样使用数组进行绑定，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <p style="color: brown;font-size: 22px;font-style: italic;">2021</p >
    <p :style="styleStr">2021</p >
    <p :style="styleObj1">2021</p >
    <p :style="styleObj2">2021</p >
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
    let vm = new Vue({
     
     
        el: '#app',
        data () {
     
     
            return {
     
     
                styleStr: 'color: gray;font-size: 18px;font-style: italic;',  // 拼接字符串
                styleObj1: {
     
       // 对象，绑定样式
                    'color': -1 ? 'gray' : 'black',
                    'font-size': '18px',
                    'font-style': 'italic'
                },
                styleObj2: {
     
       // 对象，未绑定样式
                        'color': 0 ? 'gray' : '',
                        'font-size': '' ? '30px' : '',
                    'font-style': null ? 'italic' : ''
                }
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述
类名绑定和样式绑定，实质上都是由JS来决定采用哪种样式表渲染视图。在实际开发中，它的应用场景十分广泛，比如需要针对不同的数据类型采用不同的渲染策略时（如数值小于0时，字体颜色使用红色）、视图状态可发生有限种类切换时（如下拉菜单展开时，控制按钮箭头向上；收缩时，旋转按钮180°使箭头向下）或者辅助CSS媒体查询进行响应式布局时（如卡片，在PC和Pad端占据20%~33%的宽度，在手机端占据100%的宽度）等。

3 事件绑定

事件系统是前端开发中非常重要的内容，Vue也对其进行了封装和拓展，使之变得更加简单易用。

指令v-on

Vue使用v-on指令监听DOM事件，开发者可以将事件代码通过v-on指令绑定到DOM节点上，基本使用方法如下：

  <div id="app">
       <button v-on:click="logInfo()">打印消息(default: Hello World)</button>
       <br>
       <button v-on:click="logInfo('Self Message')">打印消息(Self Message)</
     button>
       <br>
       <button v-on:click="console.log('A Vue App')">打印消息(A Vue App)</
     button>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">
     </script>
<script type="text/javascript">
       let vm = new Vue({
     
     
         el: '#app',
         methods: {
     
     
            logInfo (msg) {
     
     
              console.log(msg || 'Hello World')
            }
         }
       })
     </script>

在这里插入图片描述

Vue也为v-on提供了一种简写形式@，代码如下：

 <button @click="logInfo()">打印消息(default: Hello World)</button>

有时候，我们在处理事件时也会用到事件对象本身，那么应该怎样获取事件对象呢？代码如下：

 <div id="app">
       <!-- 1. 在事件函数不必传参时，可以这样写，注意：不能带() -->
       <input type="text" @keyup="handleKeyUp">
       <br>
       <!-- 2. 手动传入$event对象 -->
       <input type="text" @keyup="handleKeyUp($event)">
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
     <script type="text/javascript">
       let vm = new Vue({
     
     
         el: '#app',
         methods: {
     
     
            handleKeyUp (event) {
     
     
              console.log(event.key, event)
            }
         }
       })
     </script>

实际上，写法的不同只是为了避免混淆和冲突，事件绑定的主要作用在于降低学习和开发的成本
： ●解决了不同浏览器之间的兼容问题；
●提供了语法糖——事件绑定修饰符。

常见修饰符

event.preventDefault（）（阻止节点默认行为）和event.stopPropagation（）（阻止事件冒泡）是处理DOM事件时很常见的方法，Vue将其封装成简短易用的事件修饰符，可以后缀于事件名称之后。
在这里插入图片描述
下面演示prevent修饰符在表单提交时的表现，先来看不使用修饰符时的情况，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style type="text/css">
    body{
     
     
        color: brown;font-size: 22px;font-style: italic;
        margin-left: 600px;
        margin-top: 60px;
    }
</style>
</head>
<body>
<div id="app">
    <form @submit="handleSubmit">
        <h2>不使用修饰符时</h2>
        <button type="submit">提交</button>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
    let vm = new Vue({
     
     
        el: '#app',
        data () {
     
     
            return {
     
     
                counter: 0
            }
        },
        methods: {
     
     
            handleSubmit () {
     
     
                console.log(`submit ${
       
       ++this.counter} times`)
            }
        }
    })
</script>
        }
</body>
</html>

在这里插入图片描述
这是因为当未指定form表单的action时，表单会被提交到当前的URL，对应的表现就是页面被重新加载。
使用修饰符：

     <form @submit.prevent="handleSubmit">
       <h2>使用．prevent修饰符时</h2>
       <button type="submit">提交</button>
     </form>

在这里插入图片描述
当事件后缀多个修饰符时，要注意修饰符的排列顺序，相应的代码会根据排列顺序依次产生。比如，在使用@click.prevent.self时，Vue先执行了event.preventDefault（），因此会阻止元素上的所有点击事件；而在使用@click.self.prevent时，由于先为事件配置了self选项，所以只会阻止对元素自身的点击。

对于键盘事件，Vue允许将按键键值作为修饰符来使用，如监听回车键（键值13）是否被按下，可以这么写：
<input type=“text” @keyup.13=“console.log($event)”>
此外，Vue还为一些常用按键配置了别名，
在这里插入图片描述

使用按键别名，我们无须记住按键的键值即可实现对特定按键的监听事件，如监听回车键还可以这么写：
<input type=“text” @keyup.enter=“console.log($event)”>

组合修饰符

有时候，我们需要按住多键或者鼠标与键盘共用以实现某些操作（如在网页上实现像QQ聊天中按住Ctrl + Enter发送消息的功能、实现按住ctrl后使用鼠标左键点选多个文件的功能等），Vue为此提供了组合修饰符的机制，不过其必须配合系统按键修饰符方可生效，
在这里插入图片描述

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style type="text/css">
    body{
     
     
        color: brown;font-size: 22px;font-style: italic;
        margin-left: 600px;
        margin-top: 60px;
    }
</style>
</head>
<body>
<div id="app">

    <p @click.ctrl="logWithCtrl" @click="logSingle">没有ctrl别来点我</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
    let vm = new Vue({
     
     
        el: '#app',
        methods: {
     
     
            logSingle (event) {
     
     
                if (!event.ctrlKey) {
     
     
                    console.log('------------- 分割线 -------------')
                    console.log('$event.ctrlKey:', event.ctrlKey)
                    console.log('点我干啥，单身汪！')
                } else {
     
     
                    console.log('不错，进步很快呀！')
                }
            },
            logWithCtrl (event) {
     
     
                console.log('------------- 分割线 -------------')
                console.log('$event.ctrlKey:', event.ctrlKey)
                console.log('按住，是的，按住Ctrl！')
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述
先用鼠标点击节点，此时事件对象的ctrlKey值为false，控制台只打印了鼠标点击事件的信息；然后按住Ctrl键再次点击节点，此时事件对象的ctrlKey值为true，控制台先打印了鼠标点击事件的信息，之后打印了组合事件的信息。