Vue学习笔记（一）

最新推荐文章于 2025-03-01 19:48:24 发布

原创最新推荐文章于 2025-03-01 19:48:24 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

29 篇文章

订阅专栏

后台数据的获取与推送

前言

关于vue的相关学习过程，在这里做下记录，方便以后查看。

因为公司需求，需要学习点前端的东西，看完HTML和CSS。然后学到JS和jQuery的时候，看到vue的口碑很不错，正好自己也觉得这个东西很有意思，就学习下。

基础的介绍语法什么的就不在这里啰嗦了，不知道或忘记的话去官网查看:vue官网通道

好了，下面正式开始学习。

一、开始—hello vue

跟随大多数语言学习的方式，从hello XXX开始学习vue

<div id="app">
        <input v-model="name">
        <h2>{{ product }} are in stock.</h2>
        <p>{{ name }}</p>
</div>

const app = new Vue({
            el: '#app',
            data: {
                product : 'boots',
                name : 'jhon'
            },
 });

就能看到结果了
在这里插入图片描述
修改input框中的内容jhon，下面的jhon也会随之改变，体现vue的双向数据绑定特性。

二、从后台获取数据，然后遍历获取到的数据

HTML部分

<table id="tb">
        <tr v-for="item in list">
            <td>{{ item.id}}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.sex }}</td>
        </tr>
</table>

JavaScript（Vue）部分

const tb = new Vue({
            el: '#tb',
            data:{
                list: []
            },
            created:function(){
                this.$http.get('http://localhost/tp5/mytp5/public/index/ts').then(function (res) {
                    // console.log(res.body);
                    this.list = JSON.parse(res.body);//解析获取到的json数据
                },function () {
                    console.log('error');
                })

            }
 })

得到结果
在这里插入图片描述