首页 > 代码库 > Vue.js起步

Vue.js起步

2024-09-01 03:58:44   219人阅读

Vue.js是一套构建用户界面的 渐进式框架，Vue 采用自底向上增量开发的设计，Vue 的核心库只关注视图层。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。

你可以查看安装指南来了解其他安装 Vue 的选项。请注意我们不推荐新手直接使用 vue-cli，尤其是对 Node.js 构建工具不够了解的同学。

第一个例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<div id="app">
    {{ message }}
</div>
<script src="http://www.mamicode.com/node_modules/vue/dist/vue.js"></script>
<script src="http://www.mamicode.com/js/index.js"></script>
</body>
</html>

index.js

window.onload=function() {
    var app = new Vue({
        el: ‘#app‘,
        data: {
            message: ‘Hello Vue!‘
        }
    });
}

　　

实例二：v-bind 属性被称为指令

指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。它们会在渲染过的 DOM 上应用特殊的响应式行为。

这个指令的简单含义是说：将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

　　

  var app2 = new Vue({
        el: ‘#app-2‘,
        data: {
            message: ‘You loaded this page on ‘ + new Date()
        }
    });

　　

条件与循环

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<div id="app-3">
    <p v-if="seen">Now you see me</p>
</div>
<script src="http://www.mamicode.com/node_modules/vue/dist/vue.js"></script>
<script src="http://www.mamicode.com/js/index.js"></script>
</body>
</html>

　　

var app3 = new Vue({
    el: ‘#app-3‘,
    data: {
        seen: true
    }
})

　　

这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。而且，Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用过渡效果。

 

也有一些其它指令，每个都有特殊的功能。例如， v-for 指令可以绑定数据到数组来渲染一个列表

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

　　

var app4 = new Vue({
        el: ‘#app-4‘,
        data: {
            todos: [
                { text: ‘Learn JavaScript‘ },
                { text: ‘Learn Vue‘ },
                { text: ‘Build something awesome‘ }
            ]
        }
    });

　　

处理用户输入

为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

　　

var app5 = new Vue({
        el: ‘#app-5‘,
        data: {
            message: ‘Hello Vue.js!‘
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split(‘‘).reverse().join(‘‘)
            }
        }
    });

　　

Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

　　

var app6 = new Vue({
        el: ‘#app-6‘,
        data: {
            message: ‘Hello Vue!‘
        }
    })

　　

用组件构建（应用）

<div id="app-7">
    <ol>
         
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        <!--使用 v-bind 指令将 todo 传到每一个重复的组件中：-->
        <!--groceryList中的每一个text（其实是item）传给todo(其实是li的属性)-->
    </ol>
</div>

　　先遍历groceryList的每一条，这里把每一条设置为item，v-for="item in groceryList"；遍历好后，把每一条item，v-bind给todo（todo是lodo-itm，也就是li的一个属性），然后再给魔板里的li填充内容为todo.text，也就是item的每一条内容，也就是groceryList里面的text的每一条内容。

Vue.component(‘todo-item‘, {
        props: [‘todo‘],
        template: ‘<li>{{ todo.text }}</li>‘
    });
    var app7 = new Vue({
        el: ‘#app-7‘,
        data: {
            groceryList: [
                { text: ‘Vegetables‘ },
                { text: ‘Cheese‘ },
                { text: ‘Whatever else humans are supposed to eat‘ }
            ]
        }
    });

　　

Vue.js起步


联系
我们