組建的兩個(gè)核心點(diǎn)
1.響應(yīng)式數(shù)據(jù)綁定 2.組合的視圖組件
根據(jù)MVVM模式解釋雙向綁定數(shù)據(jù)例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雙向綁定數(shù)據(jù)</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!-- 視圖模板 -->
<div id="demo">
<input type="text" v-model="message"/>
<p>{{message}}</p>
</div>
<script>
// 數(shù)據(jù)模型
let data={
message:'Hello World!'
}
// 視圖模型
var vm=new Vue({
el:'#demo',
data:data
});
console.log(vm)
</script>
</body>
</html>
vue.js入門實(shí)例，詳細(xì)解說
每個(gè) Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個(gè) Vue 的實(shí)例
var vm = new Vue({
// 數(shù)據(jù)州藕、模板榨馁、掛載元素憨栽、方法、生命周期鉤子等選項(xiàng)
})
常見的幾個(gè)：
<strong>data</strong> 類型 Object | Function
<strong>methods</strong> 類型 { [key: string]: Function }
<strong>el</strong> 類型 string | HTMLElement
<strong>template</strong> 類型 string
具體查看API
實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js入門實(shí)例</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!-- 模板 -->
<div id="demo">
<span v-on:click="evenClick">{{message}}</span>
</div>
<script>
// 數(shù)據(jù)
let data={
message:'Hello World!'
}
// 視圖模型
//聲明式渲染翼虫，只需要掛載選擇器將數(shù)據(jù)渲染到模板
var vm=new Vue({
el:'#demo',
data:data,
methods:{
evenClick(){
alert('Hello World')
}
}
})
</script>
</body>
</html>
聲明式渲染【如上&& vue常用】 PS 命令式渲染【原生】
聲明式渲染 ： 只要關(guān)心在哪里（where）做什么（what）無需關(guān)心如何實(shí)現(xiàn)的（how）
命令式渲染：what +where+how
舉例：給數(shù)組每個(gè)數(shù)字乘以2
聲明式渲染【也可以如上實(shí)例中的舉例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聲明式渲染</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<script>
var arr=[1,2,3,4,5];
var newArr=arr.map(function(item){
return item*2
});
console.log(newArr)
</script>
</body>
</html>
命令式渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>命令式渲染</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<script>
var arr=[1,2,3,4,5];
var newArr=[];
for(var i=0;i<arr.length;i++){
newArr.push(arr[i]*2)
};
console.log(newArr)
</script>
</body>
</html>
內(nèi)置指令
模板
模板：【三類】
1.html模板：基于DOM模板屑柔，模板是可解析的有效的Html
2.template字符串模板：模板將會(huì)替換掛載的元素，掛載元素的內(nèi)容都將被忽略 // 根節(jié)點(diǎn)只有一個(gè) //將html結(jié)構(gòu)寫在一對script標(biāo)簽中珍剑，這只為type="x-template"
3.模板---render函數(shù)
三個(gè)模板舉例：
html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html模板</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
<div v-html="html"></div>
</div>
<script>
let obj={
html:"<div>Hello World</div>"
}
var vm=new Vue({
el:"#demo",
data:obj
});
</script>
</body>
</html>
template字符串模板【兩種方式】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模板1</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
<div>Hello</div>
</div>
<script>
var str="<div>Hello World</div>";
var vm=new Vue({
el:"#demo",
template:str
});
// 頁面渲染結(jié)果是Hello World 而不是Hello,原因是template的權(quán)重較高
//var str ="只能包含一個(gè)div,或者div里面嵌套div等其他元素掸宛，不能并列"
//在es6語法中，可以寫成var str=` `;【該符號(hào)在鍵盤上1的左邊切換到英文模式】這種方式的好處是可以換行
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template2模板</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
<div>Hello</div>
</div>
<script type="x-template" id="temp">
<div>Hello World</div>
</script>
<script>
var vm=new Vue({
el:"#demo",
template:"#temp"
});
//引入模板引擎次慢，只能在本頁面復(fù)用
</script>
</body>
</html>
模板---render函數(shù)
render 類型 function
render 函數(shù)接收一個(gè) createElement 方法作為第一個(gè)參數(shù)用來創(chuàng)建 VNode
createElement(標(biāo)簽名,[數(shù)據(jù)對象],子元素)
數(shù)據(jù)對象屬性：
class:{} 綁定class,和v-blind:class 一樣的API
style:{} 綁定class,和v-blind:style 一樣的API
attrs:{} 添加行間屬性
domProps:{} DOM元素屬性
on:{} 綁定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template2模板</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.yellow{
background-color: yellow
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
var vm=new Vue({
el:"#demo",
render(createElement){
var obj=createElement(
"ul",
{
class:{
yellow:true
},
style:{
fontSize:"50px"
},
attrs:{
type:"text",
name:"email"
}
},
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
);
console.log(obj)
return obj;
}
});
</script>
</body>
</html>
總結(jié)：
1.漸進(jìn)式框架Vue
2.vue中兩個(gè)核心點(diǎn)
3.虛擬DOM
4.MVVM模式
5.Vue實(shí)例
6.聲明式渲染
7.指令
8.模板
參考視頻教程
