Vue----简笔随文-优快云博客

本文链接：https://blog.youkuaiyun.com/fanqingdi092298/article/details/116263396

本文深入介绍了Vue.js，一个用于构建用户界面的轻量级框架。内容涵盖Vue的核心概念，如声明式渲染、条件和循环、事件处理、组件化以及与Axios的集成进行数据通信。通过示例代码展示了Vue的易用性和灵活性，适合从简单到复杂的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的导入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue的声明式渲染

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Vue的基本语法

if条件

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

for循环

<div id="app">
    <h4 v-for="(fan,index) in message">
        {{fan.type}}--->{{index}}
    </h4>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message:[
                {type:'2023我们日本京都见山长水阔'},
                {type:'2023我们日本大阪见斯四季予你'},
                {type:'2023我们日本东京见风轻云淡'},
                {type:'2023我们日本北海道见木槿繁华'},
                {type:'2023我们日本札幌见七海'},
            ]
        }
    })
</script>

事件监听

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
举个例子

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">sayHi</button>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            message:'2023我们日本京都相见山长水阔'
        },
        methods:{//方法是methods一定要--切记切记
            sayHi:function(){
                document.write(vm.message);
            }
        }
    })
</script>
</body>
</html>

vue中的组件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <scsk v-for="arr in arrays" v-bind:fqd="arr"></scsk>
</div>
<script>
    Vue.component("scsk",{
        props:['fqd'],
        template:'<p>{{fqd}}</p>'
    })
    var vm = new Vue({
        el:"#app",
        data:{
            arrays:['东京','大阪','京都','神户','札幌','福冈','神奈川','茨城县','群马县']
        }
    })
</script>
</body>
</html>

Axios通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{info.name}}
    {{info.address.city}}
    {{info.links[0].name}}
    {{info.links[0].url}}
<!--    vue绑定-->
    <a v-bind:href="info.links[0].url">哔哩哔哩链接地址</a>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data(){
            return {
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null,
                    },
                    links:[
                        {
                          name:null,
                          url:null
                        }
                    ]
                }
            }
        },
        mounted(){//钩子函数,链式编程 Es6新的特性
            axios.get('data.json').then(response=>(this.info=response.data));
        }
    })
</script>
</body>
</html>

由于Vue.js是一个视图层框架严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !

内容分发 slot和自定义事件内容分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!--导入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"
                    v-bind:key="index"
        ></todo-items>
    </todo>
</div>
<script>
    //slot: 插槽
    Vue.component("todo",{
        template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '   <slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'
    });
    Vue.component("todo-title",{
        props: ["title"],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ["item",'index'],
        template: '<li>{{item}}--{{index}}<button @click="remove">删除数据</button> </li>',
        methods:{
            remove:function (index){
            //自定义分发
               this.$emit('remove',index)
            }
        },
    });
    var vm=new Vue({
        el:'#app',
        data: {
            title: "计算机课程",
            todoItems: ['java','PHP','Linux',"前端",'运维']
        },
        methods:{
            removeItems:function (index){
                console.log("删除了"+this.todoItems[index]+"这条数据")
                this.todoItems.splice(index,1)//一次删除一个元素
            }
        }
    });

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