本節(jié)目標(biāo)：

? ?? ???? 1.數(shù)據(jù)路徑的三種方式
? ?? ???? 2.{{}}和v-html的區(qū)別

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',}}

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

<img :src="url">

2。使用{{}}和使用v-html的區(qū)別

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

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

3.綁定數(shù)據(jù)的第二種方法

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

4.綁定樣式

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

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

5.方法的調(diào)用

?（1）無參數(shù)的調(diào)用

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

對于這個注意下面的寫法

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

方法調(diào)用寫在methods中。

?（2） 有參數(shù)方法的調(diào)用

<button @click="fun04('1111')"> fun04(val) {alert(val); }

6.動態(tài)值的綁定，就是數(shù)據(jù)只要發(fā)生變化，使用此變量值的地方都會發(fā)生變化。

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

methods的寫法

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

7.ref獲取值，并顯示

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

獲取值

this.$refs.info

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

<div ref="box">我是；啦啦啦</div> this.$refs.box.style.background='this.$refs.info.value';

設(shè)置背景色

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

8.歷史值的獲取

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

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

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

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

9.組件的使用

（1）創(chuàng)建一個組件

<template><!--所有的內(nèi)容需要被div包含起來--><div id="home"><h2>這是一個組件</h2>{{msg}}</div> </template> <!--在組件中也是可以放入業(yè)務(wù)邏輯的--> <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，生命周期函數(shù)

這個比較簡單

?

?????? ??

轉(zhuǎn)載于:https://www.cnblogs.com/kw28188151/p/9195346.html

總結(jié)

以上是生活随笔為你收集整理的vue使用（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。