Vue
Đằng trước dàn giáo,Miễn trừ nguyên sinh JS trung DOM thao tác đơn giản hoá viết
( trước kia học quá lại đã quên, hiện tại mới biết được nguyên lai vue là đằng trước )
Căn cứ vào MVVM tư tưởng ( model-view -viewModel ) thực hiện số liệu song hướng trói định
model là số liệu mô hình
view phụ trách số liệu triển lãm tức DOM
Trung gian cái này phụ trách hai người nghe lén cùng trói định
Kỹ càng tỉ mỉ sử dụng giảng giảiVueJS đơn giản rõ ràng giáo trình ( một ) chi cơ bản sử dụng phương pháp
Tân kiến Vue đối tượng
1. Trích dẫn vue.js
Ở mặt bàn thành lập một cái Vue.html văn kiện, sau đó dẫn vào vue.js CDN địa chỉ
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
2. Tân kiến Vue ví dụ thực tế
html:
<divid="firstVue">
{{messages}}
</div>
JS:
<script type="text/javascript">
varmyVue=newVue({// myVue chính là Vue sáng tạo một cái đối tượng, có thể lý giải thành đem <div id= "firstVue></div> cùng cái này nhãn bên trong bao hàm sở hữu DOM đều ví dụ thực tế hóa thành một cái JS đối tượng, cái này đối tượng chính là myVue
el:"#firstVue",//el là Vue giữ lại tự, dùng để chỉ định ví dụ thực tế hóa DOM ID hào, #firstVue những lời này chính là nhãn lựa chọn khí, nói cho Vue muốn ví dụ thực tế hóa ID= “firstVue” cái này nhãn.
data:{// data tham số dùng để trói định VUE ví dụ thực tế số liệu lượng biến đổi, mỗi cái bất đồng lượng biến đổi chi gian dùng dấu phẩy phân cách, mặt trên chúng ta trói định tự định nghĩa lượng biến đổi my_data, cũng phú sơ giá trị 'test'
message:"test",
}
})
</script>
Số liệu trói định
v-bind: Là dùng để trói định số liệu, v-on: Còn lại là dùng để trói định sự kiện, tỷ như ta muốn trói định một cái click sự kiện liền như vậy viết
<divid="firstVue"v-bind:hidden="my_hidden">{{my_data}}</div>
<av-bind:href="url">Liên tiếp</a>
varmyVue=newVue({
el:'#firstVue',
data:{
my_data:"test",
my_hidden:"hidden",
url:"baidu",
}
})
v-bind: Không những có thể trói định hidden thuộc tính, disabled thuộc tính, style thuộc tính, color thuộc tính, phàm là nhãn có thuộc tính, đều có thể thông qua phương pháp này tiến hành trói định
v-bind bởi vì thường xuyên sẽ dùng đến,Cho nên cũng có thể viết tắt thành dấu hai chấm:hidden= "my_hidden"
Sự kiện trói định
v-on: Là dùng để trói định sự kiện
<div>{{my_data}}</div>
<buttonv-on:click="clickButton()">Click Me</button>
varmyVue=newVue({
el:'#firstVue',
data:{
my_data:"test",
my_hidden:"hidden"
},
methods:{
clickButton:function(){
this.my_data="Wow! I'm changed!"// trích dẫn chính là cái này vue ví dụ thực tế bộ phận lượng biến đổi, dùng this
// nếu không thêm this, hệ thống sẽ cam chịu ngươi tưởng trích dẫn chính là một cái toàn cục lượng biến đổi
}
}
})
v-on: Ngữ pháp đồng dạng có một cái viết tắt@,Tỷ như v-on:click= "clickButton" liền đồng giá với@click= "clickButton"
Biểu đơn khống kiện trói định
Từ DOM trung thật khi thu hoạch người dùng đưa vào số liệu phú giá trị cấp vue ví dụ thực tế
v-model thông qua hai bước thực hiện số liệu ngược hướng truyền lại:
Bước đầu tiên, trói định DOM nhãn input sự kiện ( tỷ như kêu tapInput())
Bước thứ hai, đương người dùng tiến hành đưa vào thời điểm, kích phát tapInput() hàm số, tapInput() hàm số bên trong đọc lấy này DOM nhãn Value giá trị, phú giá trị cấp vue ví dụ thực tế
Thông qua trở lên hai bước, v-model ngữ pháp đường thực hiện vue số liệu ngược hướng truyền
<!DOCTYPEhtml>
<html>
<head>
<title>Vue Demo</title>
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<divid="firstVue">
<inputtype="text"v-model="my_data"/>
<buttonv-on:click="clickButton">Click Me</button>
<p>{{my_data}}</p>
</div>
</body>
<scripttype="text/javascript">
varmyVue=newVue({
el:'#firstVue',
data:{
my_data:"test",
my_hidden:"hidden"
},
methods:{
clickButton:function(){// ở <input> đưa vào khung đưa vào giá trị thời điểm, v-model sẽ thật khi đem mới nhất giá trị (value) phú giá trị cấp vue ví dụ thực tế my_data lượng biến đổi, mà my_data lượng biến đổi lại đem thật khi hiện ra ở <p> nhãn trung
this.my_data="Wow! I'm changed!"
}
}
})
</script>
</html>
v-model.number mặt sau cái này.number ý tứ là nói ở phản hồi my_step giá trị thời điểm tự động thay đổi thành integer loại hình, bởi vì cam chịu là string loại hình, cho nên muốn nhiều như vậy một câu.
Lắp ráp
Lắp ráp (Component) là Vue cường đại nhất công năng chi nhất. Lắp ráp có thể mở rộng HTML nguyên tố, phong trang nhưng trọng dụng số hiệu. Ở so cao tầng trên mặt, lắp ráp là tự định nghĩa nguyên tố, Vue biên dịch khí vì nó tăng thêm đặc thù công năng.
Ở có chút dưới tình huống, lắp ráp cũng có thể biểu hiện vì dùng is đặc tính tiến hành rồi mở rộng nguyên sinh HTML nguyên tố.
Sở hữu Vue lắp ráp đồng thời cũng đều là Vue ví dụ thực tế, cho nên có thể tiếp thu tương đồng lựa chọn đối tượng ( trừ bỏ một ít căn cấp đặc có lựa chọn ) cũng cung cấp tương đồng sinh mệnh chu kỳ móc.
<divid="firstVue">
<button-demo>Click</button-demo>
</div>
Vue.component('button-demo',{
template:'<button>Hello here!</button>'
})
Thông qua Vue đăng ký một cái gọi là ’button-demo’ lắp ráp, cái này tự định nghĩa lắp ráp là từ Hello here! Tạo thành.
Tức đăng ký ’button-demo’ về sau, liền đồng giá với Hello here!
VUE lắp ráp đối tương đương với một cái VUE ví dụ thực tế,Ở lắp ráp nội có thể định nghĩa phương pháp, số liệu, thậm chí có thể trích dẫn mặt khác lắp ráp
// định nghĩa button-counter lắp ráp
Vue.component('button-counter',{
// định nghĩa số liệu
data:function(){// một cái lắp ráp data lựa chọn cần thiết là một cái hàm số, bởi vậy mỗi cái ví dụ thực tế có thể giữ gìn một phần bị phản hồi đối tượng độc lập copy
return{
count:0
}
},
// định nghĩa phương pháp
methods:{
clickAdd:function(){
this.count++
}
},
template:'<button @click= "clickAdd" >You clicked me {{count}} times</button>'
})
Toàn cục, bộ phận lắp ráp
Mặt trên chúng ta đăng ký chính là toàn cục lắp ráp, cũng chính là ở toàn bộ VUE căn ví dụ thực tế trung đăng ký, cũng có thể lý giải vì thuyên chuyển VUE trạng thái tĩnh phương pháp đăng ký, như vậy đăng ký lắp ráp là có thể ở bất luận cái gì VUE ví dụ thực tế trung sử dụng.
Bộ phận lắp ráp đăng ký liền cho phép người dùng đem tự định nghĩa lắp ráp tác dụng vực hạn chế ở phụ cấp VUE ví dụ thực tế trung:
<divid="app">
<component-a></component-a>
</div>
//component-a là một cái toàn cục lắp ráp
Vue.component('component-a',{
template:'<div><p> nơi này là toàn cục lắp ráp </p><component-b></component-b></div>',
// sử dụng components ở phụ lắp ráp trung đăng ký bộ phận lắp ráp
components:{
'component-b':{
template:'<button> đây là một cái bộ phận lắp ráp </button>'
},
}
})
newVue({
el:"#app"
})
Ởcomponent-a lắp rápSử dụng mấu chốt tự components đăng ký một cái bộ phận lắp rápcomponent-bHơn nữa khảm vàocomponent-aKhuôn mẫu ngữ pháp trung.
v-if/v-show
v-if cùng v-show khác nhau:
v-if là xóa bỏ dom nguyên tố, trực tiếp không nhuộm đẫm, có thể phối hợp v-else cùng v-else-if sử dụng
v-show là khống chế CSS che giấu nguyên tố, thông qua display:none
<pv-if="age < 18">Thanh thiếu niên</p>
<pv-else-if="age < 60">Người thanh niên</p>
<pv-else>Lão nhân</p>
v-for
1, biến liệt kê từng cái tổ v-for= “(item,index) in arr”
2, biến lịch đối tượng v-for= “(value,key,index) in obj”
3, biến liệt kê từng cái tự v-for= “num in 10”
4, key mấu chốt tự đề cao trọng bài trình tự
Chỉ có thể là con số hoặc tự phù xuyến, cần thiết là duy nhất
v-for=(item,index) in arr:key=‘item.id’
<divv-for="(index,item) in addrs">{{index}}:{{item}}</div>
<script>
letvm=newVue({
el:"#app",
data:{
addrs:['aa','bb'],
obj:{
name:' tiểu hoa ',
age:18,
sex:' nữ ',
}
},
methods:{
},
})
</script>
Sinh mệnh chu kỳ
Kỹ càng tỉ mỉ thấy https://blog.csdn.net/m0_58709145/article/details/127393144
Chỉ một cái đối tượng từ sáng tạo đến tiêu hủy quá trình.
Mỗi kích phát một cái sinh mệnh chu kỳ thời gian, sẽ tự động chấp hành một cái sinh mệnh chu kỳ phương pháp ( móc ).
4 cái giai đoạn, 8 cái sinh mệnh chu kỳ
1. Khởi động lại giai đoạn:
beforeCreate: Ví dụ thực tế mới vừa sáng tạo hoàn thành, lúc này còn không có data cùng methods thuộc tính
created: vue ví dụ thực tế data cùng method thuộc tính đã khởi động lại hoàn thành, lúc này còn không có biên dịch khuôn mẫu, từ cái này địa phương có thể thỉnh cầu tiếp lời, thu hoạch số liệu chờ tin tức
2. Ví dụ thực tế quải tái giai đoạn
beforeMount: Quải tái trước khuôn mẫu biên dịch hoàn thành, lúc này e l còn không có quải tái, el còn không có quải tái, data trước mắt có thể thấy được
mounted: Quải tái hoàn thành sau khuôn mẫu biên dịch hoàn thành,$el quải tái hoàn thành
3. Số liệu đổi mới giai đoạn
Nơi này lựa chọn tính chấp hành, thu hoạch số liệu đổi mới hoàn thành chấp hành updated, số liệu đổi mới khi chấp hành beforeUpdate
beforeUpdate: Số liệu đổi mới khi chấp hành,data số liệu lúc này đã là mới nhất số liệu,UI giao diện vẫn là cũ
updated: Số liệu đổi mới hoàn thành sau, giao diện cùng data số liệu lúc này đều là mới nhất, hoàn thành giao diện đổi mới nhuộm đẫm render
4. Tiêu hủy giai đoạn
Tiêu hủy trước: beforeDestroy: Lắp ráp chuẩn bị tiêu hủy, lúc này data cùng methods phương pháp đều có thể dùng, không có hoàn toàn tiêu hủy
Tiêu hủy sau:destroyed: Lắp ráp đã bị tiêu hủy, này lắp ráp ở trình duyệt trung đối ứng DOM tiếp lời đã bị hoàn toàn di trừ!
mounted[ chỉ dùng đến cái này ]
Gửi đi thỉnh cầu đến phục vụ đoan, tới thu hoạch phục vụ quả nhiên số liệu
Ở chỗ này cắm vào số hiệu phiến
newVue({
el:#app,
data:{},
method:{},
mounted():{
console.log("Vue quải tái hoàn thành, gửi đi thỉnh cầu thu hoạch số liệu");
}.
})
Lưu trình 【 còn không có lý giải 】
Sáng tạo một cái Vue ví dụ thực tế, cũng chính là new Vue() thời điểm, đầu tiên hàm số sẽ chấp hành init hàm số, ở init hàm số trung, sẽ chấp hành beforeCreated móc hàm số. beforeCreated, trước đó sẽ trước chấp hành mergeOptions hàm số, được đến $options lựa chọn, hơn nữa đem cái này thiết trí thành VUE ví dụ thực tế một cái thuộc tính. Cho nên ở cái này giai đoạn, init đã chấp hành, cho nên ngàn vạn không cần đi sửa chữa data số liệu, nếu không khả năng sẽ xuất hiện số liệu vô pháp nghe lén trạng huống. Ở cái này giai đoạn, số liệu không có nghe lén, cũng không có trói định đến VUE ví dụ thực tế mặt trên, cũng không có quải tái đối tượng
Đương beforecreated chấp hành xong lúc sau, đương injections ( tiêm vào ) cùng reactivity ( phản xạ ) thời điểm sẽ chấp hành created. Ở cái này giai đoạn, số liệu đã trói định đến ví dụ thực tế mặt trên, nhưng là còn không có quải tái đối tượng.
Đương created lúc sau, nó sẽ đi phán đoán instance ( ví dụ thực tế ) bên trong hay không đựng ‘el’ cái này option lựa chọn, nếu không có, nó sẽ thuyên chuyển vm. m o u n t ( e l ) Phương pháp này, sau đó chấp hành bước tiếp theo , Ý nghĩa nó sẽ đình chỉ biên dịch, sinh mệnh chu kỳ kết thúc, nếu có lời nói, trực tiếp chấp hành bước tiếp theo. Lúc sau sẽ phán đoán hay không đựng t e m p l a t e Cái này thuộc tính, nếu có lời nói, nó sẽ đem t e m p l a t e Phân tích thành một cái r e n d e r f u n c t i o n ,Đây là một cái t e m p l a t e Biên dịch quá trình, kết quả là phân tích thành một cái r e n d e r Hàm số, nếu không có t e m p l a t e Lựa chọn nó sẽ đem phần ngoài H T M L Làm khuôn mẫu biên dịch ( t e m p l a t e Khuôn mẫu ưu tiên cấp cao hơn o u t e r H T M L ). e n d e r Hàm số lựa chọn > t e m p l a t e Lựa chọn > o u t e r H T M L . . b e f o r e M o u n t e d Sẽ chỉ ở có r e n d e r f u n c t i o n Lúc sau mới có thể chấp hành, đương chấp hành xong r e n d e r f u n c t i o n Lúc sau mới có thể thuyên chuyển M o u n t e d .Có thể nhìn đến lúc này là cho v u e Ví dụ thực tế đối tượng tăng thêm mount(el) phương pháp này, sau đó chấp hành bước tiếp theo, ý nghĩa nó sẽ đình chỉ biên dịch, sinh mệnh chu kỳ kết thúc, nếu có lời nói, trực tiếp chấp hành bước tiếp theo. Lúc sau sẽ phán đoán hay không đựng template cái này thuộc tính, nếu có lời nói, nó sẽ đem template phân tích thành một cái render function, đây là một cái template biên dịch quá trình, kết quả là phân tích thành một cái render hàm số, nếu không có template lựa chọn nó sẽ đem phần ngoài HTML làm khuôn mẫu biên dịch ( template khuôn mẫu ưu tiên cấp cao hơn outer HTML ). ender hàm số lựa chọn > template lựa chọn > outer HTML.. beforeMounted sẽ chỉ ở có render function lúc sau mới có thể chấp hành, đương chấp hành xong render function lúc sau mới có thể thuyên chuyển Mounted. Có thể nhìn đến lúc này là cho vue ví dụ thực tế đối tượng tăng thêm mount(el)Phương pháp này, sau đó chấp hành bước tiếp theo,Ý nghĩa nó sẽ đình chỉ biên dịch, sinh mệnh chu kỳ kết thúc, nếu có lời nói, trực tiếp chấp hành bước tiếp theo. Lúc sau sẽ phán đoán hay không đựngtemplateCái này thuộc tính, nếu có lời nói, nó sẽ đemtemplatePhân tích thành một cáirenderfunction,Đây là một cáitemplateBiên dịch quá trình, kết quả là phân tích thành một cáirenderHàm số, nếu không cótemplateLựa chọn nó sẽ đem phần ngoàiHTMLLàm khuôn mẫu biên dịch (templateKhuôn mẫu ưu tiên cấp cao hơnouterHTML).enderHàm số lựa chọn>templateLựa chọn>outerHTML..beforeMountedSẽ chỉ ở córenderfunctionLúc sau mới có thể chấp hành, đương chấp hành xongrenderfunctionLúc sau mới có thể thuyên chuyểnMounted.Có thể nhìn đến lúc này là chovueVí dụ thực tế đối tượng tăng thêmel thành viên, hơn nữa thay đổi rớt treo ở DOM nguyên tố. Bởi vì ở phía trước console trung đóng dấu kết quả có thể nhìn đến beforeMount phía trước el thượng vẫn là undefined. Có thể thấy được tới, ở mounted phía trước, nhuộm đẫm DOM còn không có quải tái đến giao diện nội. Đương ở Mounted quải tái xong lúc sau, cái này lưu trình mới có thể chấp hành xong.
Mặt khác sinh mệnh chu kỳ yêu cầu mặt khác kích phát điều kiện, tỷ như đương giao diện nội data phát sinh thay đổi sẽ thuyên chuyển beforeUpdate, sau đó trải qua virtual DOM, cuối cùng đến Updated đổi mới xong. Đương lắp ráp bị tiêu hủy thời điểm, sẽ thuyên chuyển beforeDestory, cùng với destory.
beforeDestroy móc hàm số ở ví dụ thực tế tiêu hủy phía trước thuyên chuyển. Tại đây một bước, ví dụ thực tế vẫn cứ hoàn toàn nhưng dùng.
destroyed móc hàm số ở Vue ví dụ thực tế tiêu hủy sau thuyên chuyển. Thuyên chuyển sau, Vue ví dụ thực tế chỉ thị tất cả đồ vật đều sẽ cởi trói định, sở hữu sự kiện nghe lén khí sẽ bị di trừ, sở hữu hạt lệ cũng sẽ bị tiêu hủy
995
Đến 【 tưới nước nhạc viên 】 lên tiếng
