-
component,props,屬性傳參數
查看全部 -
very good
查看全部 -
<div id="app">
<p>{{ message }}</p>
</div>
<div id="app-2">
<span v-bind:title="message">
? ? ? ? ? ? ? ?鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
? ? ? ? ?</span>
</div>
<div id="app-3">
<p v-if='seen'>
xianzaikandaowola
</p>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="clickevent">點擊</button>
</div>
<div id="app-6">
<p> {{message}}</p>
<input type="text" v-model='massage' >
</div>
? ? ? ? <div id="app-7">
<h1 v-text='number' v-on:click="clickIt"> <h1>
</div>
? ? ? ? <script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello js!'
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date().toLocaleString()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
/*? ? seen:false */
seen: true
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: "no1" },
{ text: "no2" },
{ text: "no3" }
]
}
})
/* 添加新內容 */
app4.todos.push({ text: "no4" }, { text: "no5" })
var app5 = new Vue({
el: '#app-5',
data: {
message: 'hello'
},
methods: {
clickevent: function() {
this.message='第五：'+this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: "#app-6",
data: {
message: '第六：'+'hi'
}
})
//替換
var app7=new Vue({
el:"#app-7",
data:{
number:'第七：'+12345
},
methods:{
clickIt:function(){
this.number='第七：'+112
}
}
})
</script>
? ? ? ??
? ? ? ??
查看全部 -
父子組件傳值問題在vue中是一個難點，也是一個重點
查看全部 -
Vue中的每個組件都是Vue的一個實例，也可以有data，methods方法
其實每個Vue實例也是一個組件
查看全部 -
在外層/父組件中使用屬性進行值的傳遞，
然后在全局組件中添加props: ['content'],接收傳遞的屬性值
Vue.component("todo-item",{
????props: ['content'],
????template:" <li>{{content}}</li>"
})
查看全部 -
局部組件：
需要在Vue實例中注冊組件
var TodoItem = {
????template: '<li>item</li>'
}
new Vue({
????el: '#root',
????components: {
????? ? 'todo-item': TodoItem
},
????data.....
})
查看全部 -
全局組件：
Vue.component("todo-item",{
????template:" <li>item</li>"
})
查看全部 -
組件就是網頁的某一個部分
查看全部 -
v-on 表示綁定事件
v-on:click 表示綁定了一個cilck事件
查看全部 -
v-text 輸出結果為帶標簽的
v-html 解析標簽輸出標簽中的內容
查看全部 -
todolist
handleSubmit : function(){
????this.list.push(this.inputValue);
????this.inputValue = ''
}
查看全部 -
單向綁定:數據可以決定頁面的顯示，而頁面不能決定數據的改變
v-model可以實現數據的雙向綁定
<input v-model="content" />
查看全部 -
給div綁定一個點擊事件：
<div v-on:click="handleClick">{{content}}</div>其中v-on: 可以簡寫成@
handleClick寫在Vue里邊的methods方法里
現在使用vue是面向數據編程，不是面向dom編程了
查看全部 -
兩個模板指令：v-text，v-html
查看全部
舉報