vue使用（二）

本節目標：

? ?? ???? 1.數據路徑的三種方式
? ?? ???? 2.{{}}和v-html的區別

1.綁定圖片的路徑

方法一：直接寫路徑

<img src="http://pic.baike.soso.com/p/20140109/20140109142534-188809525.jpg">

方法二：在data中寫路徑，在div中使用

<img v-bind:src="url">

然后在data中寫路徑

  data () {return {msg:'你好，我是啦啦啦!',url:'http://pic.baike.soso.com/p/20140109/20140109142534-188809525.jpg',}}

方法三：這個和方法二一樣，變化的為紅色標注部分

   <img :src="url">

2。使用{{}}和使用v-html的區別

使用{{}}的時候數據會原樣輸出，使用v-html的使用會將特殊字符進行解析成html，然后顯示。

這種方式是將他們的數據直接輸出，并沒有達到我們想要的解析{{h}}<hr/>下面的方法可以解決問題<div v-html="h"></div>

3.綁定數據的第二種方法

 綁定數據的第二種方法是<div v-text="msg"> </div>

4.綁定樣式

<hr/>綁定樣式的使用<div v-bind:class="{'red':flag}">我是渣渣！</div>

也可以寫成簡單的形式，將v-bind:直接寫成：

5.方法的調用

?（1）無參數的調用

<button v-on:click="getmsg()">我是按鈕！</button>

對于這個注意下面的寫法

methods:{getmsg(){/*alert('方法執行！');*/alert(this.msg);}

方法調用寫在methods中。

?（2） 有參數方法的調用

<button @click="fun04('1111')">

fun04(val)
{alert(val);
}

6.動態值的綁定，就是數據只要發生變化，使用此變量值的地方都會發生變化。

{{msg}}只要數據發生改變，這里的值也會發生改變
<button v-on:click="setmsg()">我是改變</button>

methods的寫法

setmsg(){/*alert('方法執行！');*/this.msg="我是渣渣！"}

7.ref獲取值，并顯示

<input type="text" ref="info"/>

獲取值

this.$refs.info

顯示值（這個使用到了上面的動態值綁定，只要值發生改變，啟用的地方就會發生變化）

<div ref="box">我是；啦啦啦</div>

this.$refs.box.style.background='this.$refs.info.value';

設置背景色

this.$refs.box.style.background='red';

8.歷史值的獲取

我們有時候在頁面上顯示數據的時候，當我們刷新之后，數據就會消失，所以我們可以使用聲明周期函數，將數據加入到聲明周期中進行保存，在刷新之后，可以重新的顯示數據

數據
 data () {return {todo:'dsfh',list:[],ok:true}}

methods:{doAdd(){this.list.push(this.todo);localStorage.setItem('list',JSON.stringify(this.list));},deelete(val){//在某個位置上刪除數據this.list.splice(val,1);localStorage.setItem('list',JSON.stringify(this.list)) ； /*this.list.pop(val);*//*上面的兩個方法是相同的 */}}

紅色的是將值保存起來，當我們刷新出發聲明周期方法，

mounted(){var list = JSON.parse(localStorage.getItem('list'));alert(list);if(list){
this.list = list;將數據設置回list中去}}

9.組件的使用

（1）創建一個組件

<template><!--所有的內容需要被div包含起來--><div id="home"><h2>這是一個組件</h2>{{msg}}</div>
</template>
<!--在組件中也是可以放入業務邏輯的-->
<script>
export default{data(){return{msg:'我是啦啦啦!'    }        }
}
</script>
<!--scoped表示局部作用域 -->
<style lang="scss" scoped>
</style>

（2）將組件引入

import Home from './component/Home.vue';

（3）將組件掛載

 components:{/*** 2.掛載組件*/'v-home':Home,'v-news':News}

（4）使用組件

<v-home></v-home>

10，生命周期函數

這個比較簡單

?

?????? ??