Vue- basis Introduction

VUE learning framework Basics

What is a library? : The library is a synthetic product code set, the method library we can call to realize their functions.
What is the framework? : The framework is to solve a class of problems and the development of products, we write good code specified location, using the framework to help when we call.

• (Background) with the continuous development of Internet technology, the front frame programmers are constantly updated with changes, the front frame from the previously used jQuery, Bootstrap framework, etc., into the present Vue, React, Angular tripod situation
  Vue It is used to construct a set of progressive JavaScript framework user interface. Interface is driven by two-way data binding, and other large frame difference is, Vue is designed to be applied from the bottom up layer by layer. Vue core library focus only on the view layer, convenience and integration of third-party libraries or existing project
  goal is to achieve data binding Vue responses and views through the combination of components as simple as possible API
  Vue itself is not an all-around frame - only focused on the view layer.
  Vue is a core allows the use of simple declarative syntax template to render data into the DOM system:
  Vue features: easy to use, flexible, efficient, progressive framework.

---

           The primary reason vue can be widely used in the country is that it is based on mvvm doing development framework, mvvm is the front-end development of one very influential mode , in mvvm, m is the representative model that is the model, the model of centralized coarse variable and the values of the variables, v representative of view i.e. views, centralized storage html and css, vm is the combination of the two names, ViewModel, view and model data processing, the pattern to achieve a responsive two-way data binding.
MVC and MVVM pattern contrast mode:

In traditional mvc in addition to the model and view of logic in the controller, causing the controller logic complexity difficult to maintain, in mvvm there is no direct relationship between the view and model, all interact through viewModel.
Creating Vue example code:
Each application Vue is by creating a new instance of Vue Vue function starts with the

 <script src="VueJs/vue.js"></script>
    <script>
        //new一个vue对象
        //objVue--data数据也会放到objVue中,成员属性以$开头-$data
        //objVue.$nextTick()dom关联的元素执行完毕执行
        //  objVue.$mount('#app');关联元素和el等效
        //页面加载完成之后获取元素并绑定
        onload = function() {
            var objVue = new Vue({
                //element:元素(关联元素)
                //el: '#app',//objVue.$mount('#app')等效
                data: {
                    a: "欢迎使用Vue框架！",
                    imgUrl: "Images/坐标点.PNG"
                },
            });
            objVue.$mount('#app'); //和el等效
            objVue.a = "再见！";
            //输出div中值
            console.log(objVue.$el.innerHTML);
            //每一次更改值都是异步去更改视图的，所以上面获取的还是"欢迎使用Vue框架！"，下面使用$nextTick作用是在Dom执行之后才执行的(可以获得异步更新后的值)
            objVue.$nextTick(function() {
                    console.log(objVue.$el.innerHTML);
                })
                //关联第二个元素
                //new Vue({
                //    el:''
                //});
        }
    </script>

Use VUE:

-mustache Syntax: allows developers to declaratively Vue DOM instance bound to the underlying data.

VUE two core:

• Response databinding: When the data is changed, vue automatically update the view (it is the use of a Object.definedProperty setter / getter agent data, monitor operations on the data.)
• Combined view of assembly: Ui page map book for the component, the component division maintainable, reusable, testable.

---

VUE advantages:

• Improve development efficiency and help reduce unnecessary dom operation; two-way data binding framework provided by the instruction, the front end only need to focus on business logic, no longer concerned about how to render dom.
• Low coupling. View (View) Model may be independent of changes and modifications can be bound to a ViewModel different "View", when the Model View change may be constant, when the Model View can change the time constant.
• Testable. Interface is always more difficult to test, and the test can now be written for the ViewModel
  to use flexible and efficient
• Assembly and responsive design
• Two-way data binding is the advantage of reducing the dom operation, improve development efficiency.

VUE drawback: it is not suitable for seo optimization, and more powerful package, an error is not obvious, suitable for single development project for small and medium

---

The method of the Vue instance:

• $ vm the.;
• vm.$data;
• vm.$options;
• vm.$nextTick();
• vm.$mount();
• vm.$watch();
• vm.$set();