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