Vue的學習（一）

var vm =

newvue(,

// 存放所有的資料

methods:

}// 存放所有的方法和函式})

特殊符號：}

可以直接列印繫結的vue例項中data儲存的資料

>
}<
/div>
<
/body>

111

vue中的v-if,v-else-if,v-else是放在標籤中使用的

分別對應著原生js**的if,else if,else

**如下:

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"/vue課程/vue/vue.js"
>
<
/script>
今天週幾<
/title>
<
/head>
="out"
>
"day==1"
>今天周一<
/h1>
else-if
="day==2"
>今天周二<
/h1>
else-if
="day==3"
>今天週三<
/h1>
else-if
="day==4"
>今天周四<
/h1>
else-if
="day==5"
>今天周五<
/h1>
else-if
="day==6"
>今天週六<
/h1>
else-if
="day==0"
>今天週日<
/h1>
else
>格式錯誤<
/h1>
<
/div>
newvue(}
);<
/script>
<
/body>
<
/html>

執行結果如下:

今天周一

template標籤

標籤可以用來包裹內容，標籤內若有id或class屬性或v-if等都能正常使用，但該標籤不會在網頁中的元素（elements）中展示(就是我們在網頁中看自己源**的地方)

>

"choice"
>
姓名：孫悟空<
/h1>
年齡：未知<
/p>
目標：學本領<
/b>
<
/template>
<
/div>
newvue(}
);<
/script>

網頁中的顯示如下:

>

姓名：孫悟空<
/h1>
年齡：未知<
/p>
目標：學本領<
/b>
<
/div>
newvue(}
);<
/script>

v-show與v-if一樣是個根據條件展示元素的指令，用法大致一樣

>

"choice"
>hello vue!
<
/h1>
<
/div>
var example =
newvue(}
);<
/script>

不同的是帶有v-show的元素始終會被渲染並保留在 dom 中。v-show只是簡單地切換元素的 css propertydisplay。如下:

"true"

>
好好學習
<
/h1>
"false"
>
天天向上
<
/h1>

好好學習
<
/h1>
"display:none;"
>
天天向上
<
/h1>

v-if是「真正」的條件渲染，因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建。

v-if也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 css 進行切換。

一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在執行時條件很少改變，則使用v-if較好。

vue學習筆記 vue基礎（一）

vue框架提供了乙個vue的建構函式 類 我們通過例項化vue，產生乙個vue物件，來構建應用 例如 new vue 在例項化vue的時候，傳入一些配置引數這些配置引數在vue官網的api中可以找到 選項 new vue 使用者看到的介面 產生頁面檢視的基礎結構 html 插值表示式 new vue...

Vue學習筆記 一

1 vue基本模型 一段html 配合json，再new 處理vue例項。html json格式的資料 vue.js var vm new vue new vue 2.2.2 v for value in json 2.2.3 v for k,v in json 如果有重複的資料 track by ...

vue學習筆記（一）

一.搭建環境 1.如果我們的電腦上有了node和npm，我們就只需要執行下面的命令全域性安裝vue cli腳手架 npm install g vue cli 或者 cnpm install g vue cli 2.構建完腳手架之後，隨便進入乙個我們事先準備好的目錄，比如demo目錄，然後在目錄中做初...