Vue.js框架

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