Vue.js 基本语法

绝地灬酷狼 2022-03-18 02:38 204阅读 0赞

### 文章目录 ###

*   *  Vue之 - \`基本的代码结构\`和\`插值表达式\`
 *  Vue之 \`v-cloak\`
 *   *  Vue指令之\`v-text\`和\`v-html\`
     *  Vue指令之\`v-bind\`的三种用法
     *  Vue指令之\`v-on\`
     *   *  跑马灯效果
     *  Vue指令之\`v-on的缩写\`和\`事件修饰符\`
     *   *  使用\`.stop\` 阻止冒泡
         *  使用\`.capture\` 实现捕获触发事件的机制
         *  使用 \`.prevent \`阻止默认行为
         *  使用 \`.self\` 实现只有点击当前元素时候，才会触发事件处理函数
         *  \`.stop\` 和 \`.self\` 的区别
         *  使用\`.once\` 只触发一次事件处理函数
     *  源代码

## Vue之 - `基本的代码结构`和`插值表达式` ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]

# Vue之 `v-cloak` #

我们把加载vue.js放在插值表达式之后，打开网页就可以看到闪烁出现来\{ \{ msg \}\}

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <div id="app">
    
        <p>++++++++ {
       { msg }} ----------</p>
      </div>
    
    
      <script src="./lib/vue-2.4.0.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
    
          }
        })
    
      </script>
    </body>
    
    </html>

然后我们可以打开浏览器的开发者模式，选择disable cache和选择shlow 3G 可以看到效果更加明显。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]

使用v-cloak

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        [v-cloak] {
           display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        
        <p v-cloak>++++++++ {
       { msg }} ----------</p>
      </div>
    
    
      <script src="./lib/vue-2.4.0.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
          }
        })
    
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 4]

## Vue指令之`v-text`和`v-html` ##

默认 v-text 和v-html是没有闪烁问题的  
v-text和v-html会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        [v-cloak] {
          /* display: none; */
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        
        <p v-cloak>++++++++ {
       { msg }} ----------</p>
        <h4 v-text="msg">==================</h4>
        
        
    
        <div>{
       {msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2">1212112</div>
      </div>
    
    
      <script src="./lib/vue-2.4.0.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
          }
        })
        
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 6]

## Vue指令之`v-bind`的三种用法 ##

v-bind: 是 Vue中，提供的用于绑定属性的指令

1.  直接使用指令`v-bind`
2.  使用简化指令`:`
3.  在绑定的时候，拼接绑定内容：`:title="btnTitle + ', 这是追加的内容'"`

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        [v-cloak] {
          /* display: none; */
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        
        <p v-cloak>++++++++ {
       { msg }} ----------</p>
        <h4 v-text="msg">==================</h4>
        
        
    
        <div>{
       {msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2">1212112</div>
    
         
         <input type="button" value="按钮" v-bind:title="mytitle + '123'">
         
         
        
    
      </div>
    
    
      <script src="./lib/vue-2.4.0.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
            mytitle: '这是一个自己定义的title'
          }
        })
    
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 7]

## Vue指令之`v-on` ##

Vue 中提供了 v-on: 事件绑定机制，不需要我们操作dom获取元素绑定事件。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        [v-cloak] {
          /* display: none; */
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        
        <p v-cloak>++++++++ {
       { msg }} ----------</p>
        <h4 v-text="msg">==================</h4>
        
        
    
        <div>{
       {msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2">1212112</div>
    
        
        
        
        
    
        
        
    
    
        <input type="button" value="按钮" @click="show">
      </div>
    
    
      <script src="./lib/vue-2.4.0.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
            mytitle: '这是一个自己定义的title'
          },
          methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
            show: function () {
              alert('Hello')
            }
          }
        })
    
    
        /* document.getElementById('btn').onclick = function(){
          alert('Hello')
        } */
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 8]

### 跑马灯效果 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      
      <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
    
        <h4>{
       { msg }}</h4>
    
      </div>
    
      <script>
        // 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '猥琐发育，别浪~~！',
            intervalId: null // 在data上定义 定时器Id
          },
          methods: {
            lang() {
              // console.log(this.msg)
              // 获取到头的第一个字符
              // this
    
              if (this.intervalId != null) return;
    
              this.intervalId = setInterval(() => {
                var start = this.msg.substring(0, 1)
                // 获取到 后面的所有字符
                var end = this.msg.substring(1)
                // 重新拼接得到新的字符串，并赋值给 this.msg
                this.msg = end + start
              }, 400)
    
              // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
            },
            stop() { // 停止定时器
              clearInterval(this.intervalId)
              // 每当清除了定时器之后，需要重新把 intervalId 置为 null
              this.intervalId = null;
            }
          }
        })
    
    
        // 分析：
        // 1. 给 【浪起来】 按钮，绑定一个点击事件   v-on   @
        // 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；
        // 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 9]

## Vue指令之`v-on的缩写`和`事件修饰符` ##

### 使用`.stop` 阻止冒泡 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 10]  
我们点击里面的戳他按钮，我们可以看到打印了两句，但是如果我们只想要触发btn按钮的时间，该怎么做？

我们可以使用`.stop`来阻止冒泡。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 11]

### 使用`.capture` 实现捕获触发事件的机制 ###

因为事件冒泡，所以我们可以看到前面的点击按钮的时候触发事件的顺序是从里面到外面的，但是如果我们想要的是先触发外面再触发里面的该怎么做。我们可以使用`.capture` 实现捕获触发事件的机制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 12]

### 使用 `.prevent`阻止默认行为 ###

接下来我们来看看如何阻止默认行为，比如我们使用 `<a href="http://www.baidu.com"></a>`链接到百度，然后我们给他添加一个click事件，默认行为就是会打印并弹出百度页面，但是我们想要的是只触发点击事件，取消掉默认的弹出页面的行为。所以我们可以使用`.prevent`来阻止默认行为。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 13]

### 使用 `.self` 实现只有点击当前元素时候，才会触发事件处理函数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 14]  
这样看起来使用`.self`也是可以阻止冒泡的，那么使用`.stop` 和使用`self`之间有什么区别呢？

### `.stop` 和 `.self` 的区别 ###

可以看到我们点击了按钮，阻止了冒泡，只有答触发了按钮的事件。![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 15][]

然后我们再来看看使用`.self`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 16]  
可以看到`.self` 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

### 使用`.once` 只触发一次事件处理函数 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 17]

可以看到效果只有第一次点的时候阻止了默认行为，第二次点击就会弹出百度的页面。

## 源代码 ##

[查看l][l]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220318/6c6f64b2003648f3a7722da5cee8a933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]: /images/20220318/111b55be7ade4a7387d777672cfa745c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]: /images/20220318/ab31cadcd9fe4b07916e74932c50cd09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]: /images/20220318/cb0f20a8615344e2a795b3ee9af594d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 4]: /images/20220318/a114a93dffb942ecba6082255e3463ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 5]: /images/20220318/5c8227ec434b4a81a612e427955bc73e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 6]: /images/20220318/33a9434daa59499b8db8fc5c0ad91b77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 7]: /images/20220318/3d8c29754b0a43b8adcd593edde03996.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 8]: /images/20220318/1bfa10e403a842afad60972785f175ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 9]: /images/20220318/c9e6dd12fed945bfa8713853989d94eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 10]: /images/20220318/7d59037fbe144b7da3e7c784f7a4c271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 11]: /images/20220318/7407badf430b4e3c86773036314918ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 12]: /images/20220318/0a7f0e9aa99b4eb98d1d6d05d9fb2e7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 13]: /images/20220318/f8f8eade82eb4409b7614332a43d3603.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 14]: /images/20220318/afc5fa47cba24bda88a0360e9ad343e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 15]: /images/20220318/81d0997ba5874a03986bac02181deb73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 16]: /images/20220318/4d8ce36cfa9a46b79b2aa1c819f5daa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 17]: /images/20220318/b72ed5b5b52b47f1b1426641f27af26d.png
[l]: https://gitee.com/cckevincyh/VueDemo/tree/master/day01