20181125——阅读其他人的Vue博客_vue博客网站阅读全文-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36344771/article/details/84502868

本文深入探讨Vue.js框架的基本概念，包括其作为MVVM框架的特点，如何使用构造函数创建实例，以及数据绑定、条件渲染和组件间通信的示例。通过具体代码演示，帮助读者理解Vue.js的语法和工作原理。

友情链接
阅读绪言：相信这篇文章可能会对产生一些帮助和引起思想的碰撞，因为大家的学习历程是相似的，遇到的困惑也有一定的共通性，如果文章出现谬误之处，欢迎各位童鞋及时指正。

**Vue.js是什么** 是一套构建用户界面的渐进式框架，与其他框架不同的是，Vue只关注视图层。 Vue.js是一种MVVM框架，html是view层，js是Model层，通过vue.js完成中间的逻辑，实现绑定的效果。 **基本语法** 利用Vue构造函数，构造一个Vue的实例，然后在实现Vue实例的el接口实现和HTML元素的挂载，构造函数Vue需要传入一个选项对象，包括，el ，data ，methods，生命周期钩子函数

computed实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="xixi">{{getMessage}}</div>
<script>
    var vm =new Vue({
        el:"#xixi",
        data () {
            return {
                message: 'xixi'
            }
        },
        computed:{
            getMessage () {
                return this.message
            }
        }
    })
</script>
</body>
</html>

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="xixi">
    <p v-if='ok'>Hello World!</p>
    <p v-else>Hello Universal</p>
</div>
<script>
    var vm = new Vue({
        el:"#xixi",
        data () {
            return {
                ok: true
            }
        }
    })
</script>
</body>
</html>

子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{total}}</p>
    <my-counter @xixi="fatherClick"></my-counter>
</div>
<script>
    Vue.component('my-counter', {
        template: '<div @click="templateClick">{{count}}</div>',
        data () {
            return {
                count: 0
            }
        },
        methods :{
            templateClick () {
                this.count+=1;
                this.$emit('xixi')
            }
        }
    })
    var vm = new Vue({
        el:"#app",
        data () {
            return{
                total:3
            }
        },
        methods: {
            fatherClick() {
                this.total+=1

            }
        }
    })
</script>
</body>
</html>

父组件可以通过监听子组件的自定义事件，从而改变父组件的数据；
子组件每点击一次，触发templateClick函数，该函数在执行过程中通过$emit(‘xixi’)发出templateClick事件；
button控件同时监听xixi事件，每次发出该事件就改变父组件的total值；

今天最最最重要的slot用法
slot的详细讲解