vue基礎語法

HTML CSS 虛擬機瀏覽器帶你看遍90後 2019-05-25

vue基礎語法

基本安裝

直接用引入

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

開發大型應用

vue-cli

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

綁定信息

Mustache(雙大括號包裹)------>{{}}
v-html
v-text

三種的區別:

//插值表達式可以在文字的任意部分插入，不會覆蓋原來的內容
<div>我依然存在:{{msg}}</div>
//v-text中的文字會覆蓋標籤原來的內容
<div v-text="msg">我會被覆蓋</div>
//v-html
//就是可以解析html代碼咯

v-cloak

解決插值表達式閃爍問題

瀏覽器會先解析原本的內容，當網絡請求不好的時候插值表達式還沒有被vue解析。
甚至刷新快一點都會暴露

<div id="app">
 <div>{{msg}}</div>
</div>
//在頁面中會直接顯示 {{msg}}

解決辦法
可以給元素加上v-cloak指令，配合css樣式來解決閃爍問題

 <style>
 [v-cloak]{
 display: none;
 }
 </style>
	<div id="app">
 <div v-cloak>{{msg}}</div>
 </div>

原理：在vue.js加載完畢之前，由於元素有v-cloak指令的存在，css樣式生效，將元素隱藏起來，
當vue.js加載完畢，會自動將所有元素上的v-cloak指令移除，那麼css樣式失效，元素就展示出來。
但是這個時候插值表達式已經被解析完畢了！

綁定屬性

v-bind:id
所有屬性都通過v-bind綁定
簡寫： :+屬性名
v-bind='class' ==> :class
就把帶有冒號的當做是動態綁定的屬性


<div id="app">
 <img v-bind:src="picUrl" alt="">
 <img :src="picUrl" alt="">
</div>
<script>
 // 在給元素的屬性進行數據綁定的時候，插值表達式不可以使用
 // 需要使用v-bind指令或者其簡寫形式 : 來進行綁定
 var vm = new Vue({
 el: "#app",
 data: {
 picUrl: "1.jpg"
 }
 })
</script>

給元素的屬性綁定動態數據的時候一定要用v-bind

表達式

基本的{{}}形式都可以寫一些簡單的表達式

{{id==1?"ok":"else"}}
{{a+b}}

效果指令

控制顯示隱藏

v-if

<body>
 <div id="app">
 <!--
 直接寫true或者false，不會去找data裡面的值，會直接表示
 true：顯示，false：隱藏	
 --> 
 <p v-if='true'>我會出現</p>
 <p v-if='false'>我會隱藏</p>
 <!--如果綁定的是某個變量，在model中值為true則顯示，不寫或者false為隱藏--> 
 <p v-else>我是什麼</p>
 </div>
 <script src="./node_modules/vue/dist/vue.js"></script>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 seen: true
 }
 })
 </script>
</body>

v-if的元素，不是通過css來這是隱藏，而是直接不渲染。
如果某個元素v-if為false，那麼這個元素身上的其他指令都會失效，因為根本不渲染
切換為true時會重新渲染指令，所以消耗的性能很大，最好綁定在渲染頻率低的元素上

v-show

v-show的語法和v-if一樣，不同的是，show只是隱藏了元素。
所以綁定切換顯示隱藏較多的元素最好綁定v-show

綁定類名

<style>
/*demo樣式如下*/
 .red {
 background-color: red;
 }
 
 .big {
 font-size: 30px;
 }
 
 .green {
 background-color: green;
 }
</style>

字符串綁定法

就相當於字符串拼接
obj裡面寫什麼，p標籤的類就是什麼

	<div id="app">
 <p :class='obj'>我的樣式啊</p>
 </div>
var vm = new Vue({
 el: '#app',
 data: {
 obj: "red big"
 }
 })

對象綁定方法最常用

不同於以往的對象，這裡的鍵名就代表要傳的類名
true和false只是代表要不要傳而已

	<div id="app">
 <p :class='obj'>我的樣式啊</p>
 </div>
 <script src="./node_modules/vue/dist/vue.js"></script>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 obj: {
 red:true,
 big:true
 }
 }
 })
	</script>

數組語法

obj: ['red', 'height']
//其實就是字符串的做法

混合型

obj:[{red:true},'big']
//偶爾用用

綁定內聯style

對象表示法

這裡的鍵名代表的也是屬性名，值代表的是屬性的值

<div id="box">
 <p :style='obj'>vue</p>
</div>
<script>
 var vm = new Vue({
 el: '#box',
 data: {
 obj: {
 color: 'red',
 	width:'100px'
 }
 }
 })
</script>

數組表示法

在裡面寫一個數組，包含對象，對象裡面包含的屬性都會解析

<div id="box">
 <p :style='obj'>vue</p>
</div>
<script>
 var vm = new Vue({
 el: '#box',
 data: {
 objArr:[
 {
 	height:'100px'
 	},{
 color: 'red',
 	width:'100px'
 },
 ]
 }
 })
</script>

條件渲染

# html
<div id="app-3">
 <p v-if="seen">現在你看到我了</p>
</div>
# js
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

事件綁定

用v-on:事件聲明，裡面的值就是事件觸發會調用的函數
函數要在methods中定義

// html
<div id="app-5">
 <p>{{ message }}</p>
 <button v-on:click="reverseMessage">變成數組</button>
</div>
// js
var app5 = new Vue({
 el: '#app-5',
 data: {
 message: 'Hello 我的哥'
 },
 methods: {
 //es6寫法，省略function
 reverseMessage () {
 this.message = this.message.split('');
 }
 }
})

簡寫: v-on:click ----> @click

事件綁定的修飾符

就是在事件綁定後面再.xxx會有添加一些效果（取消冒泡等）
可以不斷的. 來連寫

<button v-on:click.stop.prevent="reverseMessage">逆轉消息</button>
<!-- stop是取消冒泡 prevent取消默認事件 -->
<button v-on:click.once="reverseMessage">逆轉消息</button>
<!-- once代表這個按鈕只能點擊一次 -->
 //.stop 用來阻止事件冒泡的！
 //.prevent 用來阻止瀏覽器默認行為
 //.capture 用來將事件設置為捕獲階段觸發
 //.self 只有元素本身能夠觸發該事件 事件冒泡等行為無法觸發
 //.once 事件只會被觸發一次

計算屬性computed

效果其實和methods一樣，都是定義函數的
這個主要是用來放一些用於計算後返回結果的方法
本質就是將行為再抽取出一個分類，methods裡面的方法，主要用來做功能。computed主要用來做計算，返回一個結果。
不需要去調用，綁定好了頁面的元素，會自動觸發。

//在html中直接加方法名就行了 <span>{{result}}</span>
	var vm = new Vue({
 el: "#app",
 data: {
 num1: 0,
 num2: 0,
 },
 computed: {
 result: function(){
 console.log("computed被調用了")
 return parseInt(this.num1) + parseInt(this.num2);
 }
 }
 })

默認的計算屬性是單項綁定的
有緩存，多次調用相同結果只會返回第一次的結果。相比於methods每次調用都要全部執行一次，效率更高。
在頁面中不需要寫（）來調用

計算屬性實現雙向數據綁定

當計算屬性只有一個函數的時候，這個函數默認是get
兩個函數，一個是get，一個是set

computed: {
 // 如果計算屬性只是一個函數，那麼這個函數就是get函數
 // fullName: function(){
 // },
 //如果要使用計算屬性進行雙向數據綁定，那麼就必須用下面的形式
 //為計算屬性設置get和set方法！
 fullName: {
 //當取值的時候，是num1+num2
 get: function(){
 return this.num1 + this.num2
 },
 //當設置這個值得時候，num1、num2的值會更著改變
 set: function(value){
 this.num1 = value-this.num2;
 	this.num2 = value-this.num1;
 }
 }
}

computed 用的最多的還是單項的，畢竟計算出來只要結果。

雙向數據綁定

v-model

單向數據綁定（一般用在展示性標籤）

數據改變--->元素內容會改變。
元素內容改變--->數據內容不會改變

雙向數據綁定（一般用在表單元素中）

數據和展示元素，更改任意一方，會對雙方都造成影響

<body>
 <div id="app">
 <input type="text" v-model="msg">
 <span>{{msg}}</span>
 <input type="text" v-model="person.name">
 <input type="text" v-model="person.age">
 <input type="text" v-model="person.gender">
 </div>
 <script src="./node_modules/vue/dist/vue.js"></script>
 <script>
 var vm = new Vue({
 el: "#app",
 data: {
 msg: "123",
 person: {
 name: "zzc",
 age: 18,
 gender: "!male"
 }
 }
 })
 </script>
</body>

v-for指令

如果是遍歷對象

對象有三個可以遍歷出來的
item key index
因為對象有鍵值對，並且vue將對象模擬了一個順序
對象本身是無序的

<ul id='app'>
 <li v-for='(item ,key, index) in person' :key='index'>
 值 ： {{item}} ==> 鍵 ： {{key}} ==>順序 ： {{index}}
 </li>
</ul>
	var vm = new Vue({
 el: "#app",
 data: {
 person: {
 name: "張志潮",
 age: 19,
 gender: "male"
 }
 }
	})

如果是遍歷數組

數組沒有第三個值，只有item和index
因為數組本身是有序鍵值對

 <ul id='app'>
 <li v-for='(item , index) in person'>
 內容 ： {{item}} ==> 下標 ： {{index}}
 </li>
 </ul>
 <script src="./node_modules/vue/dist/vue.js"></script>
 <script>
 var vm = new Vue({
 el: "#app",
 data: {
 courses: [
 "瑜伽",
 "啦啦操",
 "廣場舞",
 "肚皮舞",
 "美甲"
 ]
 }
 })
 </script>

vue基礎語法

vue基礎語法

相關推薦