Vue 简介及内部指令

最新推荐文章于 2022-08-27 15:14:01 发布

DreamFive

最新推荐文章于 2022-08-27 15:14:01 发布

阅读量465

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/gao531162436/article/details/79706340

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-if & v-show & v-else</title>
</head>
<body>
    <h1>v-if 判断是否加载</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好：用户</div>
            <div v-else>请登录后操作</div>
       </div>
       <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                   isLogin:false
                }
            })
       </script>
</body>
</html>

这里我们在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：用户，如果为false时，就显示请登录后操作。

v-show
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
```
<div v-show="isLogin">你好：用户</div>
```
v-if 和v-show的区别：
v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

3、v-for 指令：解决模板循环问题

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

这是一个最基础的循环，先在js里定义了 todos 数组，然后在模板中用 v-fo r循环出来，需要注意的是，你需要那个html标签循环，v-for 就写在那个上边。

4、v-text & v-html

我们已经会在 html 中输出 data 中的值了，我们已经用的是 {{xxx}} ,这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的 v-text,就是解决这个问题的。我们来看代码：

<span>{{ message }}</span>=<span v-text="message"></span><br/>

你会看到两处输出的信息是一样的，针对文本信息我们可以使用 v-text。
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用 v-html 指令。

<span id="app-4" v-html="msgHtml"></span>
var app4 = new Vue({
  el: '#app-4',
  data: {
    msgHtml:'<h1>hello user</h1>'
  }
})

这里面输出的将是 html 代码，而不是标签 h1 中的文本信息。

5、v-on：绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

我们的v-on 还有一种简单的写法，就是用 @ 代替。

6、v-model指令

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

在这个例子中，在 input 输入的数据会立即显示在 p 标签中。数据实现了双向绑定。

7、v-bind 指令

v-bind是处理HTML中的标签属性的，例如

就是一个标签，也是一个标签，我们绑定上的src进行 动态赋值。

<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
</div>
var app=new Vue({
    el:'#app',
    data:{
          imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
     }
})

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。
我们的 v-bind还有一种简单的写法，就是用冒号 ： 代替。

8、其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<div v-pre>{{message}}</div>

这时并不会输出我们的 message 值，而是直接在网页中显示 {{message}} 。

v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
```
[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>
```
v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。像 v-model 这种数据双向绑定就无法改变渲染的值。

DreamFive

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 简介及内部指令

目录目录vue.js 是什么？vue 内部指令1、声明式渲染2、v-if v-else v-show 指令3、v-for 指令：解决模板循环问题4、v-text &amp; v-html5、v-on：绑定事件监听器6、v-model指令7、v-bind 指令8、其他内部指令(v-pre &amp; v-cloak &amp; v-once)v...
复制链接

扫一扫