Loading

Vue快速入门（其一）

Vue基础

VUE特点：页面由数据生成，数据改变页面会同步跟着改变

需要具有前端三剑客（HTML、CSS、JavaScript）以及AJAX的基础

（开发版本有提示？）

快速入门代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

（建议挂载到div上，div一般无其它样式）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{ message }}
        {{ man.name }}
        {{ language[0] }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                man: {
                    name: 'zwc',
                    age: 22
                },
                language: ['java', "python"]
            }
        })
    </script>
</body>
</html>

本地应用

v-text和v-html标签：区别就在于前者不能解析HTML，后者可以。（Java Web中讲过类似的属性，不做过多赘述）

v-on：

v-on失效解决方法：WebStorm使用Vue.js “Namespace 'v-on' is not bound ”

v-show：

v-if：

v-bind:

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="referrer" content="no-referrer" />
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <img v-bind:src="imgSrc" v-show="imgShow" :title="imgTitle" :class="{active:imgActive}">
    <button @click="isShow">切换显示</button>
    <button @click="isActive">切换样式</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://pic.cnblogs.com/avatar/1721072/20211027133723.png',
            imgShow: true,
            imgTitle: '百度图片',
            imgActive: false
        },
        methods: {
            isShow: function () {
                this.imgShow = !this.imgShow;
            },
            isActive: function () {
                this.imgActive = !this.imgActive;
            }
        }
    })
</script>
</body>
</html>

（注意，如果图片无法正常显示，需在<head>标签中添加以下代码）

<meta name="referrer" content="no-referrer" />

v-for：

v-on补充：

v-model：

记事本小练习：

 

学到这里，也不难发现Vue的强大了。和之前基于dom的方式不一样，Vue都是基于数据的开发方式，不用再把重心放在如何改变dom树了。整个页面是响应式的，数据变化，页面也跟着变化。

自己的代码如下（核心点和老师代码是一样的，只不过老师的代码有css样式，页面看起来更加美观一些）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="newBook">
    <button @click="addBook">添加</button>
    <li v-for="(item,index) in book">
        {{index+1 + ' ' + item}}
        <button @click="deleteBook(index)">删除</button>
    </li>
    <scan v-show="book.length > 0">{{book.length}} total</scan>
    <button @click="clearBook" v-show="book.length > 0">clear</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            book: ['吃饭', '洗澡', '睡觉'],
            newBook: ''
        },
        methods: {
            addBook: function () {
                this.book.push(this.newBook);
            },
            deleteBook: function (i) {
                this.book.splice(i,1);
            },
            clearBook: function () {
                this.book = [];
            }
        }
    })
</script>
</body>
</html>

（注意splice方法的使用，第一个参数为删除的索引位置，第二个参数为删除该索引开始的几个元素）

posted @ 2021-10-31 16:45  幻梦翱翔  阅读(69)  评论(0)    收藏  举报