Vue 第一天学习 ---2018.06.28
Vue ?第一天學習 ---2018.06.28
?
?
1.引包
?
2.學會控制元素、顯示數據，基本框架建立
<title>Document</title>
??<script src="./lib/vue.min.js"> </script>
?</head>
?<body>
<div id="app">
?
</div>
?
<script>
//創建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 class="inner" @click="divclick">
<input ?type="button" value="搓我" ?@click="btnclick"/>
</div>
就是我在點擊 ?btnclick 函數的時候，附帶性的也把外層的divclick函數給出發了，
但是先觸發btnclick函數，再觸發divclick 函數，這樣不是很好，
<!-- 使用.stop ?阻止冒泡機制的發生-->
可以使用.stop 阻止，<input ?type="button" value="搓我" ?@click.stop="btnclick"/>
?
<!-- 使用.pervent ?阻止默認事件的發生-->
<a href="http://www.baidu.com" @click.prevent="linkclick">百度一下</a>
<!-- 使用.capture ?實現事件的捕獲機制-->
<div class="inner" @click.capture="divclick">
<!--默認使用冒泡，現在使用捕獲機制-->
<input ?type="button" value="搓我" ?@click="btnclick"/>
<br>
</div>
<!--不允許使用冒泡，只有self 自己點擊的時候觸發-->
<div class="inner" @click.self="divclick">
?
關于stop ?和self 是存在區別的：self 只是保護自己不被觸發，但是stop 阻止所有。
?
2.v-model ??實現雙向數據的綁定，
v-bind 只能實現數據的單向綁定，從 m--->>到v 中，
現在則是v-model ?登場，
<input type="text" v-bind:value="msg" style="width:100%;">
<input type="text" v-model="msg" style="width:100%;">
v-model 指令可以實現 表單元素和Model 中數據的雙向綁定，但是只能運用于表單元素中，
?
3. vue 中使用class樣式樣式，class，
<!--練習使用vue ?控制CSS 的樣式-->
<!--第一種，使用默認的形式，-->
<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 ?樣式
<!--使用Vue ?控制 style 樣式-->
<h1 :style="{'color':'red','font-weight': 200}">這個是一個h1,測試1</h1>
<!--第二種，移到data ?上定義，-->
<h1 :style="styleObj">這個是一個h1,測試2</h1>
<!--第三種，移到data ?上定義多個對象，-->
<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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 邮件发送问题心得
- 下一篇： 6.29 Vue 第二天 学习笔记