第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

@click=v-on：click

click綁定事件 方法寫在vue中methods

寫完一個data或者el后邊加上，

this.content可以直接修改content值

<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',this.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>

定義在父模板里的方法，就是在父組件里面執(zhí)行的。

父組件通過屬性的形式向子組件傳遞數據；子組件通過發(fā)布事件，父組件訂閱事件，來實現(xiàn)子組件向父組件傳遞數據。

每一個Vue組件都是一個Vue的實例，每一個Vue項目都是由千千萬萬個Vue實例組成的。

一個根實例，如果沒有定義模板，那么會把掛載點下的內容都作為模板來使用。

<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>

<div?id="root">
????<div>
????????<input?v-model="inputValue"/>
????????<button?@click="handleSubmit">提交</button>
????</div>
????<ul>
???????<todo-item></todo-item>
????</ul>
</div>
<script>
????//全局組件
????Vue.component('todo-item',{
????????template:'<li>item</li>'
????})
????
????//局部組件
????//var?TodoItem={
????//????template:'<li>item</li>'
????//}
????
????new?Vue({
????????el:"#root",
????????//components:{
????????//????'todo-item':TodoItem
????????//},
????????data:{
????????????inputValue:'',
????????????list:[]
????????},
????????methods:{
????????????handleSubmit:function(){
????????????????this.list.push(this.inputValue)
????????????????this.inputValue=''
????????????}
????????}
????})
</script>

將li標簽拆成一個組件。

<div?id="root">
????<div>
????????<input?v-model="inputValue"/>
????????<button?@click="handleSubmit">提交</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:{
????????????handleSubmit:function(){
????????????????this.list.push(this.inputValue)
????????????????this.inputValue=''
????????????}
????????}
????})
</script>

v-if：

<div?id="root">
????<div?v-if="show">hello?world</div>
????<button?@click="handleClick">toggle</button>
</div>
<script>
????new?Vue({
????????el:"#root",
????????data:{
????????????show:true
????????},
????????methods:{
????????????handleClick:function(){
????????????????this.show=!this.show;
????????????}
????????}
????})
</script>

v-show:

<div?id="root">
????<div?v-show="show">hello?world</div>
????<button?@click="handleClick">toggle</button>
</div>
<script>
????new?Vue({
????????el:"#root",
????????data:{
????????????show:true
????????},
????????methods:{
????????????handleClick:function(){
????????????????this.show=!this.show;
????????????}
????????}
????})
</script>

v-if和v-show的區(qū)別：

當v-if定義的數據項的值為false，就移除所在的dom標簽。

當v-show定義的數據項的值為false，不會移除標簽，只是將標簽的display屬性設置為none。

v-for：

<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>

v-for可以用來作頁面上數據的循環(huán)展示

v-if：控制dom的存在與否

v-show：控制dom的顯示與否

v-for：控制一組數據在頁面上的顯示

計算屬性：

以下例子中fullname作為一個計算屬性。

<div?id="root">
????姓：<input?v-model="firstName"/>
????名：<input?v-model="lastName"/>
????<div>{{fullName}}</div>
</div>
<script>
????new?Vue({
????????el:"#root",
????????data:{
????????????firstName:'',
????????????lastName:''
????????},
????????computed:{//表示一個屬性由其他屬性計算而來
????????????fullName:function(){
????????????????return?this.firstName+'?'+this.lastName
????????????}
????????}
????})
</script>

計算屬性的兩個數據項沒有發(fā)生變化時，它不會再次進行計算，會使用上次計算結果的緩存來賦值給計算屬性。

偵聽器：監(jiān)聽某一個數據或者計算屬性，若其發(fā)生變化，就可以在偵聽器里寫業(yè)務邏輯。

<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:''
????????},
????????computed:{//表示一個屬性由其他屬性計算而來
????????????fullName:function(){
????????????????return?this.firstName+'?'+this.lastName
????????????}
????????},
????????watch:{
????????????firstName:function(){
????????????????this.count++
????????????},
????????????lastName:function(){
????????????????this.count++
????????????}
????????}
????})
</script>

更為簡單的寫法：直接監(jiān)聽計算屬性fullName

<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:''
????????},
????????computed:{//表示一個屬性由其他屬性計算而來
????????????fullName:function(){
????????????????return?this.firstName+'?'+this.lastName
????????????}
????????},
????????watch:{
???????????fullName:function(){
???????????????this.count++
???????????}
????????}
????})
</script>

title（提示語）的使用：

屬性綁定：

將標簽里的title屬性和實例里的title數據項的值綁定。

使用模板指令，類似v-bind:title="..."，...中的內容就變成了js語句

v-bind:可以簡寫為：

<div>
????<div?:title="title">hello?world</div>
</div>
<script>
????new?Vue({
????????el:"#root",
????????data:{
????????????title:"this?is?hello?world"
????????}
????})
</script>

單向綁定：數據決定頁面的顯示，頁面無法改變數據的內容。

雙向綁定：v-model

本文框里的內容改變的時候，div里的content內容改變。

div里的content有內容的時候，本文框里的內容也會改變。

<div>
????<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>

插值表達式：{{...}}

<div?id="root">
????<h1>{{number}}</h1>
</div>
<script>
????new?Vue({
????????el:"root"
????????data:{
????????????number:123
????????}
????})
</script>

v-text和v-html的區(qū)別：

v-html不會轉譯，v-text會進行一次轉譯。

結果：<h1>hello</h1>

結果：hello

給div標簽綁定事件（v-on）：

"v-on:"的簡寫是@

<div?id="root">
????<div?v-on:click="handleClick">{{content}}</div>
</div>
<script>
????new?Vue({
????????el:"#root",
????????data:{
????????????content:"hello"
????????},
????????methods:{
????????????handleClick:function(){
????????????????this.content="world"
????????????}
????????}
????})
</script>