一、Vue入门语法

最新推荐文章于 2025-02-14 16:07:08 发布

远途123

最新推荐文章于 2025-02-14 16:07:08 发布

阅读量94

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/qq_26440111/article/details/119482071

版权

笔记专栏收录该内容

29 篇文章

订阅专栏

本文通过一个完整的Vue.js代码示例，详细解析了Vue框架的常用特性，包括数据绑定、条件渲染、事件处理、组件化、计算属性、插槽组件和自定义事件等内容，同时涉及到了axios库用于数据交互。示例涵盖了Vue的基础用法和实际开发中的常见操作。

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

demo.html

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <!--输出绑定对象中的数据-->
    {{message}}
    <div>
        <!--绑定标签属性-->
        <span v-bind:title="message">显示title提示信息</span>
    </div>
    <!--绑定数据条件判断是否显示-->
    <div v-if="ok">yes</div>
    <div v-else>No</div>
    <!--绑定数组-->
    <li v-for="item in items">
        {{item.message}}
    </li>
    <div>
        <!--绑定事件 -->
        <button v-on:click="sayHi()">click me</button>
    </div>
    <div>
        <!--双向绑定-->
        <div>
            <!--输入框绑定-->
            输入数据双向绑定：<input type="text" v-model="message"/>
        </div>

        <div>
            <!--单选框绑定-->
            性别：
            <input type="radio" name="sex" value="男" v-model="checkedValue">男
            <input type="radio" name="sex" value="女" v-model="checkedValue">女
            <p>选中了:{{checkedValue}}</p>
        </div>
        <div>
             <!--多选框绑定-->
             喜欢的水果：
             <input type="checkbox" name="fruit" value="苹果" v-model="checkedFruits">苹果
             <input type="checkbox" name="fruit" value="梨子" v-model="checkedFruits">梨子
             <p>选中了:<span v-for="item in checkedFruits">{{item}}</span></p>
        </div>
        <div>
            <!--下拉框绑定-->
            <select v-model="selectedValue">
                <option value="" disabled>--请选择--</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <p>选中了:{{selectedValue}}</p>
        </div>
    </div>


    <div>
        <!--自定义组件-->
        <diycomponent v-for="(item,index) in items" v-bind:diyargs="item.message"></diycomponent>
    </div>
    <div>
        <div>账户：{{userInfo.username}}</div>
        <div>密码:{{userInfo.password}}</div>
    </div>

    <div>
        <!--计算属性 1是调用方法，2是获取缓存-->
        <p>currentTime1:{{getTime1()}}</p>
        <p>currentTime2:{{getTime2}}</p>
    </div>
    <div>
        <!--插槽组件及自定义事件内容分发-->
        <slot-box>
            <slot-title slot="slot-title" :title="message"></slot-title>
            <!--从数组中获取数据和index下标，并与插槽组件接收值绑定，将外部方法与组件内部点击事件方法名绑定 key用来唯一标识-->
            <slot-item slot="slot-item" v-for="(item,index) in items"
                       :item="item.message"
                       v-on:remove="removeItem(index)"
                       :key="index">
            </slot-item>

        </slot-box>
    </div>

</div>


<!--导入vue.js和axios -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //自定义组件需放在Vue对象前面,且组件名称及接收参数名称均不能包含大写字母和中文字符
    Vue.component("diycomponent",//组件名称
        {
            props: ['diyargs'],    //组件接收的参数名称
            template: '<li>{{diyargs}}</li>'
        });
    Vue.component("slot-box", {
        template: " <div>\n" +
            "        <slot name='slot-title'></slot>\n" + //name='slot-title'插槽定位
            "        <ul>\n" +
            "            <slot name='slot-item'></slot>\n" +
            "        </ul>\n" +
            "    </div>"
    });
    //标题组件插槽
    Vue.component("slot-title", {
        props: ['title'],
        template: "<div>{{title}}</div>"
    });
    //列表组件插槽1
    Vue.component("slot-item", {
        props: ['item', 'index'],
        template: "<li>{{index}}---{{item}}<button @click='remove'>删除</button></li>",
        methods: {
            remove: function (index) {
                this.$emit('remove', 'index');
                alert("删除了" + index);//index无法传入内部方法

            }
        }
    })

    var vm = new Vue({ //创建绑定对象
        el: "#app",//以id关联Vue对象及dom元素
        data() {
            //该对象下的数据
            return {//data:{}无法异步通信,必须data(){return{}}
                message: "hello,vue!",//数据内容
                ok: true,//绑定判断条件的值
                items: [{message: '输出信息1'},//数组
                    {message: '输出信息2'},
                    {message: '输出信息3'}
                ],
                checkedValue: "",//绑定单选对象的值
                checkedFruits: [],//绑定多选对象的值
                selectedValue: "",//绑定下拉框的值
                userInfo: {
                    username: null,
                    password: null
                }
            }
        },
        mounted() {
            axios.get('data.json').then(response=>(this.userInfo=response.data));
            //.then(function (response) {
            //this.userInfo = response.data;
            //console.log(response.data);         })有作用域的问题
        },
        methods: {
            sayHi: function (event) {
                alert(this.message); //this指代绑定对象
            },
            getTime1: function () {
                return Date.now();//返回一个时间戳
            },
            removeItem: function (index) {
                this.items.splice(index, 1);

            }
        },
        computed: {
            getTime2: function () {
                return Date.now();
            }
        }
    });
</script>
</body>
</html>