vue学习二(渲染、绑定元素特性、v-if、v-for、v-on、v-model、事件修饰)

本文链接：https://blog.csdn.net/u013210620/article/details/82856165

文章目录

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app_1">
        {{ message }}
    </div>

    <script type="text/javascript">
        // 1.{{ }}文本插值
        var app_1 = new Vue({
            el: '#app_1',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
  </body>
</html>

浏览器渲染为：

Hello Vue!

绑定元素特性(v-bind:title=“message”)

     <div id="app_2">
          <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
          </span>
     </div>
        
    <script type="text/javascript">
        
            // 2.v-bind 绑定元素特性(属性)
            // 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
            var app_2 = new Vue({
                el: '#app_2',
                data: {
                    message: '绑定元素特性 Vue!'
                }
            })
        
   </script>

效果图：
在这里插入图片描述

v-if(过渡效果)

  <div id="app_3">
            <p v-if="seener">你现在看到我的了</p>
   </div>
        
  <script type="text/javascript">
        // 3.v-if 控制切换一个元素是否显示也相当简单
        var app_3 = new Vue({
            el: "#app_3",
            data: {
                seener: true
            }
        })
    
 </script>

v-for

 		<div id="app_4">
            <ol>
                <li v-for="li in lis">
                    {{ li.msg }}
                </li>
            </ol>
        </div>
        
        <script type="text/javascript">
                //4.v-for
            var app_4 = new Vue({
                el: "#app_4",
                data: {
                    lis: [{msg: "java"}, {msg: "python"}, {msg: "go"}]
                }
            })
        </script>

浏览器输出

1、java
2、python
3、go

v-on监听(v-on:click)

 		<div id="app_5">
            <p>{{ msg }}</p>
            <button v-on:click="reverse_msg">反转消息</button>
        </div>
        
        <!-- /Vue// -->
        <script type="text/javascript">
            // 5.v-on 处理用户输入
            var app_5 = new Vue({
                el: "#app_5",
                data: {
                    msg: "hello vue.js"
                },
                methods: {
                    reverse_msg: function () {
                        this.msg = "hello vue"
                    }
                }
            })
        
        </script>

v-model(双向绑定)

双向绑定

  <div id="app-6">
                <p>{{ message }}</p>
                <input v-model="message">
  </div>

<script>
      var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

事件修饰符

<body>
  <div id="app">

    <!-- 1使用  .stop  阻止冒泡 -->
    <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div>

    <!--2 使用 .prevent 阻止默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

    <!-- 3使用  .capture 实现捕获触发事件的机制 -->
    <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div>

    <!-- 4使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
    <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div>

    <!-- 5使用 .once 只触发一次事件处理函数 -->
    <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>


    <!-- 6演示： .stop 和 .self 的区别 -->
    <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div>

    <!--7 .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
    <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div>

  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler() {
          console.log('这是触发了 inner div 的点击事件')
        },
        btnHandler() {
          console.log('这是触发了 btn 按钮 的点击事件')
        },
        linkClick() {
          console.log('触发了连接的点击事件')
        },
        div2Handler() {
          console.log('这是触发了 outer div 的点击事件')
        }
      }
    });
  </script>
</body>

 <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }

    .outer {
      padding: 40px;
      background-color: red;
    }
  </style>

先看第一种情况：
点击button：

这是触发了 btn 按钮 的点击事件

点击外div

这是触发了 inner div 的点击事件

看第二种情况：

触发了连接的点击事件

看第三种情况：

点击button：

这是触发了 inner div 的点击事件
这是触发了 btn 按钮 的点击事件

点击外div

这是触发了 inner div 的点击事件

看第四种情况：
点击button：

这是触发了 btn 按钮 的点击事件
这是触发了 inner div 的点击事件

点击外div

这是触发了 inner div 的点击事件

看第五种情况：

触发了连接的点击事件

看第六种情况：
点击button：

这是触发了 btn 按钮 的点击事件

点击外div

这是触发了 inner div 的点击事件
这是触发了 outer div 的点击事件

点击最外层div

这是触发了 outer div 的点击事件

看第七种情况：
点击button：

这是触发了 btn 按钮 的点击事件
这是触发了 outer div 的点击事件

点击外div

这是触发了 inner div 的点击事件
这是触发了 outer div 的点击事件

点击最外层div

这是触发了 outer div 的点击事件