1.Vue:
定義:漸進式JavaScript框架
漸進式:
定義:聲明渲染 組件系統 客戶端路由 集中式狀態管理 項目構建
2.MVVM
| 定義 | |
|---|---|
| M | Model（服務器上的業務邏輯操作） |
| V | View（頁面） |
| MV | ViewModel（Model與View之間核心樞紐，比如Vue.js） |
3.指令: 指令的本質是自定義屬性
4.閃動
問題產生：出現模版語法{{msg}}
解決思路：使用v-cloak指令
解決問題原理：先隱藏，替換好值之后在顯示
demo
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-cloak>
{{msg}}
</div>
</div>
<style type="text/css">
[v-cloak]{display: none;}
</style>
<script type="text/javascript" src="js/vue.js">
</script>
<script type="text/javascript">
var vu = new Vue({
el:"#app",
data:{
msg:"hello vue"
},
});
</script>
</body>
</html>
5.數據綁定指令
v-text:填純文本,屬於html片段
v-html:填寫html,屬於完整html
v-bind:填寫屬性,屬於html片段
v-pre:如果原始數據,跳過編譯
v-once:如果顯示的信息后續不需要再修改，使用v-once，這樣可以提高性能。
demo:
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-text="msg"></div>
<div v-html="html"></div>
<a v-bind:href="link1">這是v-bind</a>
<div v-pre>{{preInfo}}</div>
<div v-once>{{onceInfo}}</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
link1:"https://www.cnblogs.com/MDD-Blog/",
img:"./img/logo.png",
msg:"這是v-text",
html:"<h1>這是v-html</h1>",
preInfo:"這是v-pre",
onceInfo:"這是v-once"
},
});
</script>
</html>
6.雙向數據綁定
原理：v-model ----> vue ----> data{k:v,}
demo
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="app">
<div v-text="msg"></div>
<input type="text" v-model="msg"/>
</div>
<script type="text/javascript" src='js/vue.min.js'></script>
<script type="text/javascript">
var vm = new Vue({
el:".app",
data:{
msg : "hello world",
message: "hello vue",
},
});
</script>
</body>
</html>
7.事件綁定
v-on:事件名="方法" 事件名：點擊: click 移動: mouseenter 雙擊: dbclick
demo1: 事件函數調用
code:事件函數調用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="app">
<div> {{num}} </div>
<button v-on:click="add()">1.加一</button>
<button v-on:click="reduce">減一</button>
</div>
<script type="text/javescript" src='js/vue.min.js'>
</script>
<script type="text/javascript">
var vm = new Vue({
el:".app", /* 元素的掛載位置 */
data:{
num:15,
}, /* 模型數據(值是一個對象) */
methods:{
add:function(){
this.num++
},
reduce:function(){
this.num--
}
}
});
</script>
</body>
</html>
demo2: 事件函數傳參
code:事件函數傳參
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="app">
<div> {{num}} </div>
<button v-on:click="add">1.加一</button>
<button v-on:click="reduce(2, $event)">減二</button>
</div>
<script type="text/javescript" src='js/vue.min.js'>
</script>
<script type="text/javascript">
var vm = new Vue({
el:".app", /* 元素的掛載位置 */
data:{
num:15,
}, /* 模型數據(值是一個對象) */
methods:{
add:function(event){
// 這里 this 是 vue 的實例對象
console.log(event.target.innerHTML)
this.num++
},
reduce:function(num2, e){
this.num-=num2
}
}
});
</script>
</body>
</html>
注意：
<button v-on:click="reduce(2, $event)">減二</button> // $event為事件參數必須放到末尾
v-if
<div id="app">
<div v-if="name === 'a'">
a
</div>
<div v-else-if="name === 'b'">
b
</div>
<div v-else-if="name === 'c'">
c
</div>
<div v-else>
不是a或b或c
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'c'
}
})
</script>
v-show
code:
<h1 v-show="ok">Hello!</h1>
v-if和v-show的區別
v-if :每次都會重新刪除或者創建元素
v-show:每次不會重新進行DOM元素的刪除和創建操作，只是切換了元素的 display:none 樣式
v-for
demo:
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div >
<label>ID:
<input type="text" v-model="id" />
</label>
<label>NAME:
<input type="text" v-model="name" />
</label>
<input type="button" v-on:click="add" value="添加"/>
</div>
<p v-for="item in infos" v-bind:key="item.id">
<input type="checkbox" />
{{ item.id }}
</p>
</div>
</body>
<script type="text/javascript" src='js/vue.js'></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
id:"",
name:"",
infos:[
{id:1,name:"11"},
{id:2,name:"22"},
{id:3,name:"33"},
{id:4,name:"44"},
],
},
methods:{
add:function(){
// 列表尾部添加
// this.infos.push({id:this.id, name:this.name})
// 列表頭部添加
this.infos.unshift({id:this.id, name:this.name})
},
}
})
</script>
</html>