-
模板指的就是掛載點里面的內容
查看全部 -
data:數據全部放data里面
查看全部 -
el：指綁定哪個元素！
查看全部 -
my hvr. v
61查看全部 -
nvm r u know fecb
kebmHbep canceled hh.hh hhh查看全部 -
rbr ju$ts查看全部
-
aqa3376336 fewwwgg
阿拉啊啊-- -
644
叫我。a嗎3 =-6就@。亞奧就是阿拉
==愛上了-/4@按時睡覺%%*466%na
aasaaaaasoso.-
04#
#_##mqaaw查看全部 -
)丫?:‘冫濟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 表示樣式只針對該組件，一般不會去掉，否則全局都會同名調用。
查看全部 -
父組件定義的模板，模板會顯示父組件list的數據
創建子組件todo-item，傳遞名為content和index參數對應item,index的值。
子組件props聲明傳遞的參數，
當點擊的時候handleClick，this.$emit會向外觸發一個名為'delete'的事件，事件的值為this.index，
父組件創建子組件的時候@delete監聽該事件，當觸發delete事件的時候會觸發父組件handleDelete方法。
查看全部 -
每一個Vue.component組件都是一個Vue的實例
如果實例沒有定義template模板的方法，那么就尋找el掛載點根標簽作為它的模板
Vue實例就是一個組件，每個組件也是一個Vue。
每一個主鍵中都可以綁定@click點擊事件和添加methods方法
查看全部 -
Vue.component 定義全局組件
: content='itemxx' ?傳遞值參數
props: ['content'], ?聲明接收名字為content 的參數，不然{{content}} 無法接收傳遞的參數
查看全部 -
Vue.component() 定義全局組件
定義局部主鍵
var TodoXxx = {
? template: '<li>xxx</li>'
}
需要再Vue的components中聲明注冊，否則無法調用
查看全部
舉報