-
el：——掛載點(diǎn)，用于與相應(yīng)的標(biāo)簽綁定
data：——vue的數(shù)據(jù)存放處
查看全部 -
<div id="root">
? ? ? ? <div>
? ? ? ? ? ? <input v-model="inputValue" />
? ? ? ? ? ? <button @click="handleSubmit">提交</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: {
? ? ? ? ? ? ? ? inputValue: '',
? ? ? ? ? ? ? ? list: []
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? handleSubmit: function() {
? ? ? ? ? ? ? ? ? ? this.list.push(this.inputValue)
? ? ? ? ? ? ? ? ? ? this.inputValue = ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
查看全部 -
<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>
? ?</ul>
</div>
<script>
? ?new Vue({
? ? ? ?el: "#root",
? ? ? ?data: {
? ? ? ? ? ?inputValue: "hello",
? ? ? ? ? ?list: []
? ? ? ?},
? ? ? ?methods: {
? ? ? ? ? ?handleSubmit: function(){
? ? ? ? ? ? ? ?this.list.push(this.inputValue)
? ? ? ? ? ? ? ?this.inputValue = ''
? ? ? ? ? ?}
? ? ? ?}
? ?})
</script>查看全部 -
<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, 2, 3]
? ? ? ? ? ? },
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? handleClick:function(){
? ? ? ? ? ? ? ? ? ? this.show = !this.show
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
查看全部 -
<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>
查看全部 -
<div id="root">
? ? ? ? ? ? <div :title="title">hello world<div/>
? ? ? ? ? ? <input v-model="content"/>
? ? ? ? ? ? <div>{{content}}</div>
? ? ? ? </div>
? ? ? ? <script>
? ? ? ? ? ? new Vue({
? ? ? ? ? ? ? ? el: "#root",
? ? ? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? ? ? title:"this is hello world",
? ? ? ? ? ? ? ? ? ? content:"this is content"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? </script>
查看全部 -
<div id="root">
? ? ? ? ? ? <div @click="handleClick">{{content}}<div/>
? ? ? ? </div>
? ? ? ? <script>
? ? ? ? ? ? new Vue({
? ? ? ? ? ? ? ? el: "#root",
? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? content: "hello",
? ? ? ? ? ? ? ? ? ? number:123
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? ? ? handleClick:function(){
? ? ? ? ? ? ? ? ? ? ? ? this.content = "world"
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? </script>
查看全部 -
computed：只有在計(jì)算屬性所依賴的值發(fā)生改變時(shí)，才會(huì)重新計(jì)算；如果所依賴的值未發(fā)生改變，它會(huì)根據(jù)之前緩存的計(jì)算結(jié)果在頁(yè)面上顯示，計(jì)算屬性定義的函數(shù)需要又return值作為計(jì)算屬性的新的結(jié)果
watch：偵聽(tīng)器，偵聽(tīng)某個(gè)data中的屬性值或者計(jì)算屬性值，當(dāng)他們發(fā)生改變之后，就會(huì)執(zhí)行定義好的業(yè)務(wù)函數(shù)
查看全部 -
屬性綁定：v-bind
雙向數(shù)據(jù)綁定：v-model
查看全部 -
實(shí)現(xiàn)循環(huán)列表功能
先創(chuàng)建list列表，然后在掛載點(diǎn)創(chuàng)建ul，在li里寫上v-for=“item of list”，意思是循環(huán)list，每次循環(huán)，把list里面的循環(huán)項(xiàng)內(nèi)容放入item里面
每次用v-for這個(gè)屬性時(shí)，最好在list”后面加上? ：key=“item”，增加效率
當(dāng)list列表有重復(fù)的，如：【1,1,3】，則要v-for（item，加上index），把key后面的item換成index。? ? index為item的下標(biāo)。
查看全部 -
v-if和v-shou的區(qū)別
結(jié)果都是可以用show的true和falus顯示和隱藏div
v-if當(dāng)數(shù)據(jù)項(xiàng)show為falus時(shí)，會(huì)把掛載點(diǎn)處的div移除，而v-show是把掛載點(diǎn)的div用display：none隱藏起來(lái)
用哪種好？
：當(dāng)需要處理的數(shù)據(jù)量龐大時(shí)，用v-show好，因?yàn)樗恍枰駐-if那要把div銷毀后再創(chuàng)建，只需要把div隱藏就行。
：當(dāng)數(shù)據(jù)量較小時(shí)，則用v-if
查看全部 -
計(jì)算屬性：computed
偵聽(tīng)器：watch? ?用的count計(jì)算，開(kāi)始為0，計(jì)算firstname和lastname合計(jì)的fullname，每次在input輸入框每進(jìn)行一次輸入，count+1.
查看全部 -
head里面加載vue? ??
<script src="./vue.js"></script>
實(shí)例格式：
<script>
new Vue({
el:"#某id",
template:? ? ? ? ? ? ? ? //掛載點(diǎn)格式可寫在這
data:{
msg:"hello"
}
})
</script>
掛載點(diǎn)里面：如? <div? v-on:click....></div>?
v-text="msg"? ? ? //接收實(shí)例里面data的文本，寫法一
{{msg}}? ? ? ? ? ? ? ? //接收實(shí)例里面data的文本，寫法二，插值法
v-on:click="xxx"? ?//點(diǎn)擊后執(zhí)行? ? ?可簡(jiǎn)寫成@click="xxx"? ? ?v-on=@
title="this is hello world"? ? ? ? //當(dāng)鼠標(biāo)放到div上時(shí)，會(huì)有提示? this is hello world
進(jìn)階用法：? ?v-bind:title="msg"? ? ? ? ?//v-bind? ? 數(shù)據(jù)綁定? ? 句子意思是title屬性和msg這個(gè)數(shù)據(jù)項(xiàng)綁定? ? ?“”里面其實(shí)是一個(gè)js表達(dá)式，意味著可以在里面添加js的內(nèi)容? ? ? 可簡(jiǎn)寫成：title="msg"? ? v-bind=:
v-model? ? ? ?//數(shù)據(jù)的雙向綁定? ? 如? ?<input v-model="msg"/>? ? 這樣在頁(yè)面文本框中修改框內(nèi)的值，實(shí)例data里面的數(shù)據(jù)項(xiàng)msg的值也會(huì)跟著改變
實(shí)例里面：
methods:{
xxx:function(){
alert("")? ? ?//點(diǎn)擊后顯示
this.msg = ""? ? ? //點(diǎn)擊后改變msg的值，也就完成了點(diǎn)擊后改變文字的效果
}
}
查看全部 -
每一個(gè)組件都是vue的一個(gè)實(shí)例
查看全部 -
全局組件和局部組件
組件需要props接收參數(shù)
查看全部
舉報(bào)