запись кадра VUE

Что такое вю

Официальный сайт ( https://cn.vuejs.org/ )

Vue.js кадр является постепенным пользовательским интерфейсом сборки. Другой тяжеловес кадр отличается, 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 (Framework), представляет собой комплексное решение, с использованием рамок времени, необходимо поместить код в рамки в нужном месте, рамка называет свой код в нужное время

　　Представители: вя
　　структура обеспечивает свое собственное программирование, представляет собой комплексное решение
　　при использовании кадра управления кадрами все, нам нужно только написать код в соответствии с правилами
　　инвазивной высокой рамы ( от начала до конца)

Установка Вью

Скачать 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 означает сеть доставки контента, т.е. доставки контента в сети.

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>

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

谢谢观看！！！！