Vue basic concepts, learning environment, etc.

Prerequisite:
You have intermediate front-end knowledge of HTML, CSS and JavaScript.

Concept:
Vue.js (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, Vue is also fully capable of powering complex single-page applications when combined with single-file components and libraries supported by the Vue ecosystem.
Regarding progressive, it can be understood as: providing choices and minimizing restrictions, that is, you can choose to use only Vue core to implement the view layer (state to interface mapping and components), and other technologies that are not related to Vue. Or use the core library and other Vue supporting tools. Although the core only solves a small problem, they have an ecosystem and supporting optional tools. When you add them one by one, they can be combined into a very powerful stack, you can cover other issues covered by these more complete frameworks. This flexibility of choice is both its gradualness.
Regarding bottom-up design, my understanding is (not necessarily correct): the design process is not from page to component, but from component to page.
To further understood that the article should read: http:? //Mp.weixin.qq.com/s __biz = MzIwNjQwMzUwMQ == & mid = 2247484393 & idx = 1 & sn = 142b8e37dfc94de07be211607e468030 & chksm = 9723612ba054e83db6622a891287af119bb63708f1b7a09aed9149d846c9428ad5abbb822294 & mpshare = 1 & scene = 1 & srcid = 1026oUz3521V74ua0uwTcIWa & from = groupmessage & isappinstalled = 0 # wechat_redirect&utm_source=tuicool&utm_medium=referral

enters the hands-on stage:
first, provide a small page that can be run directly on the browser, which requires a network.
The purpose of this program is to allow you to find an environment to test small pieces of Vue code written by yourself.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Index Page</title>
</head>

<body>
  <form action="" id="demo">
    <input type="text" value="调试 vuejs 2.0" ref="input1">
    <a href="javascript:void(0)" v-on:click="test1">测试</a>
    <br>
    <span>{{ result1 }}</span>
    <br>

    <input type="text" v-model="input2">
    <a href="javascript:void(0)" v-on:click="test2">测试</a>
    <br>
    <span>{{ result2 }}</span>
  </form>

  <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
  <script type="text/javascript">
  	
  	new View({
    el: "#demo",

    data: {
        result1: null,
        result2: null,
        input2: ""
    },

    created: function() {
        // the created hook is called after the instance is created
    },

    methods: {
        test1: function () {
            this.result1 = this.$refs.input1.value + " 成功!";
        },

        test2: function () {
            this.result2 = this.input2 + " 成功!";
        }
    }
})
  </script>
</body>

</html>

Or if you prefer to edit and test online, then I will give you the URL:
https://jsfiddle.net/chrisvfritz/50wL7mdz/ The component

system is another important concept of Vue, because it is an abstraction that allows us to use
Build large applications from small, self-contained, and often reusable components. Think about it, almost any type of application interface can be abstracted into a component tree:

[img]

[/img]
js defines components, and you can use custom components in the body.

Vue basic concepts, learning environment, etc.

Guess you like