-
v-on:=@
查看全部 -
v-on:click="handleClick"
methods:{
handleClick:function(){
? ? ? ? ?alert(123)
}
}
查看全部 -
v-on:click="handleClick"
methods:{
handleClick:function(){
? ? ? ? ? ? this.content="world"
}
}
查看全部 -
vue-cli中data是一個具有返回值的函數，在html中使用是一個屬性值
查看全部 -
父組件像子組件傳值使用定義屬性的方式，子組件向父組件傳值使用發布訂閱的方式。
查看全部 -
不定義模板template，則會從掛載點加載模板
查看全部 -
沒一個component 都是一個Vue實例，包含所有屬性
查看全部 -
實現todolist的刪除功能：
<div id="root">
? <div>
? ? <input v-model="inputValue"/>
? ? <button @click="handleClick">提交</button>
? ? <ul>
? ? ? <todo-item
? ? ? ? v-for="(item,index) of list"
? ? ? ? :key="index"
? ? ? ? :msg="item"http://父組件通過屬性傳值給子組件
? ? ? ? :index="index"http://傳參，數據下標值
? ? ? ? @delete="handleDelete"http://訂閱delete方法(監聽delete方法)，觸發時執行父組件handleDelete方法
? ? ? ></todo-item>
? ? </ul>
? </div>
</div>
實例：
var TODOITEM = {//每個組件都是一個實例
? ? props:['msg','index'],//接收參數
? ? template:"<li @click='handleClick'>{{msg}}</li>",//使用參數
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? this.$emit('delete',this.index)//發布delete方法，通知父組件刪除本實例，傳參：本實例在父組件的下標值
? ? ? }
? ? }
? }
? new Vue({
? ? el:"#root",
? ? components:{//局部組件需要先在實例注冊才能在實例中使用
? ? ? "todo-item":TODOITEM
? ? },
? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? },
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? this.list.push(this.inputValue)
? ? ? ? this.inputValue = ''
? ? ? },
? ? ? handleDelete:function(index){//父組件刪除子組件想刪除的數據
? ? ? ? this.list.splice(index,1)
? ? ? }
? ? }
? })
查看全部 -
組件與實例的關系：
var TODOITEM = {//每個組件都是一個實例
? ? props:['msg'],//接收參數
? ? template:"<li @click='handleClick'>{{msg}}</li>",//使用參數
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? alert("hello")
? ? ? }
? ? }
? }
查看全部 -
TODOLIST組件拆分:
<div id="root">
? <div>
? ? <input v-model="inputValue"/>
? ? <button @click="handleClick">提交</button>
? ? <ul>
? ? ? <todo-item//組件名稱
? ? ? ? v-for="(item,index) of list"
? ? ? ? :key="index"
? ? ? ? :msg="item"http://傳參，參數名msg，值item
? ? ? ></todo-item>
? ? </ul>
? </div>
</div>
實例：
/*Vue.component("todo-item",{//全局組件，定義好了就可以在任意模板直接用
? ? props:['msg'],//接收參數
? ? template:"<li>{{msg}}</li>"http://使用參數
? })*/
? var TODOITEM = {//定義局部組件
? ? props:['msg'],//接收參數
? ? template:"<li>{{msg}}</li>"http://使用參數
? }
? new Vue({
? ? el:"#root",
? ? components:{//局部組件需要先在實例注冊才能在實例中使用
? ? ? "todo-item":TODOITEM
? ? },
? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? },
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? this.list.push(this.inputValue)
? ? ? ? this.inputValue = ''
? ? ? }
? ? }
? })
查看全部 -
TODOLIST
<div id="root">
? <div>
? ? <input v-model="inputValue"/>
? ? <button @click="handleClick">提交</button>
? ? <ul>
? ? ? <li v-for="(item,index) of list" :key="index">{{item}}</li>
? ? </ul>
? </div>
</div>
實例：
new Vue({
? ? el:"#root",
? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? },
? ? methods:{
? ? ? handleClick:function(){
? ? ? ? this.list.push(this.inputValue)
? ? ? ? this.inputValue = ''
? ? ? }
? ? }
? })
查看全部 -
點擊顯示當前內容
查看全部 -
<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 src="vue.js"></script>
? <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>
查看全部 -
v-if,v-show,v-for：
<div id="root">
? <div v-if="vif">hello world</div>//v-if控制dom存在與否,false則直接從dom樹移除
? <div v-show="show">this is vue</div>//v-show控制dom顯示與否，false則display=none，但還在dom樹上
? <button @click="handlerClick">{{msg}}</button>
? <ul>
? ? <li v-for="(item,index) of list" :key="index">{{item}}</li>
? </ul>//v-for循環展示數據，表示遍歷list，將value放到item，下標放到index，key是為了提升性能
</div>
實例：
new Vue({
? ? el:"#root",
? ? data:{
? ? ? msg:"cilck",
? ? ? vif:true,
? ? ? show:false,
? ? ? list:[1,2,3]
? ? },
? ? methods:{
? ? ? handlerClick:function(){
? ? ? ? this.vif=!this.vif;//值取反
? ? ? ? this.show=!this.show;//值取反
? ? ? }
? ? }
? })
查看全部 -
計算屬性與偵聽器：
<div id="root">
? 姓：<input v-model="firstName">//v-model雙向數據綁定
? 名：<input v-model="lastName">//v-model雙向數據綁定
? <div>{{fullName}}</div>
? <div>{{count}}</div>
</div>
實例：
? new Vue({
? ? el:"#root",
? ? data:{
? ? ? firstName:'',
? ? ? lastName:'',
? ? ? count:0
? ? },
? ? computed:{//計算屬性，只有數據發生變化才會重新計算，未發生變化用之前計算結果的緩存值來展示
? ? ? fullName:function(){
? ? ? ? return this.firstName+' '+this.lastName
? ? ? }
? ? },
? ? watch:{//偵聽器，偵聽數據是否發生變化
? ? ? fullName:function(){
? ? ? ? this.count++
? ? ? }
? ? }
? })
查看全部
舉報