初識Vue、插值操作、屬性綁定
初識：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 第一步引入相關的JS文件 --><script src="./../utils/vue.js"></script>
</head>
<body><div id="app">12y327y328<div>{{num}}</div></div></body>
<script>// 現在思路全部跟之前的不一樣 // 創建最簡單的// 創建一個實例得到一個對象const vue= new Vue({// 這個也稱為掛載點 會跟目標標簽進行綁定，從此被vue管理el: "#app",// 用來放數據的 在VUE的區域聲明變量data: {num: 0}})console.log(vue);</script>
</html>屬性綁定：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../utils/vue.js"></script><style>.card{width: 300px;height: 300px;border: 1px solid black;}/* 加一個激活樣式 */.active{background-color: aqua;}</style>
</head>
<body><div id="app"><!-- v-bind:動態綁定標簽中的屬性值來源，從`data`中獲取或者寫一些表達式。Vue做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。**形式**： --><!-- 那么我們在這邊加上一個v-bind: 以及下面Vue中data的屬性名 --><button v-bind:id="idName">按鈕</button><!-- 也可以這樣 --><button :id="idName">按鈕</button><!-- 只要是標簽的屬性都能夠綁定 value就是我們之前講過的預設的輸入值--><!-- --><input type="text" :value="inputText"><!-- 要么是Option內容 要么是js代碼 記得加上單引號 --><input type="text" :value="1<0?'單號':'雙匯'"><!-- 如果我下面有一排的card 有點像我們的輪播圖 active的目標是一直在變的 在Vue是如何實現的 --><div class="card active"></div><div class="card "></div><div class="card "></div><div class="card "></div><div class="card "></div></div></body>
<script>// 實例Vuevar s=new Vue({// 掛載點el:"#app",// 放置數據data(){return{// 創建一個屬性名 我現在要把值賦給ididName:'text',inputText:"請輸入。。。。。。。。。。。。。。。"}}})</script>
</html>Vue強化class綁定：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../utils/vue.js"></script><style>.box{width: 100px;height: 100px;background-color: aqua;}.active{background-color: red;}.active-fuben{background-color: red;}</style>
</head>
<body><!-- class 綁定 --><div id="app"><div :class="'box active'"></div><h1>字符串綁定</h1><!-- 一旦加上冒號的話 vue是會直接認作是變量 --><div :class="'box'"></div><div :class="text"></div><!-- obj綁定 新 賦值的是對象類型--><!-- 重點：如果我們要控制某個樣式的顯示和隱藏這時候就變得很快了 --><h1>obj綁定 新 </h1><div :class="obj"></div><!-- 屬性綁定 以及綁了一個對象 actives：是一個變量會去data找 ，所以一定要聲明 --><div :class="{box:true, active: actives }"></div><!-- ------------------------ --><h1>綁定數組 字符串和對象的結合體</h1><!-- 那么數組的每一個元素（只能是字符串否則不被接受）都會被渲染到目標上；并且數組里面還可以放對象(好處就是在于我們標簽碰到一堆類名的時候，并且有些是固定的有些是不固定的，這時候我們聲明一個數組，然后把固定的像box,直接寫在數組里，對于那些不固定的我們用一個對象包裹著，對象里面) --><div :class="['box','123',{active:actives}]"></div><!--命名 技巧 --><h1>jiqiao</h1><div :class="active-fuben"></div></div>
</body>
<script>// var s=new Vue({el:"#app",data(){return{text:'box',obj:{// box:true,// 記住只要是屬性值對應到bool，那么就會生效 例子在下面，這時候我們就可以在別的地方去控制這個值，比如點擊事件 當我// 點擊的時候我們就可以把這個值改為 true or false了// 平常寫代碼的時候，我們一般先把true寫死actives:1>0,'active-fuben':true},actives:1>0,'active-fuben':true}}})
</script>
</html>Vue強化style綁定：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../utils/vue.js"></script><style>.box{width: 100px;height: 100px;background-color: aqua;}</style>
</head>
<body><div id="app"><h1>字符串</h1><!-- 用的不多 沒必要 --><div class="box" :style="text"></div><!-- 對象綁定用得比較多--><div class="box" :style="objs"></div> <h1>-------------------------------</h1><!-- 數組綁定 它的這個數組比較特殊 因為它這個數組里面只能放對象 用的比較少但是要知道--><div class="box" :style="[obj1,obj2]"></div><div class="box" :style="[obj1,1<0?obj2:{}]"></div></div>
</body>
<script>var s=new Vue({el:"#app",data(){return{text:'background-color: blueviolet',objs:{'background-color':'red','border':'5px solid black'},obj1:{'background-color':'blue'},obj2:{'border':'5px solid yellow'}}}})
</script>
</html>插值語法：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 我們在項目的時候，一般都是采用阻塞式，必須得vue加載完才能往下走 --><script src="./../utils/vue.js"></script>
</head>
<body><div id="app"><!-- Mus語法：沒有VUe的話正常的話會被當做是文本顯示 --><div>{{H}}</div><div>{{num}}</div><!-- VUE指令都是寫在標簽里面的 --><!-- 那么這個值vue就會去data里面找 只能解析為字符串 前面VUE加載完，當VUE讀到v-text指令的時候 會找到num,再把值放進來--><div v-text="num"></div><!-- ----------v-html--------------------- --><div v-html="htmls"></div><!-- ------有時候我們確實只想要字符串，不被VUE解析------------- --><div v-pre>{{H}}</div><!-- v-once與上面v-text效果相同但是區別在于只渲染一次數據 不跟隨響應式變化 --><div v-once>{{num}}</div></div></body>
<script>var s= new Vue({el:"#app",// 之前我們data里面寫的是以鍵值對的方式,現在變了// 我們把數據寫在return里面 這一步是為了做數據隔離-組件之后才知道為什么data(){// 這里記住{不能換行，否則無法被Vue識別到return{/** * 當一個 Vue 實例被創建時，它將 `data` 對象中的所有的 `property`(屬性) * 加入到 Vue 的**響應式系統**中。內部可以監聽到變量的值發生變化，對應頁面上也會發生變化，跟之前完全變了，我們只要告訴數據是啥，* 然后變量在哪個位置顯示* 當這些 `property` 的值發生改變時，* * 視圖將會產生“響應”，即匹配更新為新的值。* * **/H: "hello word",num:123,htmls:`<div>123</div><div>dnskds</div>`}}})// // 每兩秒執行一次// setTimeout(() => {// s.num++;// }, 2000);
</script>
</html>
)
