Выражения связывания в шаблонах очень удобны, но они на самом деле используются только для простых операций. Шаблон должен описать структуру представления. Поместить слишком много логики в шаблон может сделать шаблон слишком тяжелым и трудным для поддержания. Вот почему Vue.js ограничивает выражения связывания с одним выражением. Если требуется более одного выражения, следует использовать ** вычислительные атрибуты.
Основные примеры
<div id = "Пример"> a = {{a}}, b = {{b}} </div> var vm = new vue ({el: '#Example', data: {a: 1}, вычисляется: {// a Getter для вычисленного атрибута b: function () {// `указывает на экземпляр VM return this.a + 1}}})Здесь мы объявляем вычисленную собственность б. Функция, которую мы предоставляем, будет использоваться в качестве Getter для собственности Vm.b.
Console.log (vm.b) // -> 2vm.a = 2console.log (vm.b) // -> 3
Вы можете открыть консоли браузера и изменить виртуальную машину. Стоимость VM.B всегда зависит от стоимости VM.A.
Вы можете связать вычисленные свойства в шаблоне, как вы связываете нормальное свойство. Vue знает, что VM.B зависит от VM.A, поэтому, когда Vm.A изменяется, привязки, которые зависят от VM.B, также будут обновлены. И самое лучшее, что мы создаем эту зависимость декларативно: добычи вычислимых свойств чисты и не имеют побочных эффектов, поэтому их также легко проверить и понимать.
Вычислить свойства против $ watch
Vue.js предоставляет метод $ watch, который используется для наблюдения за изменениями данных на экземплярах VUE. $ watch заманчиво, когда некоторые данные должны измениться на основе других данных, особенно если вы из Angularjs. Тем не менее, обычно лучше использовать вычисленные свойства вместо императивного обратного вызова $ Watch. Рассмотрим следующий пример:
<div id = "demo"> {{fullname}} </div> var vm = new Vue ({el: '#demo', data: {firstname: 'foo', lastname: 'bar', fullnam this.lastname}) vm. $ watch ('lastname', function (val) {this.fullname = this.firstname + '' + val})Приведенный выше код является повторением императивов. Сравнение с свойствами расчета:
var vm = new Vue ({data: {FirstName: 'foo', lastname: 'bar'}, compuled: {fullname: function () {return this.firstname + '' + this.lastname}}})Это лучше, не так ли?
Рассчитайте сеттер
Вычислимый атрибут - это просто getter по умолчанию, но вы также можете предоставить сеттер, когда это необходимо:
// ... вычислить: {fullName: {// getter get: function () {return this.firstname + '' + this.lastname}, // setter set: function (newvalue) {var name = newvalue.split ('') this.firstname = names = [0] this.lastname = natie.Теперь при вызове vm.fullname = 'John doe', будет вызовет сеттер, и Vm.firstname и vm.lastname также будут обновлены соответствующим образом.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.