Quantcast
Channel: Библиотека знаний
Viewing all articles
Browse latest Browse all 1318

Vue.Js Framework - [RU]

$
0
0

Vue.Js Framework

В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications)

Документация

Объект VueJs

Vue.use({
    install:function(Vue, options){ 
        Vue.mixin({ 
        }); 
},{
    createComputed:true}); 
var app =new Vue({// Используется в раннем связывании
    el:'#app',
    name:'nameApp',//
    props:[],//
    data(){},//
    methods:{},//
    computed:{},//
    watch:{},//
    components:{},// Событие перед созданием компонента
    beforeCreate(){},// Событие после создания компонента
    created(){},// 
    beforeMount(){},});

Глобальная конфигурация

Vue.config - это объект, содержащий глобальные конфигурации Vue. Вы можете изменить свои свойства, перечисленные ниже, перед загрузкой приложения:

  • Vue.config.silent = true
  • Vue.config.devtools = true
  • Vue.config.errorHandler = function (err, vm, info) { ... }
  • Vue.config.warnHandler = function (msg, vm, trace) { ... }
  • Vue.config.ignoredElements = [
    /^ion-/,
    'another-web-component' ]
  • Vue.config.keyCodes = {}

Конструкции html (атрибуты)

  • v-bind, : - Связывает HTMLатрибут с переменными или методом (:href, :src), также можно применять java-script выражения
  • v-on, @ - Методы (click, change, blur, etc) или в нативной декларации (onClick, onChange, onBlur)
  • v-model - Связывает входной параметр value и событие input (двусторонняя привязка)
  • v-for - Конструкциия for для массива или для массива возвращенного методом
    <div :v-for="method in methods"></div>
  • v-if - Конструкция if значение переменной или переменая возращаемоя методом (скрывает или показывает тэг)
  • v-html - Вывод HTML
  • v-show -
  • :is - наименование компонента, если по какой-либо причине нельзя испозовать тег в качестве названия компонента
    <div :is="com1"><div><!-- или --><com-1></com-1>

Свойства объекта

  • data: {}
  • methods: {}
  • computed: {} - Отслеживает переменные внутри методов декларированных в computed (возвращает значение)
  • props: [] - Аналогично объявлению входящих в функцию параметрах
  • wath: {} - Отслеживает изменение именованных как метод переменных
  • template: "" -
  • model: {}
  • components: {} - Список копонентов
  • filters: {} - Применяются для обработке в выводе {{ | filterName}}
  • directives: {} - Методы представляют из себя директивы v-todo-focus, имена методов указываются без v-
    • Пример
      <inputclass="edit"type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
  • mountend: {} -

Методы объекта

  • this.$emit() - Вызов метода дочернего компанента
  • this.$el - виртуальный дом
  • this.$mount(selector) - При этом необходимо из app удалить указание елемента el
  • this.$refs - Ссылки на реальный дом елементы
    • <element-name ref="">
  • this.$resource - Сторонний модуль vue-resource (не входит в vuejs)
  • this.$slots - Позмоляет передавать HTML, в качестве строки (В шаблоне необходимо использовать тэг <slot>, так - же он может быть именован <slot name="myslot">)

События

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
  • activated
  • deactivated
  • errorCaptured

Хуки

  • created - Компанент собран, но не помещен в дом

Расширения / Компоненты / Процессоры

Ссылки

Обучение / Трюки / Статьи

Видео

RU

En


Viewing all articles
Browse latest Browse all 1318