vue.js是什么
Vue.js是一套用于構(gòu)建用戶界面的漸進式框架。Vue.js通過簡單的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。
vue.js的特性
- 確實輕量
- 數(shù)據(jù)綁定
- 指令
- 插件化
vue.js的語法
- 插值
文本插值是最基本的形式，用雙大括號{{ }} - 指令
指令是帶有v-前綴的特殊性，主要綁定表達式，也就是javascript表達式和過濾器。指令的作用是當表達式的值發(fā)生變化時，將這個變化也反映到DOM上。 - 常用指令有：
- v-text和v-html
- 監(jiān)聽事件指令 v-on
- 屬性綁定指令 v-bind
- 表單輸入綁定指令 v-model
- 計算屬性
- 條件渲染：v-if 和 v-show的區(qū)別
- HelloWorld 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
<!-- 引入vue.js文件 -->
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-for='item in fruit'>{{item}}</div>
<!-- 隱藏時，v-if的那個div在dom中移除了，是真正的條件渲染，確保適當?shù)匿N毀和重建，
直到條件第一次為真時才開始渲染，有高的切換開銷，運行條件很少改變的時候，用v-if比較好 -->
<div v-if='showOrhide'>顯示或隱藏1</div>
<!-- 隱藏時，v-show 的div則通過display:none來表達隱藏，不管初始條件是什么都會被渲染
有更好的初始渲染開銷，適合需要頻繁切換 -->
<div v-show='showOrhide2'>顯示或隱藏2</div>
<h2>計算2個數(shù)之和</h2>
第一個數(shù)：<input v-model='oneNum'>
第二個數(shù)：<input v-model='twoNum'>
<div>計算結(jié)果：{{result}}</div>
<!-- 表單輸入綁定指令v-model,v-model指令在表單<input>及<textarea>元素上創(chuàng)建雙向數(shù)據(jù)綁定
它會根據(jù)控件類型自動選取正確的方法來更新元素，負責監(jiān)聽用戶的輸入時間以更新數(shù)據(jù)，并對一些
極端場景進行一些特殊處理 -->
<input v-model='content2'>
<div>你輸入了：{{content2}}</div>
<!-- v-bind的縮寫是: -->
<div :title='title'>Hello vue!</div>
<!-- 屬性綁定指令v-bind 用于響應(yīng)式地更新HTML屬性 -->
<div v-bind:title='title'>Hello vue!</div>
<!-- v-on可以簡寫為@ -->
<div @click='clickMe'>點我</div>
<!-- 指令v-on監(jiān)聽DOM事件，并在觸發(fā)時運行一些Javascript代碼 -->
<div v-on:click='clickMe'>點我</div>
<!-- 用指令v-html輸出標簽中的內(nèi)容 -->
<div v-html='content'></div>
<!-- 用指令v-text輸出結(jié)果為帶標簽的文本 -->
<div v-text='content'></div>
<!-- <h1>你好，{{msg}}</h1> -->
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
// el:是element的縮寫，指要操作/綁定的元素
data:{
msg:'hello vue!',
content:'<h1>我是標題</h1>',
title:'這是標題',
content2:'這是內(nèi)容',
oneNum:'',
twoNum:'',
showOrhide:true, //顯示
showOrhide2:false, //隱藏，下面覆蓋上面的
fruit:["蘋果","桃子","西瓜"]
},
// data:寫需要操作改變的內(nèi)容
//插值，文本插值是最基本的形式，用大括號{{}},如下代碼
// template:'<h1>你好，{{msg}}</h1>'
//自動根據(jù)el，template，data數(shù)據(jù)生成最終的效果。最后放在掛載點之中
methods:{
clickMe:function(){
alert("你點到我了")
this.content="呵呵呵"
//改變插值
}
},
// 事件寫在Vue實例的methods對象里
computed:{
result:function(){
//第一次進入頁面是沒有輸入的，給個提示
if (this.oneNum==''||this.twoNum=='') {
return '你還沒有輸入'
}else{
//輸入了2個數(shù)，就開始計算
return parseInt(this.oneNum) + parseInt(this.twoNum)
}
}
}
//computed 計算屬性，它的性能是比較高的，只有當他依賴的屬性發(fā)生變化時，
//它才會重新請求計算，否則使用上一次的緩存值。所以如果一個龐大的數(shù)據(jù)項目，
//需要有緩存的，就可以用這種方法?？梢詼p少請求次數(shù)，達到優(yōu)化。
})
</script>
</body>
</html>
