-
2-3? vue實例中的數(shù)據(jù)、事件和方法
v-text 顯示的是原始的轉(zhuǎn)移content
查看全部 -
2-3? vue實例中的數(shù)據(jù)、事件和方法
插值表達式，data中可以聲明任意多個變量
查看全部 -
模板的另外一個方式：
vue會自動的結(jié)合模板和數(shù)據(jù)，生成要展示的內(nèi)容送給掛載點！
查看全部 -
2-2 掛載點、模板與實例之間的關(guān)系
查看全部 -
2-1 創(chuàng)建第一個vue實例
掛載點、數(shù)據(jù)
vue替換原生的DOM操作
查看全部 -
html
<todo-item></todo-item>
script
全局組件
Vue.component('todo-item',{
?template:'<li>item</li>'
})
局部組件
var TodoItem={
?template:'<li>item</li>'
}
new Vue({
componments:{
'todo-item':TodoItem
})
查看全部 -
div的title屬性設置鼠標懸停時顯示的文本
查看全部 -
<div v-text="message"></div>
等于{{message}} 差值表達式
查看全部 -
TodoList.vue
<template> ??<div?id="app"> ????<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> </template> <script> ????import?TodoItem?from?'./components/TodoItem.vue' ????export?default?{ ????????components:?{ ????????????'todoItem':?TodoItem ????????}, ????????data?()?{ ????????????return?{ ????????????????inputValue:?"", ????????????????list:?[] ????????????} ????????}, ????????methods:?{ ????????????handleSubmit?()?{ ????????????????//?this.$data.list?==?this.list ??????????????this.list.push(this.inputValue); ??????????????this.inputValue?=?""; ????????????}, ????????????handleDelete?(index)?{ ????????????????this.list.splice(index,?1); ????????????} ????????} ????} </script> <style> </style>TodoItem.vue
<template> ??<li?@click="handleDelete">{{content}}</li> </template> <script> export?default?{ ????props:?["content",?"index"], ????methods:?{ ????????handleDelete?()?{ ????????????this.$emit('delete',?this.index); ????????} ????} } </script> <!--?Add?"scoped"?attribute?to?limit?CSS?to?this?component?only?--> <style?scoped> </style>查看全部 -
npm?install?-g?@vue/cli vue?create?vue-cli-demo
參考網(wǎng)址：
https://cli.vuejs.org/guide/creating-a-project.html#vue-create
查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Vue?入門</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"> ????????????</todo-item> ????????</ul> ????</div> <script> ????//??全局組件 ?Vue.component('todo-item',?{ ????????props:?["content"], ????????template:?'<li>{{content}}</li>' ?}); ????new?Vue({ ????????el:?"#root", ????????data:?{ ????????????inputValue:?"", ????????????list:?[] ????????}, ????????methods:?{ ????????????handleSubmit:?function()?{ ????????????????this.list.push(this.inputValue); ????????????????this.inputValue?=?""; ????????????} ????????} ????}); </script> </body> </html>查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Vue?入門</title> ????<script?src="./vue.js"></script> </head> <body> ????<!--?掛載點?--> ?<div?id="root"> ????????<div?v-show="show">hello?world</div> ????????<button?@click="handleClick">toggle</button> ????????<ul> ????????????<li?v-for="(item,?index)?of?list"?:key="index">{{?item?}}</li> ????????</ul> ????</div> <script> ????new?Vue({ ????????el:?"#root", ????????data:?{ ????????????show:?true, ????????????list:?[1,?2,?3] ????????}, ????????methods:?{ ????????????handleClick:?function()?{ ????????????????this.show?=?!this.show; ????????????} ????????} ????}); </script> </body> </html>查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Vue?入門</title> ????<script?src="./vue.js"></script> </head> <body> ????<!--?掛載點?--> ?<div?id="root"> ????????姓：<input?v-model="firstName"/> ????????名：<input?v-model="lastName"/> ????????<div>{{?fullName?}}</div> ????????<div>{{count}}</div> ????</div> <script> ????new?Vue({ ????????el:?"#root", ????????data:?{ ????????????firstName:?"", ????????????lastName:?"", ????????????count:?0 ?}, ????????computed:?{ ????????????fullName:?function()?{ ????????????????return?this.firstName?+?"?"?+?this.lastName; ????????????} ????????}, ????????watch:?{ ????????????fullName:?function()?{ ????????????????this.count?++; ????????????} ????????} ????}); </script> </body> </html>查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Vue?入門</title> ????<script?src="./vue.js"></script> </head> <body> ????<!--?掛載點?--> ?<div?id="root"> ???????<div?v-bind:title="title">hello?world</div> ????</div> <script> ????new?Vue({ ????????el:?"#root", ????????data:?{ ????????????title:?"this?is?hello?world" ?} ????}); </script> </body> </html><!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Vue?入門</title> ????<script?src="./vue.js"></script> </head> <body> ????<!--?掛載點?--> ?<div?id="root"> ???????<div?v-bind: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> </body> </html>查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Vue?入門</title> ????<script?src="./vue.js"></script> </head> <body> ????<!--?掛載點?--> ?<div?id="root"> ????????<h1?v-on:click="handleClick">{{?content?}}</h1> ????</div> <script> ????new?Vue({ ????????el:?"#root", ????????data:?{ ???????????content:?"hello" ?}, ????????methods:?{ ????????????handleClick:?function()?{ ???????????????this.content?=?"world"; ????????????} ????????} ????}); </script> </body> </html>查看全部
舉報
0/150
提交
取消