Vue进修笔记之一 - 入门

2024年5月30日 250次阅读 来源: samsara0511

URL：Introduction – Vue.js

注重

所演示的示例，都是在JS中将Vue实例绑定至HTML中的指定元素，然后再经由过程Vue实例中data内的属性或许methods中的要领，来对所绑定元素的子元素举行操纵的，而不是对指定ID元素自身举行操纵。

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

有时候代码一般，然则Vue会报以下的毛病，能够是因为在HTML页面中，JS剧本的载入在HTML页面的衬着之前实行了，解决要领就是把相干的script标签挪动至body标签内末了的部份。

[Vue warn]: Cannot find element: #element-id

声明式衬着 – Declarative Rendering

简朴的文本衬着

在HTML的元素内写上{{ message }}，然后在JS中为data内的message属性指定值，即可显现所指定的文本，这是最基本的显现文本的体式格局。

在JS中，el用于定位HTML元素，Vue实例中的message属性与HTML中的字段同名，其值则会被衬着在终究的HTML页面中。

假如在掌握台中手动变动app1.message的值，则能够看到HTML页面中显现的文本也会立即更新。

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

HTML元素属性绑定

在HTML中，经由过程v-bind这个指令来绑定至元素的指定属性，如v-bind:title就会将Vue实例绑定至HTML元素的title属性上。

带v-前缀的指令用于对所衬着的DOM实行相应式操纵。

下面的代码完成的结果是：当鼠标悬浮至span元素所显现的文本上时，就会显现JS中message的值，即：

'You loaded this page on ' + new Date()

<div id="app2">
    <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: '#app2',
    data: {
        message: 'You loaded this page on ' + new Date()
    }
})

假如用下面第一行的写法，那末终究衬着出来的HTML源代码则为第二行中的模样，而不是希冀中的：将innerHTML属性绑定至message字段即可显现指定的文本。

<div v-bind:innerHTML="message"></div> // original code
<div innerHTML="Hello Vue"></div> // rendered content

前提推断与轮回

前提推断

Vue不仅能够将数据绑定至属性，还能够绑定到DOM的构造上。

经由过程设置Vue实例中恣意属性值为true或许false，能够天生或删除该元素。

检察终究的HTML源代码可知，Vue删除元素并非变动其display属性，而是直接将全部HTML元素替换为<!---->这段字符串，如许更平安，用户将没法经由过程检察源代码的体式格局来拿到元素底本的内容。

<div id="app3">
    <p v-if="seen">Now you see me :)</p>
</div>
var app3 = new Vue({
    el: '#app3',
    data: {
        seen: true
    }
})

轮回

v-for指令用于轮回遍历数组中的元素。

鄙人面的示例中，Vue实例的todos属性包括三个元素，元素字段名为text，字段值为字符串。

而在HTML页面中，在ol以内的li元素只需写一个。经由过程v-for指令，能够依据Vue实例中对应属性里的元素个数，直接天生指定个li元素，个中不包括HTML原始代码里的谁人li元素。

关于每一个天生的li元素，设置其文本为所绑定todos属性中所对应的text字段的值。即第一个li元素的值，为todos属性中第一个text字段的值，第二个li元素的值为第二个text字段的值，以此类推。

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

app4.todos.push({ text: 'You made it!'})语句会在app4这个Vue实例的todos属性的末了再增加一个text字段。

处置惩罚用户输入

挪用函数

v-on指令用于绑定事宜监听至指定的HTML元素上，如许能够挪用所关联的Vue实例中的要领。

鄙人面的示例中，经由过程Vue实例中的reverseMessage要领，来将message属性中的文本逆序分列。

<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!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

双向数据绑定

v-model完成双向数据绑定的结果。

鄙人面的示例中，v-model="message"完成对message的双向绑定。

在input控件中输入的内容会同步更新至p元素。

然则！p元素的内容被变动以后，input控件中的内容并不会同步更新。（那应当怎样明白这个双向数据绑定呢？）

<div id="app-6">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>
var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})

组件体系

在Vue中，组件 – Component，是一个非常重要的观点。

编写大型应用时，许多处所是通用的，能够划分为若干个体积小的、自包括的（啥意思？）、可重用的组件。比如以列表情势展现内容的模块，就能够编写为一个大组件，而列表中的每一个内容，又是一个小组件。

本质上，Vue中的组件就是一个带预定义设置的Vue实例。下面的代码树模了怎样注册一个Vue组件：

Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
})

注册完组件以后，在HTML中，就能够用下面的体式格局建立一个组件的实例：

<ol>
    <todo-item></todo-item>
</ol>

然则以上面的体式格局来简朴地定义一个组件的话，假如建立多个组件的实例，天生的文本都是雷同的。为了让各个组件有差别的内容，能够经由过程props属性，来将父级域的值，通报给子组件。

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

然后就能够经由过程v-bind指令，在HTML中将父元素的值通报给各个子组件。

下面的代码，在HTML中遍历Vue实例中groceryList属性里的每一项item，并将每一个item与todo绑定。

而在定义组件的JS代码中，吸收传入的todo，并在li元素中显现todo中的字符串。

// 定义Vue组件todo-item
// 组件中经由过程名为todo的props属性
// 来从父级域向子组件中通报数据
// 下面的代码等于将通报给todo属性的text字段衬着至'li'元素中
Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
}

// Vue实例中定义属性数组groceryList
new Vue({
    ...
    data: {
        groceryList: [
            { text: '...' },
            { text: '...' },
            { text: '...' }
        ]
    }
})

// HTML中建立todo-item组件
// 遍历属性数组groceryList中的每一项item
// 并将其与todo绑定
// 云云便可将每一个todo中的数据传至各个组件中
<todo-item v-for="item in groceryList" v-bind:todo="item">

再总结一下上面的例子：

  1. 在Vue实例中定义属性数组，数组中的元素用于在前端页面上以有序列表情势显现；

  2. 定义Vue组件，设置好所绑定的props属性的称号，以及Vue实例中属性数组元素的显现花样；

  3. 在前端HTML页面中，写一个组件，用v-for遍历属性数组，并用v-bind将实例中的数据通报给前台。

    原文作者：samsara0511
    原文地址: https://segmentfault.com/a/1190000008151543
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞