欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue学习记录一（指令）

程序员文章站 2022-05-16 18:49:34
...

一：介绍

Vue.js是什么？

Vue.js是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二：安装

1.CDN安装：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.NPM安装

D:\茹意vue\茹意1011>npm init
D:\茹意vue\茹意1011>npm install vue --save

三：基本指令

1.v-model（是一个数据双向绑定的指令）。

<!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="../茹意1011/node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="ss">
        <input type="text" v-model='msg'>
        <p>{{msg}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                msg: 'hi'
            }
        })
    </script>
</body>
</html>

2.v-if

<!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="../node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
    <div id="ss">
        <p v-if='seen'>可以看到我</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#ss',
            data: {
                seen:true
            }
        })
    </script>
</body>
</html>

3.v-for

<!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="../node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
    <div id="ss">
        <ol>
            <li v-for="item in msg">
                {{item.text}}
            </li>
        </ol>
    </div>
    <script>
        let vm = new Vue({
            el: '#ss',
            data: {
                msg: [
                    {text:'你好'},
                    {text:'世界'},
                    {text:'你好'},
                    {text:'中国'}
                ]
            }
        })
    </script>
</body>
</html>

4.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>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
    <div id="ss" v-html='msg'>
    </div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                msg: '<h1>你好</h1>'
            }
        })
    </script>
</body>

</html>

5.v-text

<!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="../node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
    <div id="ss" v-text='msg'>
    </div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                msg: '<h1>你好</h1>'
            }
        })
    </script>
</body>
</html>

6.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="ss" v-cloak>
        <span>{{msg}}</span>
        <span>{{msg}}</span>
        <span>{{msg}}</span>
        <span>{{msg}}</span>
        <span>{{msg}}</span>
    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                msg: 'yes'
            }
        })
    </script>
</body>
</html>

7.v-on

<!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="../node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
    <div id="ss">
        <p>{{msg}}</p>
        <button @click='reverse'>反转信息</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#ss',
            data: {
                msg: 'hello world',
            },
            methods: {
                reverse() {
                    this.msg = this.msg.split('').reverse().join();
                }
            }
        })
    </script>
</body>
</html>

8.v-bind

<!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="../node_modules/vue/dist/vue.min.js"></script>
    <style>
    img{
        width: 500px;
        height: 500px;
    }</style>
</head>

<body>
    <div id="ss">
        <img :src="msgSrc" alt="">
    </div>
    <script>
        let vm = new Vue({
            el:'#ss',
            data:{
                msgSrc:"m2.jpg",
            }
        })
    </script>
</body>
</html>

上一篇： 谢霆锋等明星授心得 传递健身运动秘籍

下一篇： 多线程运行，保证线程安全的3种方式（Synchronized、Lock、AtomicInteger）

推荐阅读