Vue.js的学习笔记

心守一抹暖阳，静待一树花开

已于 2022-03-06 21:02:30 修改

阅读量565

点赞数

分类专栏： vue.js 文章标签： vue.js

于 2022-03-06 21:00:43 首次发布

本文链接：https://blog.csdn.net/weixin_44049891/article/details/123316327

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js的学习笔记

1、Vue.js的基础语法

Vue.js官网：https://cn.vuejs.org/index.html

Vue.js是一个视图层框架，严格遵守SoC（关注度分离原则）

我的代码笔记：
引入js：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

我的第一个Hello Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
<div id="app">{{message}}</div>

<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            message:"Hello vue"
        }
    })
</script>
</body>
</html>

显示效果图：
在这里插入图片描述

v-model的使用

<!--用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    输入的文本：<input type="text" v-model="message">{{message}}
    <br/>
<!--    <div><textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>{{message}}</div>-->
    <br/>
    <div>
        性别：
        <input type="radio" name="sex" value="男" v-model="checked">男
        <input type="radio" name="sex" value="女" v-model="checked">女

        <p>选中了谁？{{checked}}</p>
    </div>

    <br/>
    下拉列表：
    <select v-model="selected">
        <option value="" disabled>---请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{selected}}</span>

</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            message:"hello vue",
            checked:'',
            selected:''
        }
    })
</script>
</body>
</html>

显示效果图：
在这里插入图片描述
Vue组件（先加载模板，再渲染数据）
使用 Vue.component 定义一个组件：
通过props:传递参数，前端通过v-bind的绑定，定义组件的模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件：先加载模板，再渲染数据</title>
</head>
<body>

<div id="app">
    <whx v-for="item in items" v-bind:myitem="item"></whx>
</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    //定义一个组件
    Vue.component("whx",{
        //props:传递参数，通过v-bind:myitem的"myitem"绑定，定义组件的模板
        props:["myitem"], 
        template:'<li>{{myitem}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        data:{
            items:["java","html","css"]
        }
    });
</script>
</body>
</html>

显示效果图：
在这里插入图片描述
Axios异步网络通讯
可以用于浏览器端和NodeJS的异步通信框架，主要作用：实现AJAX异步通信。
1、先检查idea的配置：

2、在Idea新建一个data.json文件（开发的接口大部分是使用JSON格式）

{
  "name":"axios网络通讯",
  "url":"https://www.baidu.com/",
  "address":{
    "street":"广州",
    "city":"广东",
    "country":"中国"
  },
  "links":[
    {
      "name":"bilibili",
      "url":"https://space.bilibili.com"
    },
    {
      "name":"百度",
      "url":"https://www.baidu.com/"
    }
  ]
}

3、引入js文件：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4、使用钩子函数，程序执行可以插入到中间去执行，完整代码如下：
axios.get()来获取到data.json的文件，通过.then响应数据到data(){return}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios网络通讯（ajax）</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--解决闪烁的问题，添加 v-clock-->
<div id="app" v-clock>
    <p>{{info.name}}</p>
    <p>{{info.links}}</p>
    <p>{{info.links[0].name}}</p>
    <a v-bind:href="info.url">click me</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el:'#app',
        data(){
            return{
                info:{
                    name:null,
                    url:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    },
                    links:[{
                        name:null,
                        url: null
                    }
                    ]
                }
            }
        },
        mounted(){//钩子函数，程序执行可以插入到中间去执行
            //链式编程，在控制台打印
            // axios.get('../data.json').then(response =>(console.log(response.data)));
            axios.get('../data.json').then(response =>(this.info= response.data));
        }
    });

</script>
</body>
</html>

显示效果图：
在这里插入图片描述

心守一抹暖阳，静待一树花开

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js的学习笔记

Vue.js的学习笔记1、Vue.js的基础语法Vue.js官网：https://cn.vuejs.org/index.html我的代码笔记：引入js：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>我的第一个Hello Vue
复制链接

扫一扫

专栏目录