-
v-bind:可以縮寫成:，如“v-bind:title”可以縮寫成“:title”
v-on:可以縮寫成@，如“v-on:click”可以縮寫成“@click”
查看全部 -
通過script標(biāo)簽引入vue.js的時(shí)候，最好是把script標(biāo)簽放到head標(biāo)簽里，可以避免“抖屏”的情況。
查看全部 -
v-bind：=：查看全部
-
v-bind查看全部
-
父子組件的一些交互.
父組件如何向子組件傳參數(shù)
子組件如何向父組件傳參數(shù)~
父組件向子組件傳遞數(shù)據(jù)，可以用屬性。
子組件向父組件可以發(fā)出事件，父組件監(jiān)聽到該事件，再觸發(fā)方法
查看全部 -
<div id="root"> ? ?
<div>
<input type="text" v-model="input" />
<button type="button" @click="handleClick">
提交
</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index"
:content="item" :index="index" @delete="handleDelete">
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props ? ? ? : ? ['content','index'],
template ? ?: ? '<li @click="handleClick">{{content}}</li>',
methods ? ? : ? {
handleClick:function(){
//alert('sss');
this.$emit('delete',this.index);
}
}
})
new Vue({
el:"#root",
data:{
input ? : ? ? ? "hello",
list ? ?: ? ? ? []
},
methods:{
handleClick:function(){
if(this.input == ""){
alert('請(qǐng)?zhí)顚?);
} else {
this.list.push(this.input);
this.input = '';
}
},
handleDelete:function(index){
this.list.splice(index,1);// 刪除,從第index起,一個(gè)元素
}
}
});
</script>
查看全部 -
組件就是實(shí)例,
實(shí)例就是組件~
查看全部 -
<div id="root"> ? ?
<div>
<input type="text" v-model="input" />
<button type="button" @click="handleClick">
提交
</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props ? ? ? : ? ['content'],
template ? ?: ? '<li>{{content}}</li>'
})
new Vue({
el:"#root",
data:{
input ? : ? ? ? "hello",
list ? ?: ? ? ? []
},
methods:{
handleClick:function(){
if(this.input == ""){
alert('請(qǐng)?zhí)顚?);
} else {
this.list.push(this.input);
this.input = '';
}
}
}
});
</script>
查看全部 -
new Vue({})---創(chuàng)建一個(gè)Vue實(shí)例
el: "#root"---綁定id為root的元素（掛載點(diǎn)，只處理掛載點(diǎn)下的內(nèi)容）
data: {msg: "Hello World"}---實(shí)例的數(shù)據(jù)項(xiàng)
template---模板，掛載點(diǎn)即元素里面的內(nèi)容為模板，可在元素或?qū)嵗衪emplate下定義
methods---v-on指令綁定的方法
{{msg}}---插值表達(dá)式，在元素中使用，msg為實(shí)例data中數(shù)據(jù)項(xiàng)
computed---計(jì)算屬性
watch:{}---監(jiān)聽器，實(shí)例中屬性
指令
v-text---顯示內(nèi)容，內(nèi)容里的元素被轉(zhuǎn)譯
v-html---顯示內(nèi)容，內(nèi)容里的元素不被轉(zhuǎn)譯
v-on---綁定事件（簡(jiǎn)寫 @），v-on: click="function"綁定一個(gè)點(diǎn)擊事件
v-bind---屬性綁定（簡(jiǎn)寫 ：），實(shí)例=>元素 單向數(shù)據(jù)綁定。:title='title1'，title1為data中數(shù)據(jù)項(xiàng)，=后為表達(dá)式，因此'1234'+'title1'也可以
v-model--- 雙向數(shù)據(jù)綁定，元素<=>實(shí)例
v-if---直接從dom中刪除
v-show---設(shè)置display:none
v-for---循環(huán)，v-for="{item, index} for list"? :key="index"，list數(shù)組為data中數(shù)據(jù)項(xiàng)。:key提升渲染的效率，每一項(xiàng)值都不能相同
組件
定義全局組件，全局可用
Vue.component('todo-item', {
????template:? '<li>hello world</li>'
})
定義局部組件，需要在vue實(shí)例components屬性中注冊(cè)
var TodoItem = {
????template:? '<li>hello world</li>'
}
components: {'todo-item' : TodoItem}
組件在元素中使用
<todo-item></todo-item>
組件之間數(shù)據(jù)通信
父=>子---通過屬性進(jìn)行傳遞
元素中 :content=“item"
組件中props: ['content']---接受外層傳遞過來的屬性content
子=>父---通過發(fā)布定義模式進(jìn)行傳遞
父組件@delete="function"---父組件監(jiān)聽到子組件delete事件執(zhí)行function方法
子組件 this.$emit('delete', this.index)---子組件向外觸發(fā)一個(gè)delete事件，同時(shí)攜帶一個(gè)參數(shù)
全局樣式與局部樣式
組件中<style scoped></style>
scoped限制樣式只對(duì)當(dāng)前組件有效
不加scoped為全局樣式，會(huì)影響其他組件樣式
查看全部 -
1、腳手架vue-cli安裝與項(xiàng)目創(chuàng)建
vue-cli安裝
npm install --global vue-cli
創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
vue init webpack my-project---my-project自定義項(xiàng)目名，通過cd切換項(xiàng)目創(chuàng)建的路徑
進(jìn)入項(xiàng)目，安裝依賴
cd my-project
npm run dev
打開項(xiàng)目網(wǎng)頁(yè)
2、vue項(xiàng)目介紹
build 項(xiàng)目配置文件
config開發(fā)和線上一些配置文件
node_modules項(xiàng)目依賴
src源代碼
static靜態(tài)資源文件
index .html
src/main.js? 項(xiàng)目入口文件
查看全部 -
<div id="root"> ? ?
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul> ? ? ? ? ? ?
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show ? ?: ? true,
list ? ?: ? [1,1,3,4]
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
});
</script>
查看全部 -
head:
<script src="./vue.js"></scipt>;
<body>
? ? <div id=“root”>{{msg}}</div>
? ?<script>
? ? new vue({
? ? ? ? ? el:"#root",
? ? ? ? ? data:{
? ? ? ? ? ? ? ?msg:"hello world"
? ? ? ? ? ?}
? ? ? ? })
? </script>
查看全部 -
偵聽器,是監(jiān)聽某個(gè)數(shù)據(jù)的變化,一旦發(fā)現(xiàn)數(shù)據(jù)的變化,就可以去做業(yè)務(wù)邏輯~~
查看全部 -
computed 計(jì)算屬性
查看全部 -
屬性綁定 v-bind:title? 或者直接:title
雙向數(shù)據(jù)綁定 v-model=""
<div id="root"> ? ?
<div :title="title">hello world</div>
<input v-model="content" type="text" />
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title ? ? : ? "this is hello world",
content ? : ? "i am content"
}
});
</script>
查看全部
舉報(bào)