Vue详细的入门笔记

什么是Vue?

Vue是一个轻量级的JavaScript框架，用于搭建用户界面，它的特点是易于上手、灵活、高效。

Vue的使用

要使用Vue，首先需要引入Vue.js文件。可以选择从官网下载Vue.js文件，也可以使用CDN引入。

CDN引入Vue.js

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

基本用法

在HTML的<body>中添加一个div标签，用于放置Vue的实例：

<div id="app">
  {{ message }}
</div>

然后在JS文件中创建一个Vue实例，关联这个div标签：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

这个Vue实例的data属性是数据，其中的message属性是一个字符串。通过双花括号{{ }}，该属性的值会显示在HTML中。

Vue指令

Vue的指令是一种特殊的html属性，它们以"v-"开头。指令告诉Vue，将该元素绑定到Vue实例的哪个属性。

v-if

v-if指令用于条件性的渲染元素，只有满足条件的时候才会在页面中进行渲染。

<p v-if="seen">Now you see me</p>

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

在上面的代码中，当seen属性为true时，页面中才会显示p标签中的内容。

v-for

v-for指令用于循环渲染元素。

<ul>
  <li v-for="item in list">{{ item }}</li>
</ul>

var app = new Vue({
  el: '#app',
  data: {
    list: ['item1', 'item2', 'item3']
  }
})

在上面的代码中，使用v-for指令将list数组中的每个元素渲染到页面上。

示例说明

示例1：计数器

本例说明如何在Vue中实现一个简单的计数器，点击按钮增加计数值。

HTML文件

<div id="app">
    <p>{{count}}</p>
    <button @click="add">Increase</button>
</div>

JS文件

var app = new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        add: function() {
            this.count++;
        }
    }
});

在这个例子中，当点击按钮时，会调用Vue实例中的add()方法，将count属性的值加1，然后重新渲染页面。

示例2：留言板

本例说明如何使用Vue构建一个简单的留言板，用户可以输入留言并提交。

HTML文件

<div id="app">
    <form>
        <input type="text" v-model="newMessage">
        <button @click.prevent="addMessage">Add</button>
    </form>
    <ul>
        <li v-for="(message, index) in messages">{{message}} <button @click="deleteMessage(index)">delete</button></li>
    </ul>
</div>

JS文件

var app = new Vue({
    el: '#app',
    data: {
        newMessage: '',
        messages: []
    },
    methods: {
        addMessage: function() {
            if (this.newMessage !== '') {
                this.messages.push(this.newMessage);
                this.newMessage = '';
            }
        },
        deleteMessage: function(index) {
            this.messages.splice(index, 1);
        }
    }
});

在这个例子中，用户在输入框中输入留言，Vue实例中的addMessage()方法将该留言添加到数组中，在页面中使用v-for指令渲染数组中的每个留言，deleteMessage()方法可以删除指定的留言。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue详细的入门笔记 - Python技术站

Vue详细的入门笔记

Vue详细的入门笔记

什么是Vue?

Vue的使用

CDN引入Vue.js

基本用法

Vue指令

v-if

v-for

示例说明

示例1：计数器

示例2：留言板

相关文章