Android開發人員不得不學習的Vue.js基礎
小編:管理員 49閱讀 2022.08.19
介紹
Vue是一套用于構建用戶界面的漸進式框架。Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
用法 1、Vue實例1<body>
2 <div id="root">{{msg}}</div>
3
4 <script>
5 new Vue({
6 el: "#root",
7 data: {
8 msg: "hello world"
9 },
10 methods{
11
12 }
13 })
14 </script>
15</body>
復制
上述代碼中，在script標簽中實例化了一個Vue對象，該Vue對象和id為root的div標簽綁定了，所以可以通過Vue來操作這個div標簽。data中存放的數據可供div調用，這樣可以動態的修改div中的數據；methods中用于存放各種方法，供標簽調用。div標簽又被稱作掛載點；{{}}被稱作插值表達式。
2、Vue中的數據、事件和方法- v-text：用于操作純文本，它會替代顯示對應的數據對象上的值，它可以用{{}}來簡寫。
1<body>
2 <div id="root">
3 <h1 v-text="number"></h1>
4 </div>
5
6 <script>
7 new Vue({
8 el: "#root",
9 data: {
10 msg: "hello world",
11 number: "123"
12 }
13 })
14 </script>
15</body>
復制
- v-html：用于輸出html，它與v-text區別在于v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標簽解析后輸出。
1<body>
2 <div id="root">
3 <h1 v-text="number"></h1>
4 <h1 v-html="content"></h1>
5 </div>
6
7 <script>
8 new Vue({
9 el: "#root",
10 data: {
11 msg: "hello world",
12 number: "123",
13 content: "<h1>hello world</h1>"
14 }
15 })
16 </script>
17</body>
復制
- v-on:事件名稱：用來綁定一個事件監聽器，通過它調用我們Vue實例中定義的方法。v-on:可以簡寫成@符號。
1<body>
2
3 <div id="root">
4 <div @click="handleClick">{{content}}</div>
5 </div>
6
7 <script>
8 new Vue({
9 el: "#root",
10 data: {
11 content: "hello"
12 },
13 methods: {
14 handleClick: function() {
15 this.content = "world"
16 }
17 }
18 })
19 </script>
20</body>
復制3、屬性綁定和雙向數據綁定
- v-bind:屬性名稱：它可以往元素的屬性中綁定數據，也可以動態地根據數據為元素綁定不同的樣式。v-bind:可以簡寫成:符號。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 </div>
6
7 <script>
8 new Vue({
9 el: "#root",
10 data: {
11 content: "hello world",
12 title:"I'm hello world"
13 }
14 })
15 </script>
16</body>
復制
- v-model：該指令綁定的元素就是組件的輸出結果。一般用于表單組件，當輸入框中的內容改變時，文本也跟著改變。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 </div>
8
9 <script>
10 new Vue({
11 el: "#root",
12 data: {
13 content: "hello world",
14 title:"I'm hello world",
15 vcontent:"I'm v-model"
16 }
17 })
18 </script>
19</body>
復制4、計算屬性和偵聽器
- computed：比較適合對多個變量或者對象進行處理后返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化。如果監測的值沒有發生改變的話，那么會再次使用這個結果值時不會去再次計算，而是使用上次的緩存值。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 姓：<input v-model="firstName" /> 名：<input v-model="lastName" />
8 <div>{{fullName}}</div>
9 </div>
10
11 <script>
12 new Vue({
13 el: "#root",
14 data: {
15 content: "hello world",
16 title: "I'm hello world",
17 vcontent: "I'm v-model",
18 firstName: '',
19 lastName: ''
20 },
21 computed :{
22 fullName: function() {
23 return this.firstName + ' ' + this.lastName
24 }
25 }
26 })
27 </script>
28</body>
復制
- watch：偵聽器指的是去監聽某一個數據（data里面）或者計算屬性（computed里面）的變化，一旦數據發生了變化，就能回調。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 姓：<input v-model="firstName" /> 名：<input v-model="lastName" />
8 <div>{{fullName}}</div>
9 <div>{{count}}</div>
10 </div>
11
12 <script>
13 new Vue({
14 el: "#root",
15 data: {
16 content: "hello world",
17 title: "I'm hello world",
18 vcontent: "I'm v-model",
19 firstName: '',
20 lastName: '',
21 count: 0
22 },
23 computed: {
24 fullName: function() {
25 return this.firstName + ' ' + this.lastName;
26 }
27 },
28 watch: {
29 fullName: function() {
30 this.count++;
31 }
32 }
33 })
34 </script>
35</body>
復制5、三個常見指令
- v-if：控制元素是否存在（顯示）的，直接把元素從DOM樹中移除或者添加到DOM樹中，性能略差。
- v-show：控制元素是否顯示的，通過改變display屬性來控制元素是否顯示，性能略好。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 姓：<input v-model="firstName" /> 名：<input v-model="lastName" />
8 <div>{{fullName}}</div>
9 <div v-if="show">{{count}}</div>
10 <button @click="handleClick">toggon</button>
11 </div>
12
13 <script>
14 new Vue({
15 el: "#root",
16 data: {
17 content: "hello world",
18 title: "I'm hello world",
19 vcontent: "I'm v-model",
20 firstName: '',
21 lastName: '',
22 count: 0,
23 show:true
24 },
25 methods: {
26 handleClick: function() {
27 this.show=!this.show;
28 }
29 },
30 computed: {
31 fullName: function() {
32 return this.firstName + ' ' + this.lastName;
33 }
34 },
35 watch: {
36 fullName: function() {
37 this.count++;
38 }
39 }
40 })
41 </script>
42</body>
復制
- v-for：指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組并且 item 是數組元素迭代的別名。
1<body>
2
3 <div id="root">
4 <div v-bind:title="title">{{content}}</div>
5 <input v-model="vcontent" />
6 <div>{{vcontent}}</div>
7 姓：<input v-model="firstName" /> 名：<input v-model="lastName" />
8 <div>{{fullName}}</div>
9 <div v-if="show">{{count}}</div>
10 <button @click="handleClick">toggon</button>
11 <ul>
12 <li v-for="(item, index) of list" :key="index">
13 {{item}}
14 </li>
15 </ul>
16 </div>
17
18 <script>
19 new Vue({
20 el: "#root",
21 data: {
22 content: "hello world",
23 title: "I'm hello world",
24 vcontent: "I'm v-model",
25 firstName: '',
26 lastName: '',
27 count: 0,
28 show:true,
29 list:[1,2,3]
30 },
31 methods: {
32 handleClick: function() {
33 this.show=!this.show;
34 }
35 },
36 computed: {
37 fullName: function() {
38 return this.firstName + ' ' + this.lastName;
39 }
40 },
41 watch: {
42 fullName: function() {
43 this.count++;
44 }
45 }
46 })
47 </script>
48</body>
復制組件的使用
組件是可復用的Vue實例，且帶有一個名字，在Vue中分為全局組件和局部組件，局部組件需要在Vue對象中注冊才能被使用。
1、全局組件的定義1<body>
2 <todo-item></todo-item>
3</body>
4
5<script>
6 Vue.component('todo-item',{
7 template: '<li>item</li>'
8 })
9
10 new Vue({
11
12 })
13</script>
復制2、局部組件的定義
1<body>
2 <todo-item></todo-item>
3</body>
4
5<script>
6 var TodoItem={
7 template='<li>item</li>';
8 }
9
10 new Vue({
11 //注冊局部組件，然后才能在外部使用
12 components:{
13 'todo-item':TodoItem
14 }
15 })
16</scr
復制
相關推薦
- Vue3（二）工程化開發方式做項目 工程化的開發方式這是開發中、大型項目的必備技能，網上資料也很多，這里只是一個簡單的綜合性的介紹。包括vue的全家桶、建立項目的幾種方式、UI庫的簡單使用等？梢院蜕弦黄腸nd方式做項目做一下對比。node.js，npm、cnpm、yarnnode.js執行 npm run serve ，…
- Hibernate Criterion 在查詢方法設計上能夠靈活的依據Criteria的特點來方便地進行查詢條件的組裝.Hibernate設計了CriteriaSpecification作為Criteria的父接口,以下提供了Criteria和DetachedCriteria.Criteria和DetachedCriteria的主要差別在于創建的形式不一樣,Criteria是在線的,所…
粵公網安備 44010402000066號