Vue.js框架入门之指令(二）

teng28

已于 2022-02-24 15:49:12 修改

阅读量465

点赞数

分类专栏： Vue.js 文章标签： vue

于 2020-05-31 14:21:02 首次发布

本文链接：https://blog.csdn.net/weixin_43359799/article/details/106453035

版权

Vue.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Vue.js框架入门之指令(二）

Vue.js为了让我们脱离对DOM的操作，Vue.js给我们封装了许多指令让我们可以进行相关操作。Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值表达式

文本

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

<div id="app">
  <p>{{ message }}</p>
</div>

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>
这个将不会改变: {{ msg }}
</span>

HTML

使用 v-html 指令用于输出 html 代码：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

JavaScript表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

<p>{{ number + 1 }}</p> //叠加
 
<p>{{ ok ? 'YES' : 'NO' }}</p> //三目运算符
 
<p>{{ message.split('').reverse().join('') }}</p> //反写

指令

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：
下面代码块对应这接下来几个指令的Vue实例

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
        mytitle: '这是一个自己定义的title'
      },
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })
  </script>

v-cloak

HTML 绑定 Vue实例，在页面加载时会闪烁。v-cloak可以解决这个问题。

    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
    <p v-cloak>++++++++ {{ msg }} ----------</p>

网页显示效果
在这里插入图片描述

v-text

v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。

<h4 v-text="msg">==================</h4>

在这里插入图片描述
明显可以看出h4中的内容被msg的内容所覆盖了。

v-html

v-html与v-text的用法和效果相似，不过v-html可以解析标签

<div v-html="msg2">1212112</div>

在这里插入图片描述
总结：

v-text和{{}}表达式渲染数据，不解析标签。

v-html不仅可以渲染数据，而且可以解析标签。

v-bind

v-bind 主要用于动态绑定 DOM 元素属性(attribute)，即元素属性实际的值是由 vm 实例中的 data 属性提供的。

v-bind的三种用法

直接使用指令v-bind
使用简化指令（最常用的）:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

v-bind指令用于设置HTML属性(数据和元素属性)
v-bind:href 缩写为 :href

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});

<div class="app">
    <a v-bind:href="url">click me</a>
</div>

注意：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。
当我们在控制台改变url时，对应也会变化。
相同的，我们还可以绑定图片src属性、超链接的class

v-on

v-on 指令用于绑定HTML事件(操作和方法）
v-on:click 缩写为 @click

 <div id="app">
        <p v-if="show">这是一段文本</p>
        <button v-on:click="handleClose">点击隐藏</button>
    </div>

 <script>
   <script>

        var app = new Vue ({
            el: '#app',
            data: {
                show: true
            },
            methods: {
                handleClose: function () {
                    this.show = false;
                }
            }
        })

    </script>

事件修饰符

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

.prevent的用法

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

</div>

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        
        linkClick() {
          console.log('触发了连接的点击事件')
        }
       }
      
    });
  </script>

此时点击该链接，系统就不会默认跳转到该链接中。

v-model

使用v-model可以实现双向数据绑定，从而简化了之前用原生js所写的代码。

v-model是一个指令，限制在input、checkbox、select、textarea、components等控件中使用
举个例子

<div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" style="width:100%;" v-model="msg">
  </div>

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
      },
      methods: {
      }
    });
  </script>