VUE框架入门

vue是什么

官网（https://cn.vuejs.org/）

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计；
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

vue的作者

尤雨溪中国无锡

开发这一行中少有的中国人，作者详细介绍（https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin）

库和框架的区别

库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

　　代表：jQuery
　　jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

　　代表：vue
　　框架规定了自己的编程方式，是一套完整的解决方案
　　使用框架的时候，由框架控制一切，我们只需要按照规则写代码
　　框架的侵入性很高(从头到尾)

安装Vue

cdn下载(需连接网络)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

什么是CND

CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，
使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术

CND概况

CDN的全称是Content Delivery Network，即内容分发网络。

CND加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。

CND加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。

CND服务器通过缓存或者主动抓取主服务器的内容来实现资源储备

CDN基本原理

将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。

VUE实例

<!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>

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

谢谢观看！！！！