资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Vue学习笔记之一 - 入门

Vue学习笔记之一 - 入门

Ververica / 569人阅读

摘要：而在页面中，在之内的元素只需写一个。但是元素的内容被更改之后，控件中的内容并不会同步更新。下面的代码，在中遍历实例中属性里的每一项，并将每个与绑定。而在定义组件的代码中，接收传入的，并在元素中显示中的字符串。

URL：Introduction - Vue.js

注意

所演示的示例，都是在JS中将Vue实例绑定至HTML中的指定元素，然后再通过Vue实例中data内的属性或者methods中的方法，来对所绑定元素的子元素进行操作的，而不是对指定ID元素本身进行操作。


    {{ message }}

有时候代码正常，但是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页面中显示的文本也会即时更新。


    {{ message }}

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()


    
        Hover your mouse over me for a few seconds to see my dynamically bound title!
    

var app2 = new Vue({
    el: "#app2",
    data: {
        message: "You loaded this page on " + new Date()
    }
})

如果用下面第一行的写法，那么最终渲染出来的HTML源代码则为第二行中的样子，而不是期望中的：将innerHTML属性绑定至message字段即可显示指定的文本。

 // original code

 // rendered content
条件判断与循环 条件判断

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

通过设置Vue实例中任意属性值为true或者false，可以生成或删除该元素。

查看最终的HTML源代码可知，Vue删除元素并不是更改其display属性，而是直接将整个HTML元素替换为这段字符串，这样更安全，用户将无法通过查看源代码的方式来拿到元素原本的内容。


    
Now you see me :)


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字段的值，以此类推。


    
    
        
  1. 
            {{ todo.text }}
        
    2. 
    


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属性中的文本逆序排列。


    
{{ message }}

    

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控件中的内容并不会同步更新。（那应该如何理解这个双向数据绑定呢？）


    
{{ message }}

    

var app6 = new Vue({
    el: "#app-6",
    data: {
        message: "Hello Vue!"
    }
})
组件系统

在Vue中，组件 - Component，是一个非常重要的概念。

编写大型应用时，很多地方是通用的，可以划分为若干个体积小的、自包含的（啥意思？）、可重用的组件。比如以列表形式展示内容的模块，就可以编写为一个大组件，而列表中的每个内容，又是一个小组件。

本质上，Vue中的组件就是一个带预定义设置的Vue实例。下面的代码示范了如何注册一个Vue组件：

Vue.component("todo-item", {
    template: "
  • This is a todo
    • "
})

    注册完组件之后，在HTML中，就可以用下面的方式创建一个组件的实例：

    但是以上面的方式来简单地定义一个组件的话，如果创建多个组件的实例，生成的文本都是相同的。为了让各个组件有不同的内容，可以通过props属性，来将父级域的值，传递给子组件。

    Vue.component("todo-item", {
    props: ["todo"],
    template: "
  • {{ todo.text }}
    • "
})

    然后就可以通过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: "
  • {{ todo.text }}
    • "
}

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

// HTML中创建todo-item组件
// 遍历属性数组groceryList中的每一项item
// 并将其与todo绑定
// 如此便可将每个todo中的数据传至各个组件中

    再总结一下上面的例子：

    在Vue实例中定义属性数组，数组中的元素用于在前端页面上以有序列表形式显示；

    定义Vue组件，设置好所绑定的props属性的名称，以及Vue实例中属性数组元素的显示格式；

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

    GPU云服务器 云服务器 vue3 学习笔记 (五)——vue3 webrtc学习之一 开篇 vue入门教程 java开发入门笔记

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/50387.html

    相关文章

    • Vue学习笔记之一 - 入门

      摘要：而在页面中，在之内的元素只需写一个。但是元素的内容被更改之后，控件中的内容并不会同步更新。下面的代码，在中遍历实例中属性里的每一项，并将每个与绑定。而在定义组件的代码中，接收传入的，并在元素中显示中的字符串。 URL：Introduction - Vue.js 注意 所演示的示例，都是在JS中将Vue实例绑定至HTML中的指定元素，然后再通过Vue实例中data内的属性或者method...

      BLUE 评论0 收藏0

    • (原创)vue 学习笔记

      摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。 开篇语 我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

      layman 评论0 收藏0

    • react入门学习笔记（一）

      摘要：选择的主要原因大概是因为该框架出现较早，感觉上会相对成熟，日后学习中遇到问题想要查找答案相对简单一些，对，就是这么简单。多说无益，接下来开始的学习，我按照我学习中带着的问题来一一解答，完成我的入门笔记。主要是针对前端的组件化开发。 这两天得空，特意来折腾了以下时下火热的前端框架react，至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论，也就不妄加评论了...

      leon 评论0 收藏0

    • Vue.js资源分享

      摘要：中文官网英文官网组织发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。 Vue.js资源分享 更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/maid...

      vpants 评论0 收藏0

    • 学习实践 - 收藏集 - 掘金

      摘要：官网地址聊天机器人插件开发实例教程一创建插件在系统技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。我会简单基于的简洁视频播放器组件前端掘金使用和实现购物车场景前端掘金本文是上篇文章的序章，一直想有机会再次实践下。 2道面试题：输入URL按回车&HTTP2 - 掘金通过几轮面试，我发现真正那种问答的技术面，写一堆项目真不如去刷技术文章作用大，因此刷了一段时间的博客和掘金，整理下曾经被...

      mikyou 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    Ververica

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <