vue学习记录一（指令）

最新推荐文章于 2020-03-22 16:49:16 发布

一又十七

最新推荐文章于 2020-03-22 16:49:16 发布

阅读量84

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45387568/article/details/102509127

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一：介绍

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>

一又十七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习记录一（指令）

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

扫一扫

专栏目录