VUE frame entry

What is vue

Official website ( https://cn.vuejs.org/ )

Vue.js frame is a gradual build user interface. Other heavyweight frame is different, Vue bottom-up design incremental development;
Vue core library focus only on the view layer, and very easy to learn, easy to integrate with other libraries or existing project.
Vue is fully capable of driving the use of complex single-page single-file application components and Vue ecosystem support library development.

vue author

Especially the rain the river in Wuxi, China

The development of this line of the few Chinese people, the authors detail ( https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin )

The difference between libraries and frameworks

Library (Library), is essentially a collection of functions. Each call function to achieve a particular function, then transfers control to the user

　　Representative: jQuery
　　core jQuery the library: DOM operations, namely: a package DOM operation, simplified operation DOM

Framework (Framework), is a complete solution, using the framework of time, need to put your code into the framework of the right place, the framework calls your code at the right time

　　Representatives: vue
　　framework provides its own programming, is a complete solution
　　when using frame by frame control everything, we only need to write the code in accordance with the rules of
　　invasive high frame (start to finish)

Installation Vue

Download cdn (to be connected to the network)

<-! Development environment version includes a helpful warning command line ->
<Script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ Script>
< ! - production version, optimized for size and speed ->
<Script src = "https://cdn.jsdelivr.net/npm/vue"> </ Script>

What is the CND

CDN content distribution network is built on top of the network, relying deployed around the edge server, load balancing through the center of the platform, content distribution, scheduling and other functional modules,
allowing users to obtain the required content of the nearest, reduce network congestion and improve user access response speed and hit rate. The key technology of CDN main content storage and distribution technologies

CND Overview

CDN stands for Content Delivery Network, ie, content delivery network.

CND accelerated mainly to accelerate the static resources, such as websites upload the picture above, the media, and some Js introduced, css and other documents.

CND accelerate the need to rely on various network nodes, such as 100 CDN servers distributed across the country, accessible from Shanghai, it will return resources from the nearest node, which is the core.

CND Server to build reserves through cache or crawl the content of the active primary server

CDN basic principles

The source station to the content distribution node closest to the user, so the user can conveniently obtain desired content, improve the response speed and the success rate of user access.

VUE examples

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <title>vue的测试</title>
    </head>
    <body>
        <div id="ht">
            {{qd}}  <!--{{}}指的是vue实例所定义的变量取值方式-->
        </div>
    </body>
    <script type="text/javascript">
        //创建实例,一个vue工程,只有一个跟实例
        new Vue({
            el:"#ht",// DOM 元素，挂载视图模型
            // data:(function () {
            //     
            // })()
            // 上下两种函数相等,只是这个用到了Es6语法
            // ES6指的是javascript新规范
            data(){// 定义属性，并设置初始值
                return{
                    qd:'本是青灯不归客' ,//给变量设置值
                };
            }
        });
        
    </script>
</html>

效果：

但是这里一定要注意一点就是既然写了变量就一定要赋值，哪怕是null也行

这是没赋值的错，打开开发者工具查看控制台才能看到

给他赋了个值，null

效果图：就是不显示值但是控制台不报错了

vue-model双向绑定变量指令案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <title>vue-model双向绑定变量指令</title>
    </head>
    <body>
        <div id="ht">
            {{qd}}
            <input type="text" v-model="qd"/>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:'#ht',
            data(){
                return{
                    qd:null
                };
            }
        })
    </script>
</html>

效果图：文本框中输入什么，文本框外面就显示什么

v-on事件案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <title>v-on事件</title>
    </head>
    <body>
        <div id="ht">
            <input type="text" v-model="qd"/>
            <button v-on:click="hhh">提交</button>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:'#ht',
            data(){
                return{
                    qd:null,
                };
            },
            methods:{
                hhh(){
                    console.log(this.qd);
                }
            }
        })
    </script>
</html>

效果图：文本框中输入什么。控制台就显示什么

谢谢观看！！！！