Hello Vue 及插值操作01 入门

原创已于 2022-05-20 11:58:10 修改 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-05-19 18:54:22 首次发布

本文介绍了Vue.js的基础知识，包括如何使用v-if进行条件渲染，利用v-for进行遍历，通过v-on监听事件变化，使用v-bind绑定属性，以及v-model实现双向数据绑定。此外，还讲解了Mustache语法，如v-once单次渲染，v-html插入HTML内容，v-text更新文本，v-cloak避免闪烁，以及v-pre跳过编译。

第一次了解到vue

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

 <div id="app">{{message}}</div>
    <script src="../vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '你好大家好！！！！'
            }
        })
    </script>

Vue简单的文本插

1.v-if 控制一个元素的显示和消失

控制切换一个元素是否显示也相当简单

 <!-- 让一个元素彻底消失 -->
    <div id="app">
        <p v-if="seen">你好</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    seen: false
                }
            }
        })
    </script>

2. v-for 遍历

   <!-- v-for  for in-->
    <div id="app">
        <ul>
            <li v-for="item in country">{{item}}</li>
        </ul>
    </div>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    country: ['1', '2', '3', '4']
                }
            },
        })
    </script>

3. v-on 监听事件的变化

 <div id="app">

        <!-- v-on是监听 监听事件的变化 -->
        <h1>{{num}}</h1>
        <!-- <button type="button" v-on:click="add">增加</button> -->
        <button type="button" @click="add">增加</button>

    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    num: 1
                }

            },
            methods: {
                add: function() {
                    this.num++
                }
            }
        })
    </script>

4. v-bind 绑定属性

<div id="app">
        <!-- v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind:=>: -->
        <!-- <span v-bind:title="msg">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span> -->
        <span :title="msg"><!-- 语法糖 -->
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    msg: '页面加载于 ' + new Date().toLocaleString()
                }
            }
        })
    </script>

5. v-model 控制文本和变量一致

   <div id="app">
        <h2>{{msg}}</h2>
        <input type="text" v-model="msg">
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    msg: '我们都是很努力的人'
                }
            }
        })
    </script>

Mustache语法

mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。

在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。

  <div id="app">
        <span>{{firstName+lastName}}</span>
        <span>{{firstName+'-'+lastName}}</span>
        <span>{{firstName}}{{lastName}}</span>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    firstName: 'zhang',
                    lastName: 'san',
                    count: 1
                }
            }

        })
    </script>

6.v-once 定义后不可修改

v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。

 <!-- v-once定义后不可更改 -->
    <div id="app">
        <h2 v-once>{{msg}}</h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: '中国'
                }
            }
        })
    </script>

7 v-html

在某些时候我们不希望直接输出<a href='http://www.baidu.com'>百度一下</a>这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

<div id="app">
        <h2>{{url}}</h2>
        <!-- v-html在标签里 胡子写法没有用 -->
        <h2 v-html="url"></h2>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    url: "<a href='http://www.baidu.com'>百度一下</a>"
                }
            }
        })
    </script>

8 v-text 更改文字

v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。

 <!-- 更改文字 -->
    <div id="app">
        <h2 v-text="msg">你好</h2>

    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: '你不好'
                }
            }
        })
    </script>

9 v-cloak

有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。

<body>
    这个可以在网页没响应过来时 出现胡子方法直接渲染在页面上。可以把胡子隐藏
    <div id="app" v-cloak>
        <h2>{{msg}}</h2>

    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: '666'
                }
            }
        })
    </script>

<!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>v-cloak指令的使用</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <h2>{{message}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    //在vue解析前，div中有一个属性cloak
    //在vue解析之后，div中没有一个属性v-cloak
    setTimeout(() => {
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好啊"
        }
      })
    }, 1000);
  </script>
</body>

</html>

10 v-pre

有时候我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转化的message的变量值，此时我们可以使用v-pre标签。

结果如图，使用v-pre修饰的dom会直接输出字符串。

<!DOCTYPE html>
<html >
<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>v-pre指令的使用</title>
</head>
<body>
  <div id="app">
    <h2>不使用v-pre</h2>
    <h2>{{message}}</h2>
    <h2>使用v-pre,不会解析</h2>
    <h2 v-pre>{{message}}</h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      }
    })
  </script>
</body>
</html>