（一）
前端框架的特點：
1.組件化
2.社區強大
3.第三方庫多
4.瀏覽器插件debugging
5.單頁面友好
爲什麼使用框架？
爲了保持UI和狀態同步，原生JS保持同步要寫很多代碼
原生實現的問題：
用js代碼創建UI可讀性差
三大框架對比：
Angular:
雙向數據綁定：如多級菜單；
依賴注入，使組件之間的耦合度降低，提高代碼的可讀性；
typeScript是JS的超級；
angular1.0主要面對的是PC端，angular2.0以後才兼容PC端和移動端；
優點：MVVM模式、雙向數據綁定、依賴注入
缺點：語法複雜，angular5使用TypeScript，沒有向後兼容
React:
如果我們去操作dom的話，性能很低，要重排和重繪；
虛擬dom:用JS去指代dom節點，那麼我們的性能就可以大大增加；
JSX語法：我們可以用JS去寫HTML和CSS的語法；
我們寫習慣了，JSX語法書寫出來的代碼是很漂亮的；
優點：虛擬DOM,輕量，JSX語法
缺點：官方文檔沒有體系化，JSX語法
Vue:
優點：使用HTML模板，中文文檔，體量小
（二）Vue第一個簡單應用：
學習Vue,首先要看它的官網；
打開起步--安裝--兩種方法(script引入和npm包管理工具)--我們用script引入也有兩種方法--我們使用CDN方法；
data:存放變量
1.
<template>
<div id="HelloWorld">
<input type="text" v-on:input="changeName">
<h1>{{xingming}}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
xingming:"zengcy"
}
},
methods:{
changeName:function(event){
this.xingming=event.target.value;
}
}
}
</script>
<style scoped>
</style>
2. 雙大括號，既可以放變量，也可以放函數
<template>
<div id="two">
<p>{{xingming+"123"}}</p>
<p>{{sayName()}}</p>
</div>
</template>
<script>
export default {
name:'two',
data(){
return{
xingming:"zengcy"
}
},
methods:{
sayName:function(){
return "cy"
}
}
}
</script>
<style scoped>
</style>
3.
裏面也可以是字符串的表達式；
也可以寫三目運算符表達式，但是並不可以用if和else這種複雜的表達式；
錯誤案例：因爲vue不會分析字符串裏面的語法；
在雙括號中直接寫鏈接是沒有用的，一定要綁定，不然沒辦法訪問；
我們要藉助指令：v-bind需要綁定href這個屬性；
<template>
<div id="two">
<p>{{xingming+"123"}}</p>
<p>{{sayName()}} <a :href="link">百度</a></p>
</div>
</template>
<script>
export default {
name:'two',
data(){
return{
xingming:"zengcy",
link:"https://www.baidu.com"
}
},
methods:{
sayName:function(){
return "cy"
}
}
}
</script>
<style scoped>
</style>
4.
v-once指令的使用：
我們h1只是第一次初始化的值，而不會隨着name的改變而改變；
v-once後面沒有參數，所以不用寫；
<template>
<div id="two">
<h1 v-once>{{xingming }}</h1>
<p>{{sayName()}} <a :href="link">百度</a></p>
</div>
</template>
<script>
export default {
name:'two',
data(){
return{
xingming:'zengcy',
link:"https://www.baidu.com"
}
},
methods:{
sayName:function(){
this.xingming="cy"
return this.xingming
}
}
}
</script>
<style scoped>
</style>
5.v-html的使用：
vue會把字符串當作數據輸出，而不會當作dom節點分析出來；
這個行爲可以避免很多的快腳本攻擊；
把一個數據當作dom節點去分析，而不是字符串；
v-html會導致安全性問題，不到萬不得已，不去使用；
<template>
<div id="two">
<h1 v-once>{{xingming }}</h1>
<p>{{sayName()}} <a :href="link">百度</a></p>
<p v-html='html'></p>
</div>
</template>
<script>
export default {
name:'two',
data(){
return{
xingming:'zengcy',
link:"https://www.baidu.com",
html:"<a href='https://www.baidu.com'>baidu</a>"
}
},
methods:{
sayName:function(){
this.xingming="cy"
return this.xingming
}
}
}
</script>
<style scoped>
</style>