vue基础学习_vue+飞鱼-CSDN博客

本文链接：https://blog.csdn.net/qq_42487459/article/details/124903186
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src=../lib/js/vue2.5.2.min.js ></script>
    <script src=../lib/js/axios.min.js ></script>
</head>
<body>

<div id="app">
    <br>v-bind属性： <spam v-bind:title="message">
        在这里悬浮
    </spam>

    <br>if条件判断：<h1 v-if="xianshi">if </h1>

    <br>===恒等于：<h1 v-if="type ==='AA'">AA</h1>

    <br>for循环：<li v-for="(item,index) in user">
        {{item.meil}}---{{index}}
    </li>

    <br>buton按钮：<button v-on:click="sayhi">点击</button>

    <br>双向绑定--实时显示：input: <input type="text" v-model="intext">{{intext}}

    <br>下拉选项：,以及选中的值是: {{sel}}
    <select v-model="sel">
        <option disabled value="" >---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <br>模版组件：<xiaoliu></xiaoliu>

    <br>模版组件xiaoliu：<xiaoliu v-for="us in user" v-bind:item="user">{{us}}</xiaoliu>

    <br>模版组件xiaoming：<xiaoliu v-for="us in user" v-bind:item="user">{{us}}</xiaoliu>

    <br>请求接口https://v2.jinrishici.com/one.json?client=browser-sdk/1.2&X-User-Token=WnRAkMYWHQshus7nxmsfYwIOYdoCg%2BUs：
    <br>
    <br>诗句id：{{info.data.id}}---诗句----{{info.data.content}}
    <br>---时间---{{info.data.cacheAt}}

    <br>方法调用：{{currentTime1()}}

    <br>
    <br>slot插槽和自定义事件内部分发：
    <--! slot插槽和自定义时间分发-->
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-name slot="todo-name" v-for="(item,index) in todoItems":name="item"
        :index="index" v-on:remove="Itemremove(index)" :key="index"></todo-name>
    </todo>



</div>

<script>
    //定义组件
    Vue.component("xiaoliu",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    Vue.component("xiaoming",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    // slot插槽
    Vue.component("todo",{
        template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-name"></slot>\
                    </ul>\
                   </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-name",{
        props: ['name','index'],
        template: '<li>{{index}}====={{name}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                //自定义时间分发
                this.$emit('remove',index)
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data(){
            return{
                content: '',
                intext: '',
                sel:'',
                title: '小刘学前端',
                todoItems: ['昨天学','今天学','明天学','白天学','晚上学'],
                message: "Hello world!",
                xianshi: true,
                type: 'AA',
                user: [{meil: 'A'},{meil: 'B'},{meil: 'c'},],
                info:{
                    status: null,
                    token: null,
                    ipAddress: null,
                    data: {
                        id: null,
                        content: null,
                        cacheAt: null,
                    }
                }
            }
        },
        mounted(){
            axios.get('https://v2.jinrishici.com/one.json?client=browser-sdk/1.2&X-User-Token=WnRAkMYWHQshus7nxmsfYwIOYdoCg%2BUs').then(res =>(
                this.info = res.data
            ))
        },
        methods: {
            sayhi: function (){
                alert("hello!" + this.message)
            },
            currentTime1: function (){
                return Date.now();
            },
            Itemremove: function (index){
                this.todoItems.splice(index,1);//一次删除一个
                console.log('删除' + index)
            }
        }
    });
</script>
</body>
</html>
<!--  1.data 和 data() 区别
====一般简单Vue实例(常见教程视频中)
new Vue({
	el: "#id",
	data: {
		message: "Vue实例"
	}
});
===在组件化的项目中
export default {
	name: "home";
	data() {
		return {
			message: "组件化项目一般这样写~",
			......
		}
	}
}
两者区别
在大型项目中 data 需要使用 return来返回数据，
不用return这种方式返回的数据在vue实例中是全局可见的，
容易造成数据污染。使用return 返回的数据仅在组件内可见，
对其他组件不生效。
-->