vue.js基础入门(IDEA)

sleep22

已于 2022-08-18 10:19:41 修改

阅读量1.4k

点赞数

分类专栏：前端学习笔记文章标签： vue.js vue

于 2022-08-17 10:53:55 首次发布

本文链接：https://blog.csdn.net/weixin_60096751/article/details/126195521

版权

前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue采用自底向上增量开发的设计

vue.js的目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件

官网： https://vuejs.org/ https://cn.vuejs.org/

IDEA添加vue.js插件

新建项目后->File->Settings->Plugins

->搜索vue

创建一个.html文件，然后通过如下方式引入 Vue：

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

示例demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: "hello,vue!"
        }
    });

</script>


</body>
</html>

可以看出，Vue的数据都是和DOM建立关联，所有东西都是响应式的

并且在控制台操作对象属性修改 app.message 的值，可以看到上例相应地更新

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute

常用属性

v-if
v-else
v-else-if
v-for 指令可以绑定数组的数据来渲染一个项目列表
v-on 绑定事件简写 @
v-model 数据双向绑定
v-bind 给组件绑定参数简写：

v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<button v-on:click="sayHi">click Me</button>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            message: "gao"
        },
        methods: {
               sayHi: function (){
                   alert(this.message)
               }
        }
    })
</script>

</body>
</html>

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。负责监听用户的输入事件以更新数据

Vue组件

除了页头、侧边栏、内容区等组件，每个组件又包含了其他的如导航链接、博文等组件

实例demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--组件-->
    <gao v-for="g in items" v-bind:gg="g"></gao>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>

    Vue.component("gao",{
        props: ['gg'],
        template: '<li>{{gg}}</li>'
    });

    var app = new Vue({
        el: '#app',
        data: {
            items: ["Java","Layui","Vue"]
        }
    });
</script>

</body>
</html>

Axios异步通信

主要实现AJAX异步通信

示例demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
<div>
    {{info.address.city}}
</div>
</div>
<!--导入JS文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: '#vue',
        data(){
            return{
                info: {
                    name: null,
                    address: {
                        country: null,
                        city: null,
                        stress: null
                    },
                    url: null
                }
            }
        },
        mounted(){//ES6新特性
            axios.get('data.json').then(response =>(this.info = response.data));
        }

    });
</script>

</body>
</html>

计算属性

缓存计算数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <!--计算属性-->
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

</body>
</html>

插槽slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
<tode>

    <tode-title slot="tode-title" :title="title"></tode-title>
    <tode-items slot="tode-items" v-for="item in todeItems" :item="item" ></tode-items>
</tode>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    //slot: 插槽
    Vue.component("tode",{
       template: '<div>\
                       <slot name="tode-title"></slot>\
                       <ul>\
                            <slot name="tode-items"></slot>\
                       </ul>\
                  </div>'
       // '<div>' +
       // '<slot></slot>' +
       //     '<ul>'+
       //     '<slot></slot>' +
       //     '</ul>'+
       // '</div>'
    });
    Vue.component("tode-title",{
        props: ['title'],
       template: '<div>{{title}}</div>'
    });
    Vue.component("tode-items",{
        props: ['item']
    });

    var vm = new Vue({
        el: '#example',
        data: {
            title: "列表",
            todeItems: ['11','22','33']
        }
    });
</script>

</body>
</html>

自定义事件

this.$emit("事件名",参数); 组件内部绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
<tode>

    <tode-title slot="tode-title" :title="title"></tode-title>
    <tode-items slot="tode-items" v-for="(item,index) in todeItems"
                :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></tode-items>
</tode>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    //slot: 插槽
    Vue.component("tode",{
       template: '<div>\
                       <slot name="tode-title"></slot>\
                       <ul>\
                            <slot name="tode-items"></slot>\
                       </ul>\
                  </div>'
    });
    Vue.component("tode-title",{
        props: ['title'],
       template: '<div>{{title}}</div>'
    });
    Vue.component("tode-items",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}--{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                this.$emit('remove',index)
            }
        }
    });

    var vm = new Vue({
        el: '#example',
        data: {
            title: "列表",
            todeItems: ['11','22','33']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了"+this.todeItems[index]+"OK");
                this.todeItems.splice(index,1);
            }
        }
    });
</script>

</body>
</html>