-
<!DOCTYPE?html><html><meta?charset="UTF-8"><head><title>vue實例</title><script?src="vue.js"></script><div?id?=?"root"><p>{{msg}}</p></div><script>new?Vue({el:"#root",data:{msg:"hello?world"}})</script></head><body></body></html>創建第一個實例時，發現
new Vue({
el:"#root",
data:{
msg:"hello world"
}
})
中msg：“hello world”后面不能加分號！
加分號會運行失敗。
查看全部 -
全局組件 。 Vue.component 創建全局組件
局部組件?
定義一個屬性值 :content? ?組件中 props 接收屬性值
查看全部 -
v-if? 元素在dom中直接移除或新增
v-show 元素并沒有從dom中移除 只是多了屬性 display：none
v-for循環? :key加速渲染進程? item循環每一項的值? index下標?
查看全部 -
vue中的屬性綁定
v-bind: 簡寫成 ：
? ? ? ? ? ?雙向綁定v-model:查看全部 -
vue2.0查看全部
-
差值表達式 {{? }}
v-text
v-html
v-on:click 可以簡寫成 @click
元素綁定事件 觸發方法? 不需要改變dom 直接監聽數據變化
查看全部 -
vue 實例查看全部 -
v-for的使用， 添加:key 索引
查看全部 -
Mark查看全部
-
在es6語法中，：function(){}可以簡寫為(){}
查看全部 -
在vue腳手架中，data不再是數據，而是函數，其返回值是數據
查看全部 -
借用@悶聲君發的評論來幾個筆記
總結一下大概的邏輯過程：
（1）：父組件通過prop向子組件傳值 子組件獲得父組件傳來的內容和索引。
（2）：子組件通過$emit向父組件拋出觸發事件名稱（delete）和觸發事件的list索引值。
（3）：父組件通過監聽對應事件名稱（@delete）觸發函數handleDelete。函數通過子組件拋出的索引值對應刪除list查看全部 -
v-on（事件）的縮寫是@
v-bind（綁定）的縮寫是：
v-model（數據雙向綁定）
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList組件的刪除功能.html</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--TodoList組件的刪除功能.html-->
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--todolist組件-->
<!--<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>
//todolist組件 全局定義
Vue.component('todo-item',{
props:['content' ,'index'],
//每一個veu實例 都是一個組件 ?每個組件都是一個vue 實例
template : '<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
? ? ? ? ? ? ? ? ?this.$emit('delete', this.index)
},
}
})
? ? ? ? //局部組件
// ? ? ? var TodoItem = {
// ? ? ? template:'<li>item</li>'
// ? ? ? }
new Vue({
el:"#root",
// //如果你想在其他veu實例里邊用這個局部組件 必選通過components 對這個局部組件進行注冊
// components:{
// //通過todo-item這個標簽來使用
// 'todo-item':TodoItem ?
// },
? ? ? data:{
? ? ? inputValue:'',
? ? ? list:[]
? ? ? },
? ? ? methods:{
? ? ? handleSubmit:function(){
? ? ? this.list.push(this.inputValue),
? ? ? this.inputValue=''// 清空inputValue內容
? ? ? },
? ? ? handleDelete:function(index){
this.list.splice(index, 1)
}
? ? ? }
})
</script>
</body>
</html>
查看全部 -
屬性綁定用:，等同于v_bind查看全部
舉報