-
模板指的就是掛載點(diǎn)里面的內(nèi)容
查看全部 -
data:數(shù)據(jù)全部放data里面
查看全部 -
el：指綁定哪個(gè)元素！
查看全部 -
my hvr. v
61查看全部 -
nvm r u know fecb
kebmHbep canceled hh.hh hhh查看全部 -
rbr ju$ts查看全部
-
aqa3376336 fewwwgg
阿拉啊啊-- -
644
叫我。a嗎3 =-6就@。亞奧就是阿拉
==愛上了-/4@按時(shí)睡覺%%*466%na
aasaaaaasoso.-
04#
#_##mqaaw查看全部 -
)丫?:‘冫濟(jì)141′o 疒?0查看全部
-
? ? <div id="root">
? ? ? ? <div>
? ? ? ? ? ? <input v-model="inputValue" />
? ? ? ? ? ? <button @click="addValue">提交</button>
? ? ? ? ? ? <button @click="deleteValue">刪除</button>
? ? ? ? </div>
? ? ? ? <ul>
? ? ? ? ? ? <li v-for="(item,index) of list" :key="index">
? ? ? ? ? ? ? ? {{item}}
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: "#root",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? inputValue: '',
? ? ? ? ? ? ? ? list: []
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? addValue: function() {
? ? ? ? ? ? ? ? ? ? this.list.push(this.inputValue)
? ? ? ? ? ? ? ? ? ? this.inputValue = ''
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? deleteValue: function() {
? ? ? ? ? ? ? ? ? ? this.list.pop()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>TodoList</title>
? ? <script src="./vue.js"></script>
</head>
<body>
? ? <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"
? ? ? ? ? ? ? ? :index="index"
? ? ? ? ? ? ? ? @delete="handleDelete"
? ? ? ? ? ? >
? ? ? ? ? ? </todo-item>
? ? ? ? </ul>
? ? </div>??
? ? <script>
? ? ? ? Vue.component('todo-item', {
? ? ? ? ? ? props: ['content', 'index'],
? ? ? ? ? ? template: '<li @click="handleClick">{{content}}</li>',
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? handleClick: function() {
? ? ? ? ? ? ? ? ? ? this.$emit('delete', 'index');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? new Vue({
? ? ? ? ? ? el:"#root",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? inputValue: '',
? ? ? ? ? ? ? ? list: []
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? handleSubmit: function() {
? ? ? ? ? ? ? ? ? ? this.list.push(this.inputValue)
? ? ? ? ? ? ? ? ? ? this.inputValue = ''
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? handleDelete: function(index) {
? ? ? ? ? ? ? ? ? ? this.list.splice(index, 1);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
查看全部 -
scoped 表示樣式只針對(duì)該組件，一般不會(huì)去掉，否則全局都會(huì)同名調(diào)用。
查看全部 -
父組件定義的模板，模板會(huì)顯示父組件list的數(shù)據(jù)
創(chuàng)建子組件todo-item，傳遞名為content和index參數(shù)對(duì)應(yīng)item,index的值。
子組件props聲明傳遞的參數(shù)，
當(dāng)點(diǎn)擊的時(shí)候handleClick，this.$emit會(huì)向外觸發(fā)一個(gè)名為'delete'的事件，事件的值為this.index，
父組件創(chuàng)建子組件的時(shí)候@delete監(jiān)聽該事件，當(dāng)觸發(fā)delete事件的時(shí)候會(huì)觸發(fā)父組件handleDelete方法。
查看全部 -
每一個(gè)Vue.component組件都是一個(gè)Vue的實(shí)例
如果實(shí)例沒有定義template模板的方法，那么就尋找el掛載點(diǎn)根標(biāo)簽作為它的模板
Vue實(shí)例就是一個(gè)組件，每個(gè)組件也是一個(gè)Vue。
每一個(gè)主鍵中都可以綁定@click點(diǎn)擊事件和添加methods方法
查看全部 -
Vue.component 定義全局組件
: content='itemxx' ?傳遞值參數(shù)
props: ['content'], ?聲明接收名字為content 的參數(shù)，不然{{content}} 無法接收傳遞的參數(shù)
查看全部 -
Vue.component() 定義全局組件
定義局部主鍵
var TodoXxx = {
? template: '<li>xxx</li>'
}
需要再Vue的components中聲明注冊(cè)，否則無法調(diào)用
查看全部
舉報(bào)