VUE-入门笔记2注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称 unshift() 方法可向数组的开

1、多个vue实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <h1>多个Vue实例对象</h1>
    <div id="vue-app-one">
        <p>{{title}}</p>
        <p>{{great}}</p>
    </div>
    <div id="vue-app-two">
        <p>{{title}}</p>
        <p>{{great}}</p>
        <button @click="changeAppOneTitle">changeAppOneTitle</button>
    </div>
</body>

<script src="app.js"></script>

</html>

//实例化vue对象
const one = new Vue({
    el: '#vue-app-one',
    data() {
        return {
            title: 'hello yaobinggt one'
        };
    },
    methods: {

    },
    computed: {
        great() {
            return 'hello uu'
        }
    }
})

//实例化vue对象
const two = new Vue({
    el: '#vue-app-two',
    data() {
        return {
            title: 'hello yaobinggt two'
        };
    },
    methods: {
        changeAppOneTitle() {
            one.title = 'i love uu'
        }
    },
    computed: {
        great() {
            return 'hello uu'
        }
    }
})

two.title = 'uumiuub'

2、注册全局组件

注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <h1>多个Vue实例对象</h1>
    <div id="vue-app-one">
        <h1>app one</h1>
        <Greeting></Greeting>
    </div>
    <div id="vue-app-two">
        <h1>app two</h1>
        <Greeting />
    </div>
</body>

<script src="app.js"></script>

</html>

//全局变量
let data = {
    name: 'yaobinggt',
    wechat: '492413983'
}

//创建全局组件
Vue.component('Greeting', {
    //html模版
    template: `
    <p>
    这是全局组件，可以在任何实例的容器中使用
    我的名字是{{name}},我的微信是${this.wechat}
    <button @click="changeName">改名</button>
    </p>
    
    `,
    //属性
    data() {
        return data;
    },
    //方法等
    methods: {
        changeName() {
            this.name = "yaoUU"
        }
    }
})

//实例化vue对象
const one = new Vue({
    el: '#vue-app-one'
})

//实例化vue对象
const two = new Vue({
    el: '#vue-app-two'
})

3、FETCH请求

用FETCH实现get、post数据请求和提交
fetch 只给一个接口地址参数就是get请求；加一个对象，这个对象可以用来设置一个请求的方法（post）
body 要求我们传递过去的数据一定是字符串 JSON.stringify 转换成字符串
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

<div id="vue-app">
    <form @submit.prevent="onSubmit">
        <input type="text" v-model="todo.title">
        <input type="checkbox" v-model="todo.completed">
        <input type="submit" value="提交">
    </form>

    <!-- get请求 -->
    <ul>
        <li v-for="(todo,index) in todos" v-if="todo.completed">{{todo.title}} <br> <em>{{todo.completed}}</em></li>
    </ul>
</div>

new Vue({
    el: '#vue-app',
    data() {
        return {
            todos: [],
            todo: {
                title: '',
                completed: false
            }
        }
    },
    mounted() {
        //fetch api 请求接口
        fetch("http://jsonplaceholder.typicode.com/todos").then((res) => {
            return res.json();
        }).then((todos) => {
            this.todos = todos;
        });

    },
    methods: {
        onSubmit() {
            //console.log(this.todo)
            //提交到接口里面去
            //fetch 只给一个接口地址参数就是get请求；加一个对象，这个对象可以用来设置一个请求的方法（post）

            fetch('http://jsonplaceholder.typicode.com/todos', {
                method: 'POST',
                //body 要求我们传递过去的数据一定是字符串  JSON.stringify 转换成字符串
                body: JSON.stringify(this.todo),
                headers: {
                    'Content-type': 'application/json'
                }
            }).then(res => {
                return res.json()
            }).then(todo => {
                //console.log(todo)
                //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
                this.todos.unshift(todo);
            })
        }
    }
})

4、Axios请求

<h1>axios请求</h1>
<div id="vue-app">
    <form @submit.prevent="onSubmit">
        <input type="text" v-model="todo.title">
        <input type="checkbox" v-model="todo.completed">
        <input type="submit" value="提交">
    </form>

    <!-- get请求 -->
    <ul>
        <li v-for="(todo,index) in todos" v-if="!todo.completed">{{todo.title}} <br> <em>{{todo.completed}}</em>
        </li>
    </ul>
</div>

new Vue({
    el: '#vue-app',
    data() {
        return {
            todos: [],
            todo: {
                title: '',
                completed: false
            }
        }
    },
    mounted() {
        //axios api 请求接口
        axios.get('http://jsonplaceholder.typicode.com/todos').then(res => {
            //console.log(res);
            this.todos = res.data
        })

    },
    methods: {
        onSubmit() {
            //console.log(this.todo)
            //提交到接口里面去
            //axios  post请求
            axios.post('http://jsonplaceholder.typicode.com/todos', this.todo).then(res => {
                this.todos.unshift(res.data)
            })


        }
    }
})