Vue.js基本介绍及其基本逻辑设计结构和使用方法。

献良发布于2018/11/24 09:52

注脚

1.Vue.js Framework Internet Engineering Spring 2018 Pooya Parsa Professor: Bahador Bakhshi CE & IT Department, Amirkabir University of Technology

2.Outline Introduction to Vue.js The Vue instance Declarative Rendering Event Listeners & Input handling v-if and v-for Directives Computed Props Components 2

3.What is Vue.js A  progressive framework  for building user interfaces.  Created by evan you when he was working at Google Creative Labs in 2013. Pronounced /vjuː/, like  view! 3

4.MVVM Architecture Pattern 4

5.Reactivity 5

6.Virtual DOM 6

7.Outline Introduction to Vue.js The Vue instance Declarative Rendering Event Listeners & Input handling v-if and v-for Directives Computed Props Components 7

8.The Vue Instance Every Vue application starts by creating a new  Vue instance  with the Vue function: 8 <script> var vm = new Vue ({ // options }) </script> As a convention, we often use the variable  vm  (short for ViewModel ) to refer to our Vue instance . A Vue application consists of a  root Vue instance  created with new Vue , optionally organized into a tree of nested, reusable components.

9.Vue Lifecycle Diagram 9

10.Vue Lifecycle Diagram 10

11.Outline Introduction to Vue.js The Vue instance Declarative Rendering Event Listeners & Input handling v-if and v-for Directives Computed Props Components 11

12.Declarative Rendering 12 Render template with data

13.Data Bindings 13

14.Data Bindings 14 <div id = "app" > {{ message }} </div> <script> new Vue ({ el: #app , data: { message: Hello World! } }) </script> https://codepen.io/pi0/pen/pdKxKZ

15.Binding attributes 15 <div id = "app" > <img : src = "imageSrc" /> </div> <script> new Vue ({ el: #app , data: { imageSrc: https://lorempixel.com/300/150 } }) </script> https://codepen.io/pi0/pen/mqKzgm

16.Outline Introduction to Vue.js The Vue instance Declarative Rendering Event Listeners & Input handling v-if and v-for Directives Computed Props Components 16

17.DOM Listeners 17

18.DOM Listeners 18 <div id = "app" > <button @ click = "clicked" > Click Me </button> </div> <script> new Vue ({ el: #app , methods: { clicked () { alert ( "HEEY!" ) } } }) </script> https://codepen.io/pi0/pen/aVKRPo

19.Why using listeners in HTML? All Vue handler functions and expressions are strictly bound to the ViewModel. It’s easier to locate the handler function implementations within your JS code. ViewModel code can be pure logic and DOM-free . This makes it easier to test. When a ViewModel is destroyed, all event listeners are automatically removed . You don’t need to worry about cleaning it up. 19

20.Why using listeners in HTML? All Vue handler functions and expressions are strictly bound to the ViewModel. It’s easier to locate the handler function implementations within your JS code. ViewModel code can be pure logic and DOM-free . This makes it easier to test. When a ViewModel is destroyed, all event listeners are automatically removed . You don’t need to worry about cleaning it up. 19

21.<div id = "app" > Your name: <input v-model = "name" ></input> Welcome {{ name }}! </div> <script> new Vue ({ el: #app , data: { name: Guest User } }) </script> Handling User Input (v-model) 21 https://codepen.io/pi0/pen/xPzQZZ

22.Outline Introduction to Vue.js The Vue instance Declarative Rendering Event Listeners & Input handling v-if and v-for Directives Computed Props Components 22

23.Conditional Rendering Conditional rendering (v-if) 23 <div id = "app" > <input type = "checkbox" id = "accept" v-model = "accepted" > <label for = "accept" > I accept terms of use </label> <p v-if = "!accepted" > Please accept terms! </p> <p v-else > Thank you! </p> </div> <script> new Vue ({ el: #app , data: { accepted: false } }) </script> https://codepen.io/pi0/pen/LOrXWx

24.List rendering (v-for) 24 <div id = "app" > <ul> <li v-for = "course in courses" > <input type = "checkbox" v-model = "selectedCourses" : value = "course" /> {{ course }} </li> </ul> {{ selectedCourses }} </div> <script> new Vue ({ el: #app , data: { selectedCourses: [], courses: [ IE , ML , BP , AP ] } }) </script> https://codepen.io/pi0/pen/xPzQLE

25.Outline Introduction to Vue.js The Vue instance Declarative Rendering Event Listeners & Input handling v-if and v-for Directives Computed Props Components 25

26.Computed props Putting too much logic in your templates can make them bloated and hard to maintain and not declarative. Computed props are being cached . Dependencies will be auto tracked. 26

27.Computed props 27 https://codepen.io/pi0/pen/xPzQYR <div id = "app" > <input v-model = "a" > * <input v-model = "b" > = {{ result }} </div> <script> new Vue ({ el: #app , data: { a: 10 , b: 10 }, computed: { result () { return this . a * this . b } } }) </script>

28.Outline Introduction to Vue.js The Vue instance Declarative Rendering Event Listeners & Input handling v-if and v-for Directives Computed Props Components 28

29.Vue Components In Vue, a component is essentially a Vue instance with pre-defined options. They help you extend basic HTML elements to encapsulate reusable code. Components are one of the most powerful features of Vue. 29

30.Composing with Components Component are an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. 30

31.Components for large scale apps 31 An (imaginary) example of what an app’s template might look like with components:

32.Composing Components Components are meant to be used together, most commonly in parent-child relationships. In Vue, the parent-child component relationship can be summarized as  props down, events up . This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand. 32

33.One-Way Data Flow Parent passes data down to the child via  props , and the child sends messages to the parent via  events. 33

34.Component Props Every component instance has its own  isolated scope. Data can be passed down to child components using  props . A prop is a custom attribute for passing information from parent components. 34

35.Custom Events Every Vue instance implements an  events interface , which means it can : Trigger an event using  $emit( eventName ) Listen to an event using $on( eventName ) v-on: eventName @ eventName 35

36.Declare a component In Vue, a component is essentially a Vue instance with pre-defined options: 36

37.Declare a component In more complex projects or when your frontend is entirely driven by JavaScript, these disadvantages become apparent: Global definitions Force unique names for every component String templates Lack syntax highlighting and require ugly slashes for multiline HTML No CSS support While HTML and JavaScript are modularized into components, CSS is conspicuously left out 37

38.Single File Components  In modern UI development, we have found that instead of dividing the codebase into three huge layers (HTML/CSS/JS) that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. This is possible using single-file components  with a  .vue  extension. 38

39.Single File Components 39

40.References http://singlepageappbook.com ( 2013 - Mikito Takada) The Majesty of Vue.js 2 (2017- Alex Kyriakidis, Kostas Maniatis and Evan You) https://developers.google.com/web/fundamentals/web-components/customelements https://developers.google.com/web/fundamentals/web-components/shadowdom 40

user picture
  • 献良
  • 非著名互联网公司工程师

相关Slides