-
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>todolist</title>
? ? <script src="../vue.js"></script>
</head>
<body>
? ? <div id="root">
? ? ? ? <div>
? ? ? ? ? ? <input v-model="inputValue" />
? ? ? ? ? ? <button @click="handleSubmit">提交</button>
? ? ? ? </div>
? ? ? ? <ul>
? ? ? ? ? ? <!-- <li v-for="(item,index) of list" :key="index">
? ? ? ? ? ? ? ? {{item}}
? ? ? ? ? ? </li> -->
? ? ? ? ? ? <todo-item
? ? ? ? ? ? ?v-for="(item,index) of list"
? ? ? ? ? ? ?:key="index"
? ? ? ? ? ? ?:content="item"
? ? ? ? ? ? ?:index="index"
? ? ? ? ? ? ?@delete="handleDelete">
? ? ? ? ? ? </todo-item>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? // 組件的拆分
? ? ? ? // ? ? 我們可以把一個較大的項目拆分成一個個小的組件，這樣維護(hù)起來就比較方便了
? ? ? ? // vue組件的定義，這里說道兩種：
? ? ? ? // 全局組件：vue提供了vue.component()來定義組件，第一個參數(shù)是組件的名字，也是我們將要寫在dom里的標(biāo)簽，第二個參數(shù)是一個對象，里面可以定義一個模板，也是我們要顯示的內(nèi)容。
? ? ? ? // 還有一種方式叫做局部組件，在外面定義一個對象，對象里面裝著模板，但是這樣還不可直接使用，我們需要在實例里面進(jìn)行注冊，配置標(biāo)簽名和內(nèi)容。意思就是在我這個vue實例里面去使用這個組件。
? ? ? ? // 在標(biāo)簽內(nèi)可以像以往一樣正常使用指令。
? ? ? ? // 要想顯示我們想顯示的內(nèi)容，我們可以進(jìn)行傳參，在標(biāo)簽里面定義屬性，屬性就是我們想要顯示的內(nèi)容然后在組件里面用props(固定)給接收過來就可以正常使用了。 ?
? ? ? ?/* ?組件和實例的關(guān)系
? ? ? ? 每一個組件也是一個vue的實例。
? ? ? ? 在template中雙引號可以在里面嵌套單引號，單引號不能嵌套單引號，會出現(xiàn)一些問題。
? ? ? ? 每一個項目都是由很多個組件組成的，也就是很多個vue實例組成的，因為每個組件就是vue實例，所以在組件中可以正常使用vue的一些方法，比如methods,watch等等。
? ? ? ?每個組件都擁有自己的props、data、methods等等
? ? ? ? 注意：如果我們沒有在vue根實例?下面定義模板，我們會按照掛載點尋找，并把下面的模板當(dāng)作是模板。
?*/
? ? ? ? // 全局組件
? ? ? ? Vue.component('todo-item',{
? ? ? ? ? ? props:['content','index'],
? ? ? ? ? ? template:'<li @click="handleClick">{{content}}{{index}}</li>',
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? handleClick:function(){
? ? ? ? ? ? ? ? ? ? this.$emit('delete',this.index)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? // 局部組件
? ? ? ? // var TodoItem = {
? ? ? ? // ? ? template: '<li>item</li>'
? ? ? ? // }
? ? ? ? // 刪除功能
? /* ? ? ? 父組件和子組件通信：屬性形式
? ? ? ? ? ? 父組件中通過屬性向子組件傳遞值，子組件接受屬性的內(nèi)容并再子組件上進(jìn)行內(nèi)容顯示
? ? ? ? ? ? 子組件可以綁定事件，實現(xiàn)子組件的刪除必須刪除父組件的相關(guān)數(shù)據(jù)，
? ? ? ? ? ? 子組件和父組件通信：發(fā)布訂閱模式
? ? ? ? ? ? 子組件被點擊需要通知父組件把數(shù)據(jù)刪除，
? ? ? ? ? ? 傳遞一個$emit，觸發(fā)一個自定義事件，傳遞一個值，
? ? ? ? ? ? 父組件在模板里可以監(jiān)聽子組件向外傳遞的出發(fā)的delete事件，如果父組件監(jiān)聽到子組件的事件，
? ? ? ? ? ? 執(zhí)行delete事件 */
? ? ? ? new Vue({
? ? ? ? ? ? el: '#root',
? ? ? ? ? ? // Components: {//實例中配置這個才能使用局部組件
? ? ? ? ? ? // ? ? 'todo-item': TodoItem
? ? ? ? ? ? // },
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? inputValue: '',//初始值為空
? ? ? ? ? ? ? ? list: []
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? handleSubmit: function () {
? ? ? ? ? ? ? ? ? ? this.list.push(this.inputValue)
? ? ? ? ? ? ? ? ? ? this.inputValue = ''
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? handleDelete:function(index){
? ? ? ? ? ? ? ? ? ? this.list.splice(index,1)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
查看全部 -
子給父組件靠發(fā)布訂閱
父給子靠參數(shù)
查看全部 -
?template下只允許1個最外層的包裹元素
cli工具中，data不再是對象，作為組件，數(shù)據(jù)應(yīng)該要變?yōu)橐粋€函數(shù)，函數(shù)的返回值為具體數(shù)據(jù)
ES6中可以從data:function()簡化為data()
this.list應(yīng)該指向data下的list，為什么會指向data里面的list呢？
因為vue底層幫我們做了處理，this.list就是this.$data.list的縮寫，vue會自動去找，如果data里面沒有，會去computed或者methods里去找
父組件循環(huán)todo-item的時候需要給每一項加一個key值，暫時可以用index來賦值
查看全部 -
父組件向子組件通信： 通過屬性形式
1、父組件通過屬性的形式向子組件傳遞參數(shù)，子組件中使用props來接收父組件傳遞過來的屬性參數(shù)，并在自己的模板中使用
2、子組件可以綁定事件，通過事件觸發(fā)向父組件傳遞參數(shù)
子組件向父組件通信：通過發(fā)布訂閱模式
1、在子組件的方法中通過$emit向父組件拋出觸發(fā)事件名稱（delete）和觸發(fā)事件的參數(shù)（index）
2、父組件通過監(jiān)聽子組件拋出的事件而觸發(fā)自己的事件（inputDelete）
? ...
?? <todo-item v-for="(item,index) of list" :key="index" :value="item" :index="index" @delete="inputDelete"></todo-item>
? ...
<script>
? Vue.component('todo-item',{
??? props: ['value','index'],
??? template: "<li @click='deleteClick'>{{value}}</li>",
?? ?methods:{
?? ??? deleteClick: function(){
?? ?????? this.$emit("delete",this.index)
?? ??? }
?? ?}
? })
?
? new Vue({
...
?? ?methods:{
...
?? ?? inputDelete: function(index){
?? ????? this.list.splice(index,1)
?? ?? }
?? ?},
...
})
</script>查看全部 -
1、每一個組件就是一個vue實例；
2、組件=實例，實例=組件，所以組件中也可以有template、data、methods、等屬性；
3、在vue實例中，若沒有寫template，則vue會將該實例掛載點下的所有內(nèi)容都當(dāng)做模板使用；
查看全部 -
1、什么是組件：頁面中的某一塊組成部分，可以是一個或多個標(biāo)簽，可以是模板中的一部分內(nèi)容，等等，
???? 使用組件時，根據(jù)組件名稱以標(biāo)簽形式直接引用即可，如<todo-item></todo-item>;
2、全局組件：在頁面中任何地方都可以用，vue中有一個方法用來定義全局組件，例：
???? Vue.component('組件名稱'，{
????? props:? [組件接收其他地方傳遞過來的參數(shù)數(shù)組]，
????? template: '組件模板，要展示在頁面中的內(nèi)容'
})
3、局部組件：必須在vue實例中聲明后才能使用，且只能在該實例的掛載點下使用，例：
??? var 組件變量 =? {
??????? props:? [組件接收其他地方傳遞過來的參數(shù)數(shù)組]，?????
??????? template: '組件模板，要展示在頁面中的內(nèi)容'
?? }
?? new Vue({
????? el: "#root",
????? components:{
????????? '組件名稱' : 組件變量
},
??? ...?????
})
實例：
<div id="root">
<div>
?? <input v-model="inputValue"/>
?? <button @click="inputSubmit">提交</button>
?? <todo-item v-for="(item,index) of list" :key="index" :value="item"></todo-item>
?? <li>今天要做的事{{count}}</li>
</div>
</div>
<script>
? Vue.component('todo-item',{? //組件名稱，可在頁面以標(biāo)簽形式直接引用
??? props: ['value'],?? //組件接收的參數(shù)
??? template: "<li>{{value}}</li>"??? //將接收的參數(shù)在頁面進(jìn)行展示
? })
?
?/** var todoItem = {??? props: ['value'],?? //組件接收的參數(shù)
??? template: "<li>{{value}}</li>"??? //將接收的參數(shù)在頁面進(jìn)行展示} */
? new Vue({
??? el: "#root",? /**? compontents:{
?????? 'todo-item' : todoItem
?? }, */
??? data: {
?? ??? inputValue:'',
?? ??? list: [],
?? ??? count:0
?? ?},
?? ?methods:{
?? ?? inputSubmit: function (){
?? ????? this.list.push(this.inputValue)
?? ??? ? this.inputValue = ''
?? ?? }
?? ?},
?? ?watch:{
?? ?? list: function(){
?? ????? this.count ++
?? ??? }
?? ?}
})
</script>查看全部 -
<body>
<div id="root">
<div>
?? <input v-model="inputValue"/>
?? <button @click="inputSubmit">提交</button>
?? <li v-for="(item,index) of list" :key="index">{{item}}</li>
?? <li>今天要做的事{{count}}</li>
</div>
</div>
<script>
? new Vue({
??? el: "#root",
??? data: {
?? ??? inputValue:'',
?? ??? list: [],
?? ??? count:0
?? ?},
?? ?methods:{
?? ?? inputSubmit: function (){
?? ????? this.list.push(this.inputValue)
?? ??? ? this.inputValue = ''
?? ?? }
?? ?},
?? ?watch:{
?? ?? list: function(){
?? ????? this.count ++
?? ??? }
?? ?}
})
</script>
?
</body>查看全部 -
1、v-if ：可用來控制dom的存在與否，后面的值為布爾型，為false時，dom將被移除；
2、v-show： 可用來控制dom的顯示與否，當(dāng)后面的值為false時，dom不會被移除，而是對dom使用了來隱藏了；
3、v-for：可用來循環(huán)展示列表中的數(shù)據(jù)，用法如下，表示循環(huán)遍歷vue實例中l(wèi)ist數(shù)組，其中item（局部變量，名稱隨意）表示當(dāng)前遍歷的元素，index表示當(dāng)前元素對應(yīng)數(shù)組中的下標(biāo)（提高性能），:key的值要唯一，list表示對應(yīng)的數(shù)組：
...
<li v-for="(item,index) of list" :key="index">{{item}}</li>
...
new Vue({
?? ...
??? data:{
?? ?? list: [1,2,3]...
)}
查看全部 -
1、計算屬性：當(dāng)某一個變量需要通過其他變量計算而來時，可將該變量定義在計算屬性中，方法：
在vue實例下的computed屬性中以方法的形式定義該變量；
2、使用計算屬性的優(yōu)點：當(dāng)計算屬性所依賴的其他變量未發(fā)生改變時，計算屬性不會重新計算，會使用之前計算的緩存結(jié)果，這樣可以提高程序運行效率；
3、偵聽器：可監(jiān)控某個變量的變化，從而進(jìn)行進(jìn)行業(yè)務(wù)邏輯處理； 在vue實例下的watch屬性中以方法的形式對某個變量進(jìn)行監(jiān)聽，處理；
例：
<div id="root">
???? 姓：<input v-model="firstName"/>
???? 名：<input v-model="lastName"/>
?? <div>{{fullName}}</div>
?? <div>{{count}}</div>
</div>
<script>
? new Vue({
??? el: "#root",
??? data:{
??????? firstName:"",
??????? lastName:"",
??????? count:0
},
?? computed:{
?????? fullName: function(){
????????????? return this.firstName +" "+ this.lastName
}
},
?? watch:{
??????? fullName: function(){
??????????? this.count++
}
}
})
</script>
查看全部 -
1、屬性綁定：指令v-bind:? ,如v-bind:title="msg"，就可以將title這個屬性和vue實例中data下的msg這個屬性進(jìn)行綁定。v-bind: 可簡寫為： ，即v-bind：title 等同于 :title
2、雙向數(shù)據(jù)綁定：指令v-model ，使用該指令可以使標(biāo)簽內(nèi)容和data中屬性進(jìn)行雙向綁定，即一方的數(shù)據(jù)變化，另一方也會跟著變化。
<div id="root">
?????? <div :title="msg">Hello World</div>
? ? ?? <input v-model="content"/> ?????
?????? <div>{{msg}}</div>
</div>
<script>
?new Vue({
???? el: "#root",
???? data: {
????? msg: "This is a world!",
????? content: "This is content!"
}
})
</script>
查看全部 -
1、插值表達(dá)式： {{number}}? ，即把number的值插入到該位置；
2、"v-on:" : 事件綁定，可簡寫為@，后跟事件和方法名，如v-on:click="方法名" 等同于 @click="方法名"；
3、vue不面向dom編程，而是面向數(shù)據(jù)編程；
4、v-text輸出為純文本，瀏覽器不會再對其進(jìn)行html標(biāo)簽解析；v-html會被瀏覽器進(jìn)行html標(biāo)簽解析后輸出。?? 如v-text=“msg”時，數(shù)據(jù)展示為<h1>Hello World!</h1>,
???? 為v-html="msg"時，展示為 Hello World!
<div id="root">
<div v-text="msg"> </div>
</div>
<script>
? new Vue({
???? el: "#root",
???? msg: "<h1>Hello World!</h1>"
})
</script>
查看全部 -
實例---掛載點----模板 之間的關(guān)系：
1、new vue（{ }）代表一個vue實例；
2、vue實例中el屬性值對應(yīng)的id的節(jié)點叫做掛載點；
3、掛載點中的內(nèi)容就是模板；
用法：
1、vue實例只會去處理對應(yīng)掛載點下的內(nèi)容；
2、模板也可以寫在vue實例下的template屬性中（注：寫在template屬性中后，掛載點里面寫的模板將不在生效）；
3、Vue會結(jié)合模版和數(shù)據(jù)生成最終要展示的內(nèi)容，然后把它放在掛載點之中。
???<div id="root">???? //掛載點
????? <h1> {{msg}}</h1>???? //模板內(nèi)容
????</div>
????<script>
????????new vue({? ? ?? //vue實例
????????????el:"#root",
??????????? template: "<h1> {{msg}} !!!!</h1>", //模板內(nèi)容也可以寫在這個屬性里面
????????????data:{
????????????????msg:"hello wold"????
????????????}
????????})
????</script>
查看全部 -
1、用<script></script>方式引入vue.js時，最好放在<head></head>標(biāo)簽中，可以防止頁面抖屏。
2、vue著重于對數(shù)據(jù)的編寫，而不是dom元素。
3、vue實例通過el這個屬性的值和頁面中掛載點id值一致來控制dom節(jié)點
???<div id="root">//掛載點
????????{{msg}}?
????</div>
????<script>
????????new vue({? ?? //vue實例
????????????el:"#root",
????????????data:{
????????????????msg:"hello wold"????
????????????}
????????})
????</script>
查看全部 -
運行前置條件：? node? ?npm
查看全部 -
單文件組件?
查看全部
舉報