vue介绍

作者: Unruly_Wind | 来源:发表于2019-05-28 22:38 被阅读0次

原文地址:https://cn.vuejs.org/v2/guide/index.html

vue介绍

vue.js是什么

vue,类似view,是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合时,vue也完全能够为复杂的单页应用提供驱动。

起步

官方指南假设你已了解关于html、css和javascript的中级知识。

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者:

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

不推荐新手直接使用vue-cli,尤其是在你还不熟悉基于node.js的构建工具时。

声明式渲染

vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进dom的系统:

<div id="app">
    {{ message }}
</div>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})
Hello Vue!

看起来这跟渲染一个字符串模板非常类似,但是vue在背后做了大量工作。现在数据和dom已经被建立了关联,所有东西都是响应式的。

除了文本插值,我们还可以这样来绑定元素特性:

<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>
var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '页面加载于 ' + new Date().toLocaleString()
    }
})
鼠标悬停几秒钟查看此处动态绑定的提示信息!

这里我们遇到了一点新东西,你看到的v-bind特性被称为指令。指令带有前缀v-,以表示它们是vue提供的特殊特性。可能你已经猜到了,它们会在渲染的dom上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的title特性和vue实例的message属性保持一致”。

如果你再次打开浏览器的javascript控制台,输入app2.message = '新消息',就会再一次看到这个绑定了title特性的html已经进行了更新。

条件与循环

控制切换一个元素是否显示也相当简单:

<div id="app-3">
    <p v-if="seen">
        现在你看到我了
    </p>
</div>
var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
})
现在你看到我了

继续在控制台输入app3.seen = false,你会发现之前显示的消息消失了。

vue提供了一个强大的过渡效果系统,可以在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: '学习 javascript' },
            { text: '学习 vue' },
            { text: '整个牛项目' }
        ]
    }
})
1.学习 javascript
2.学习 vue
3.整个牛项目

处理用户输入

为了让用户和你的应用进行交互,我们可以用v-on指令添加一个事件监听器,通过它调用在vue实例中定义的方法:

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

注意在reverseMessage方法中,我们更新了应用的状态,但没有触碰dom——所有的dom操作都由vue来处理,你编写的代码只需要关注逻辑层面即可。

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!'
    }
})

组件化应用构建

组件系统是vue的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:

在vue里,一个组件本质上是一个拥有预定义选项的一个vue实例。在vue中注册组件很简单:

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
    template: '<li>这是个待办项</li>'
})

现在你可以用它构建另一个组件模板:

<ol>
    <!-- 创建一个 todo-item 组件的实例 -->
    <todo-item></todo-item>
</ol>

但是这样会为每个待办项渲染同样的文本,这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义,使之能够接受一个prop:

Vue.component('todo-item', {
    // todo-item组件现在接受一个“prop”,类似于一个自定义特性。这个prop名为todo
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

现在,我们可以使用v-bind指令将待办项传到循环输出的每个组件中:

<div id="app-7">
    <ol>
        <!--
            现在我们为每个todo-item提供todo对象todo对象是变量,即其内容可以是动态的,我们也需要为每个组件提供一个"key",稍后再作详细解释。
        -->
        <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
</div>
Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其他什么人吃的东西' }
        ]
    }
})

与自定义元素的关系

你可能已经注意到vue组件非常类似于自定义元素——它是web组件规范的一部分,这是因为vue的组件语法部分参考了该规范。例如vue组件实现了slot api与is特性。但是,还是有几个关键差别:

1.web components规范已经完成并通过,但未被所有浏览器原生实现。目前safari 10.1+、chrome54+和firefox 63+原生支持web components。相比之下,vue组件不需要任何polyfill,并且在所有支持的浏览器(IE9及更高版本)之下表现一致。必要时,vue组件也可以包装于原生自定义元素之内。

2.vue组件提供了纯自定义元素所不具备的一些重要功能,最突出的跨组件数据流、自定义事件通信及构建工具集成。

虽然vue内部没有使用自定义元素,不过在应用使用自定义元素、或以自定义元素形式发布时,依然有很好的互操作性。vue cli也支持将vue组件构建成为原生的自定义元素。

相关文章

网友评论

      本文标题:vue介绍

      本文链接:https://www.haomeiwen.com/subject/gtqstctx.html