-
<div>
????<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
</div>
全局組件
Vue.component('todo-item', {
????props:['content'], //接收content這個參數
????template:"<li>{{content}}</li>"??
})?
?
局部組件
var TodoItem = {
????template:"<li>item</li>"
}
new Vue({
????el:"#root",
????data:{},
????components:{? ?//在vue實例里面要先用components注冊這個組件
????????todo-item:TodoItem
????},
????methods:{}
})
查看全部 -
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<li v-for="(item, index) of list" :key="index">
<li v-for="(item, index) of list" :key="index">
var vue = new Vue({
????el:"#root",
????data:{
????????inputValue:'hello',
????????list:[]
????},
????methods:{
????????handleSubmit:function(){
????????????this.list.push(this.inputValue)
????????????this.inputValue = ''
????????}
????}
})
查看全部 -
基礎知識->案例實踐->todolist->vue-cli->todolist
查看全部 -
綁定事件? v-on:? ? ?，觸發的方法和vue實例的methods對應
v-on:? ? 簡寫? ?@? （省略了v-on:）
在vue里面要改變數據的顯示，不需要改變dom，只需要改變數據就行了。當數據發生變化時候，vue會自動更新dom
查看全部 -
vue只會處理掛載點里面的內容
在掛載點里面的內容都叫模板內容
new Vue({
????el:"#root",
????template:"<h2>{{msg}}</h2>",
????data:{
????????msg:"hello world"
????}
})
*? vue會根據模板和數據生成最終的內容，放在掛載點之中
查看全部 -
計算屬性? computed? 是一些數據里沒有的屬性
偵聽器 watch? 當數據發生變化時，開始被偵聽
查看全部 -
v-show不會每次都創建dom，所以性能高一些
用v-for的時候，記得加上:key="index"，提升每一項渲染的效率性能
查看全部 -
創建vue實例，注意位置和標簽的匹配
查看全部 -
在data中配置任意數據名
{{number}}：插值表達式
v-text：是一個指令，他的內容可以調用{{number}}的變量
v-on：click 是點擊事件指令，點擊事件必須定義在methods事件下，簡寫的方法是@click
? ?2. methods：事件需要放在這個方法里面
查看全部 -
掛載點：指Vue實列中el后面的ID
模板：在掛載點內部的內容都叫模板內容
template：可以放各種標簽與smg申明
查看全部 -
el：指與id做綁定
data：用于放數據
msg：用戶放具體數據
查看全部 -
v-model：雙向數據綁定，隨著數據的修改與之對應的也會修改。
<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>查看全部 -
插值表達式：
v-text指令：
v-html指令：
v-text和v-html的區別：
v-html不會將輸出內容進行轉義，而v-text會。
v-on：綁定事件
綁定事件的簡寫：
v-on:click——>@click
查看全部 -
掛載點，模板，實例之間的關系：
????掛載點：el中的值對應了某dom節點的id值，這個dom節點就是掛載點
????模板：在掛載點下面的所有內容都是模板 【模板不僅可以寫在掛載點下，還可以寫在vue實例中，如圖：
】
????實例：指定掛載點，然后寫上模板，vue會自動結合模板和數據，生成展示內容，最后將內容放在掛載點下
????
查看全部 -
vue與傳統js的對比
查看全部
舉報