vue 屬性繫結和互動

阿新 • • 發佈：2019-01-14

vue指令繫結屬性

vue 通過指令v-bind進行屬性繫結,src/width/height/title,例如v-bind:src=''' 可以簡寫為:src=''',同樣的v-bind:width等等，簡寫為：width,:height

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="box">
    <img v-bind:src="a" :width = 'width' :heigth="height">
</div>
</body>
<script>
    new Vue({
        el:'#box',
        data:{
            a:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
            width:'200px',
            height:'100px'
        },
        methods:{}
    });
</script>

vue 指令繫結style，class

同樣的有 v-bind:class = "" -> :class=""

v-bind:style = "" - > :style =""

需要注意的是進行繫結的資料方式:

class 繫結資料方式: :class="[red]", :class="[red,blue]" :class="json"

:class = "[red]" red是 vue例項中定義的屬性,使用如下:

style>
    .red{
        width:100px;
        height:200px;
        background-color: antiquewhite;
    }
</style>
<body>
<div id="box">
   <div :class="[red]">

   </div>
</div>
</body>
<script>
    new Vue({
        el:'#box',
        data:{
            red:'red' // 自定義的class名稱
        },
        methods:{}
    });
</script>

同樣的:class = "[red,blue]" 可以定義多個樣式

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
    .red{
        width:100px;
        height:200px;
        background-color: antiquewhite;
    }
    .blue{
        font-size: medium;
        font-weight: 600;;
    }
</style>
<body>
<div id="box">
   <div :class="[red,blue]">
        hello world!
   </div>
</div>
</body>
<script>
    new Vue({
        el:'#box',
        data:{
            red:'red',
            blue:'blue'

        },
        methods:{}
    });
</script>

:class = "json",在vue例項中定義的屬性為json物件，json物件中可以放置多個樣式

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
    .red{
        width:100px;
        height:200px;
        background-color: antiquewhite;
    }
    .blue{
        font-size: medium;
        font-weight: 600;;
    }
</style>
<body>
<div id="box">
   <div :class="json">
        hello world!
   </div>
</div>
</body>
<script>
    new Vue({
        el:'#box',
        data:{
            json:{
                red:'red',
                blue:'blue'
            }
        },
        methods:{}
    });
</script>

style的繫結資料的方式和class類似一樣:

:style = "[a]", :style= "[a,b,c]" :style = "json"

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
</style>
<body>
<div id="box">
   <div :style="[width,height,back]" >
        hello world!
   </div>
</div>
</body>
<script>
    new Vue({
        el:'#box',
        data:{
          width:{width:'200px'},
          height:{height:'300px'},
          back:{backgroundColor:'red'}
        },
        methods:{}
    });
</script>

將上面的資料改為繫結json資料的:

<div id="box">
   <div :style="a" >
        hello world!
   </div>
</div>
</body>
<script>
    new Vue({
        el:'#box',
        data:{
            a:{
                width:'200px',
                height:'300px',
                backgroundColor:'red'
            }

        },
        methods:{}
    });
</script>

vue的模板

{{msg}} : 資料更新模板變化

{{*msg}} ：資料只會繫結一次

{{{msg}}} : 當msg是html，進行轉意輸出

vue 互動

vue 做互動需要引入 vue-resource.js,傳送資料格式,互動方法是繫結在vue例項上的，

this.$http.XXX(

).then(function(res){//這個回撥函式表示成功了

res是一個json資料，需要的資料通過res.data獲取，同時能夠通過res.status獲取響應碼

}),function(){//這個回撥函式表示失敗了

}

get 請求

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="lib/vue-resource.js"></script>
<body>
<div id="box">
    <input type="button" value="點選" @click="show()">
</div>
</body>
<script>
new Vue({
    el:"#box",
    data:{},
    methods:{
        show:function(){
            this.$http.get('test.php',{a:'a',b:'b'}).then(function (res) {
                console.log(res.status);
                alert(res.data);
            }),function(res){
                console.log(res.status);
            }
        }
    }
});
</script>

post請求：注意加上{emulateJSON:true} 這樣content-type定義為 application/form-xxxx,資料才能傳送成功

this.$http.post('post.php',{
		    a:1,
		    b:20
},{
      emulateJSON:true
}).then(function(res){
     alert(res.data);
},function(res){
     alert(res.status);
});

jsonp: 跨域請求，注意callback的名稱是否需要另外定義，預設就是callback

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
		    wd:'a'
},{
		  jsonp:'cb'//callback名字，預設名字就是"callback"
	}).then(function(res){
		    alert(res.data.s);
	},function(res){
		    alert(res.status);
	});

* 一些學習筆記，有錯誤請指出，謝謝

vue 屬性繫結和互動

vue指令繫結屬性 vue 通過指令v-bind進行屬性繫結,src/width/height/title,例如v-bind:src=''' 可以簡寫為:src=''',同樣的v-bind:width等等，簡寫為：width,:height <script src

Vue學習之vue屬性繫結和雙向資料繫結

··· <!DOCTYPE html> vue

Vue學習（三）——屬性繫結和雙向資料繫結

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屬性繫結和雙向資料繫結</title> <script src="./v

Vue屬性繫結v-bind:和雙向資料繫結v-model

<body>   <div id="root"> <div v-b

Vue之屬性繫結和雙向資料繫結

屬性繫結：v-bind:title，簡寫為：:title 雙向資料繫結:v-model繫結content的值，也可以改變content的值 <div id="root"> <d

vue的屬性繫結和雙向資料繫結

屬性繫結 v-bind 屬性繫結,使用如下,為div綁定了一個title屬性 <div v-bind:title="'dell lee'+title">hello world!</div> v-bind: 可以縮寫為: <div :title=

初識Vue屬性繫結

HTML 屬性中的值應使用 v-bind 指令。現在想通過在Vue中繫結a標籤的href屬性中的url 在js： new Vue({ el:"#app", data:{

Angular--HTML屬性繫結和DOM屬性繫結

前言上一篇部落格介紹了資料繫結，意猶未盡，所以這片部落格再介紹一下HTML屬性繫結和DOM繫結。內容基本HTML屬性繫結如下： <td [attr.colspan]="tableColspan">Something<td&

Vue(一) 資料繫結和第一個Vue應用

學習 Vue.js 最有效的方法是檢視官網文件資料繫結和第一個Vue應用先從一段簡單的 HTML 程式碼開始，感受 Vue.js 最核心的功能。 <!DOCTYPE html> <html lang="en"> <head> <meta c

Vue.js單向繫結和雙向繫結例項

1、單向繫結單向資料繫結的實現思路： ①　所有資料只有一份 ②　一旦資料變化，就去更新頁面(只有data–>DOM，沒有DOM–>data) ③　若使用者在頁面上做了更新，就手動收集(雙向繫結是自動收集)，合併到原有的資料中。 <!DOCTYPE html&

vue 繫結屬性繫結Class 繫結style

1 <template> 2 3 4 <div id="app"> 5 6 <h2>{{msg}}</h2> 7 8 <br> 9 10 <

vue的雙向繫結和依賴收集

在掘金上買了一個關於解讀vue原始碼的小冊，因為是付費的，所以還比較放心在小冊裡看到了關於vue雙向繫結和依賴收集的部分，總感覺有些怪怪的，然後就自己跟著敲了一遍。敲完後，發現完全無法執行，坑啊，寫書人完全沒有測試過。然後自己完善程式碼，越寫越發現坑，問題有些大。。。

Vue 總結（1）屬性繫結

一.V-on：縮寫@ 繫結事件監聽器 <button v-on:click="doThis"></button> on後面接著就是事件 <!-- 停止冒泡 --&g

vue動態繫結class的3種方式物件語法和陣列語法

動態繫結class的幾種方式 1.物件語法行內或計算屬性 <style> .static { width: 100px; height: 100px; background-color: #ccc; } .orange {

vue元件—父元件向子元件傳值（通過屬性繫結）

注意： 1.資料繫結時，可能由於某種命名的規範方法或者屬性名字不能是帶有駝峰或者連字元的。並且繫結之後，還要放到子元件的 props資料後，方可呼叫。 2.子元件呼叫的父元件的屬性，只能讀不能寫。同時，子元件的屬性是其私有的，Ajax請求返回data屬性變化也只是子元件

Vue-中若元素屬性繫結的值需要為數字時坑

Vue-中若元素屬性需要繫結的值為數字時的處理 1.如果直接這樣寫： <select v-model='value'> <option value='數字'>...</option> </select> 這時vue並不會

Vue中img的src屬性繫結

<img src="./img/red.png'" /> // 頁面顯示圖片如果遇到圖片是動態的，也就是說在不同情況下顯示不同的圖片，也就是下面使用的屬性繫結 <img :src="imgPath" /> // imgPath

Vue中img的src屬性繫結與static資料夾

不少人在vue的開發中遇到這樣一個問題： img的src屬性繫結url變數，然而圖片載入失敗。大部分的情況中，是開發者使用了錯誤的寫法，例如： <img src="{{ imgUrl }}"/> 這樣寫肯定是不對的，正確的寫法應該使用v-

vue.js入門（3-4）（methods，屬性繫結）

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <scri

【Vue】vue中img的src屬性繫結問題

問題：img的src屬性填寫的圖片地址，可以正常渲染，但是一旦利用繫結:src屬性的時候，圖片就載入失敗了需求：滑鼠移入切換圖片上一位前端小哥哥，沒做這個互動，我接手後加上去，很簡答的互動，我替換圖片的時候準備三元判斷，src需要屬性繫結，於是發現同樣的地

vue 屬性繫結和互動

vue指令繫結屬性

vue 指令繫結style，class

vue的模板

vue 互動

相關推薦