當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue 第一天学习 ---2018.06.28

發布時間：2024/10/8 vue 76 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue 第一天学习 ---2018.06.28 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue ?第一天學習 ---2018.06.28

1.引包

2.學會控制元素、顯示數據，基本框架建立

<title>Document</title>

??<script src="./lib/vue.min.js"> </script>

?</head>

?<body>

</div>

//創建vue 實例，

var vm = new Vue({

el : '#app',

data : {

methods : {

}

});

</script>

?</body>

3.相關的指令，

v-cloak 解決插值表達式的閃爍問題，

v-text

v-html ??解析為html

v-bind ???是Vue 中用于綁定屬性的指令， v-bind中可以寫表達式，

v-on ???綁定各類事件

4.總結

4.1 定義一個基本的Vue代碼結構

4.2 插值表達式和 v-cloak ?v-text ??v-html ?

v-bind綁定變量 ?縮寫是 ?:

?v-on綁定事件 ?縮寫是 ?@ ?

4.3 setInterval ()函數使用 ?clearInterval() ?函數使用

2018.06.29 ?

1.事件修飾符

----關于冒泡機制，

</div>

就是我在點擊 ?btnclick 函數的時候，附帶性的也把外層的divclick函數給出發了，

但是先觸發btnclick函數，再觸發divclick 函數，這樣不是很好，

可以使用.stop 阻止，<input ?type="button" value="搓我" ?@click.stop="btnclick"/>

<br>

</div>

關于stop ?和self 是存在區別的：self 只是保護自己不被觸發，但是stop 阻止所有。

2.v-model ??實現雙向數據的綁定，

v-bind 只能實現數據的單向綁定，從 m--->>到v 中，

現在則是v-model ?登場，

v-model 指令可以實現表單元素和Model 中數據的雙向綁定，但是只能運用于表單元素中，

3. vue 中使用class樣式樣式，class，

<h1 class="red thin">這個只是一個測試實例1</h1>

<h1 :class="['red','thin']">這個只是一個測試實例2</h1>

<h1 :class="['red','thin',flag?'active':'']">這個只是一個測試實例3</h1>

<h1 :class="['red','thin',{active:flag}]">這個只是一個測試實例4</h1>

<h1 :class="classObj">這個只是一個測試實例5</h1>

var vm = new Vue({

el : ??"#content",

data : {

flag : true,

classObj : {'red':true,'active':false}

methods : {

}

});

4. vue ?控制style ?樣式

<h1 :style="{'color':'red','font-weight': 200}">這個是一個h1,測試1</h1>

<h1 :style="styleObj">這個是一個h1,測試2</h1>

<h1 :style="[styleObj,styleObj2]">這個是一個h1,測試3</h1>

5.v-for ?的使用，有五種形式，

<p v-for="item in list">{{item}}</p> ??普通數組

<p v-for="(item,i) in list">{{item}}---{{i}}</p> 展示形式不一樣

<p v-for="user in list2">{{user.id}}---{{user.name}}</p> ?對象數組

<p v-for="(val,key) in list3">{{val}}---{{key}}</p> ??對象--鍵值對

<p v-for="count in 20">{{count}}</p> ????普通數字形式

這五個形式

6.v-for ?使用的注意事項，就是保障數據的唯一性

7.v-if ??v- show

<h3 v-if="flag">這個是使用v-if控制的元素</h3> ??v-if ?是刪除dom操作，

<h3 v-show="flag">這個是使用v-show控制的元素</h3> ??v-show 是進行元素的display : none屬性。

?v-if ?對性能消耗較高，因此頻發的切換則不使用這個，

v-show 有較高的出事渲染消耗，

第一天學習總結：

1.學習了mvc ?和mvvm 的區別，mvc ?是整個項目，mvvm ?是前端架構，vm提供數據d綁定，

2.學習了vue ?中基本的代碼結構，引包，el,data ,methods ,

3.學習了相關的基本指令，

插值表達式，{{msg}} ?{{中間是變量名}}

v-cloak ?v-text ?v-bind(:) ?v-on(@) ?v-model ?v- for ,v-if ??v-show ,事件修飾符，

4.事件修飾符，，.stop .prevent ?.capture ?.once ?.self ?

5.el ?選擇控制的區域，data 是個對象，指定控制區域的用到的數據，methods ?也是對象，自定義方法，

6.在vm 實例中，要使用data 中的數據，和methods ?中的方法，使用this

7. v-for ?要會使用 key ?屬性，

8.v- model ?只能應用于表單元素，實現數據的雙向綁定

9.vue ?中綁定樣式的兩種方式，，v-bind :class ?v-bind:style ?,其中數據可以是數組，也可以是類，

? ?

總結

以上是生活随笔為你收集整理的Vue 第一天学习 ---2018.06.28的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。