Vue:渲染、指令、事件、组件、Props

时间 2019-11-20

标签 vue 渲染指令事件组件 props 繁體版

原文原文链接

若是要我用一句话描述使用 Vue 的经历，我可能会说“它如此合乎常理”或者“它提供给我须要的工具，并且没有妨碍个人工做”。每当学习 Vue 的时候，我都很高兴，由于颇有意义，并且很优雅。html

以上是我对 Vue 的介绍。在我第一次学习 Vue 的时候，我就想要这样的文章vue

我喜欢 Vue 的一点是它吸收了其它框架的优秀之处，并有条不紊的将它们组合在一块儿。react

具备响应式组件化的虚拟 DOM 只提供视图层， props 和类 Redux 状态管理与 React 相似。git
条件渲染和服务与 Angular 相似。github
受到 Polymer 简洁及性能方面的启发，Vue 提供了相似的模式，好比 HTML，样式以及 JavaScript 组合在一块儿。api

Vue 相比其它框架的优点有: 简洁，提供更多语义化的 API ，比 React 的表现稍好，不像 Polymer 那样使用 polyfill，相比 Angular 有独立的视图。数组

我还能举一些例子，可是你最好读一下这篇综合的、社区推进的文章对比其它框架。这篇文章值得一读，可是若是你想先看代码，你也能够先跳过，之后再读。app

开始吧！

仍是从 "Hello, world!" 的例子开始。运行以下示例：框架

HTML：异步

<div id="app">
  {{ text }} Nice to meet Vue.
</div>

CSS：

body {
  font-family: 'Bitter', serif;
}

#app {
  text-align: center;
  padding: 70px;
  font-size: 22px;
  max-width: 360px;
  margin: 0 auto;
  display: table;
}

Vue.js

new Vue({
  el: '#app',
  data: {
    text: 'Hello World!'
  }
})

若是你熟悉 React，你会发现二者有不少相同之处。经过 mustache 模板以及使用一个变量，能够避免在内容中使用 JavaScript，可是不一样的一点是咱们直接书写 HTML 而不是 JSX 。虽然 JSX 易于使用，可是我无需再花时间把 class 改为 className，等等。这样启动及运行会更轻量。

如今尝试一下我喜欢的 Vue 的特性: 循环以及条件渲染。

条件渲染

假若有一组元素，相似导航条，我打算重复利用。合理的作法是放在数组中动态的更新。使用普通的 JS (须要 Babel) ，咱们会这样作: 建立一个数组，而后建立一个空字符串，用来存放使用 <li> 包裹的元素，再用 <ul> 包裹全部内容，使用 innerHTML 方法添加到 DOM 中：

HTML:

<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>

Vue.js:

new Vue({
   el:"#app",
   data:{
       items:[
           'thingie',
           'another things',
           'lots of stuff',
           'yadda yadda'
       ]
   }
})

很是简洁。若是你熟悉 Angular，你对此应该不陌生。我发现这种条件渲染的方式简单明了。若是你须要更新内容，修改起来也很简单。

另一种好的方式是使用 v-model 进行动态绑定。试试下面的例子：

HTML：

<div id="app">
    <h3>Type here:</h3>
    <textarea v-model="message" class="message" rows="5" maxlength="72"></textarea>
    <p class="booktext">{{message}}</p>
</div>

Vue.js

new Vue({
    el:"#app",
    data:{
        message:"this is a good place top type"
    }
})

在这个 Demo 中你会注意到两点。首先，能够直接向书中打字而且动态更新文本。Vue 经过 v-model 很是方便的实现了 <textarea> 和 <p> 的数据绑定。

并非只有简单的输入绑定，甚至 v-if 能够用 v-show 替换，有 v-show 的元素不是销毁或重建组件，而是始终保持在 DOM 中，切换可见性。

Vue 提供了不少指令 , 下面是我常用的一些指令。不少指令都有缩写，因此我会一块儿列出来。在以后的教程中，咱们主要使用指令缩写，因此最好先熟悉一下下面的表格。

也有很是好的事件修饰符和其余 API

加快开发的方法：

@mousemove.stop 和 e.stopPropogation() 相同
@mousemove.prevent 相似于 e.preventDefault()
@submit.prevent 提交时再也不从新加载页面
@click.once 不要和 v-once 混淆，这个 click 事件只触发一次
v-model.lazy 不会自动填充内容，它将在事件发生时绑定

事件处理

数据绑定虽然很好，可是没有事件处理也没法发挥更大的用途，所以接下来就试一试! 这是我喜欢的一部分。咱们将使用上面的绑定和监听器来监听 DOM 事件。

在应用程序中有几种不一样的方法来建立可用的方法。好比在普通的 JS 中，你能够选择函数名，可是实例方法直观地称为 methods！

<div id="app">
   <p><button @click="increment">+</button><br>{{counter}}</p>
</div>

new Vue({
    el:"#app",
    data:{
        counter:0
    },
    methods:{
        increment:function(){
            this.counter++
        }
    }
})

咱们建立了一个名为 increment 的方法而且你会注意到函数自动绑定了 this ，会指向实例及组件中的 data 。我喜欢这种自动绑定，不须要经过 console.log 查看 this 的指向。咱们使用缩写 @click 绑定 click 事件。Methods 并非建立自定义函数的惟一方式。你也可使用 watch 。二者的区别是 methods 适合小的、同步的计算，而 watch 对于多任务、异步或者响应数据变化时的开销大的操做是有利的。我常常在动画中使用 watch 。

让咱们看看如何传递事件而且进行动态地样式绑定。若是你记得上面的表格，你可使用 : 来代替 v-bind ，所以咱们能够很简单地经过 :style 以及传递状态，或者 :class 绑定样式 (以及其余属性)。这种绑定确实有不少用途。

<div id="app">
   <p>
       <button @click="increment">+</button>
       <br>
       {{counter}}
       <br>
       <button @click="decrement">-</button>
   </p>
</div>

    new Vue({
        el:"#app",
        data:{
            counter:0,
        },
        methods:{
            increment:function(){
                this.counter++
            },
            decrement:function(){
                this.counter--
            }
        }
    })

你应该看到咱们甚至不须要传递 @click 事件，Vue 将它做为方法的参数(这里显示为 e )自动传递。

此外，原生方法也可使用，好比 event.clientX，而且很容易关联 this 实例。在元素的样式绑定中，CSS 属性须要使用驼峰命名。在这个例子中，你能够看到 Vue 的简单明了。

组件和传递数据

若是你熟悉 React 或者 Angular2，组件思想和传递状态对你并不陌生。若是不是，让咱们先了解一些主要概念。

大小网站一般由不一样的部分组成，而且抽象成更小的部分更容易布局、重用、并使得咱们的代码更清晰。为了不在冗长的多层次的页面中搜寻标签，咱们能够这样构建组件：

<header></header>
<aside>
    <sidebar-item v-for="item in items"></sidebar-item>
</aside>
<main>
    <blogpost v-for="post in posts"></blogpost>
</main>
<footer></footer>

这是一个简单的例子，可是你能够看到这种组合方式在开始构建网站结构时的用途。若是你要维护这些代码，你能够很容易的了解程序的结构而且找到每一部分。著做权归做者全部。

Vue 有多种建立组件的方式。让咱们从易到难，而复杂的例子就是一个普通的 Vue 程序。

下面是我能作的最简单的例子，因此很是容易理解。

记住 HTML 中的 :text 是 Vue 绑定的缩写。咱们在指令部分的最后提到过。绑定能够用于全部方面，可是在这个实例中，这样作的好处是不须要把状态放在 mustache 模板中, 好比 {{ message }}。

在下面的代码中，Vue.component 是组件， new Vue 称为实例。一个程序中能够有多个实例。一般状况下，咱们会有一个实例和多个组件，由于实例是主要应用程序。

<div id="app">
    <child :text="message"></child>
</div>

    Vue.component('child', {
        props: ['text'],
        template: '<div>{{ text }}</div>'
    });

    new Vue({
        el: '#app',
        data: {
            message: 'Hello Mr. Magoo'
         }
    })

如今咱们能够在程序中随意使用这个组件：

HTML：

<div id="app">
    <h3>
        <button @click="increment">+</button>
        Adjust the data
        <button @click="decrement">-</button>
    </h3>
    <h2>This is the app data: <span class="num">{{ count }}</span></h2>
    <h4>
        <child :count="count"></child>
    </h4>
    <p>This is a child counter that is using a static integer as props</p>
    <h4>
        <child :count="count"></child>
    </h4>
    <p>This is the same child counter and it is using the vue instance data as props</p>
</div>

Vue.js

    Vue.component('child', {
        props: ['count'],
        template: '<div class="num">{{ count }}</div>'
    });

    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            increment:function(){
                this.count++
            },
            decrement:function(){
                this.count--
            }
        }
    })

区别在于你是否传递了一个属性并绑定它：

没有使用状态：<child count="1"></child>
使用状态：<child :count="count"></child>

再看一个案例：

HTML：

<div id="app">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-post-photo.jpg" alt="" class="main-photo" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-main-profile.jpg" alt="" class="main-profile" />
    <div class="main-info">
        <span class="name">Julianne Delfina</span>
        <h3>"It's lovely after it rains"</h3>
    </div>
    <ul>
        <li
                is="individual-comment"
                v-for="comment in comments"
                v-bind:commentpost="comment"
                ></li>
    </ul>
    <input
            v-model="newComment"
            v-on:keyup.enter="addComment"
            placeholder="Add a comment" />
</div>

Vue.js

Vue.component('individual-comment', {
        template: '<li>{{ commentpost }}</li>',
        props: ['commentpost']
    });

    new Vue({
        el: '#app',
        data: {
            newComment: '',
            comments: [
                'Looks great Julianne!',
                'I love the sea',
                'Where are you at?'
            ]
        },
        methods: {
            addComment: function () {
                this.comments.push(this.newComment);
                this.newComment = ''
            }
        }
    })

<---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

Vue系列教程