Vue-cli的安裝
- 安裝2.x
npm i -D vue-cli - 安裝3.x
npm i -D @vue/cli
利用cli創(chuàng)建項(xiàng)目：
- 2.x
vue init webpack appName - 3.x
vue create appName - 3.x 中一種方式：
vue ui它將自動(dòng)啟動(dòng)瀏覽器8000端口，可以使用圖形化的方式進(jìn)行項(xiàng)目的創(chuàng)建和管理。
事件處理中的this
greet: function (event) {
// `this` 在方法里指向當(dāng)前 Vue 實(shí)例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
渲染錯(cuò)位的問題
在Vue中對(duì)<li>、<tr> 和 <option>有著較嚴(yán)格的約束，其只能出現(xiàn)在指定的父元素中，如：
<table>
<book></book>
</table>
會(huì)導(dǎo)致渲染出錯(cuò)，此時(shí)可以采用如下方式(關(guān)鍵是is="book")
<table>
<tr v-for="book of books" is="book" :book="book"></tr>
</table>
但注意：當(dāng)子組件是來自于.vue文件的，是不存在上述問題的。
Vue的動(dòng)畫，css設(shè)定技巧：
- 設(shè)置：“進(jìn)入后”的動(dòng)畫和“”離開時(shí)“的動(dòng)畫(以fade為例)
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
說明：進(jìn)入和離開的動(dòng)畫效果為：透明度的變化在0.5秒完成
- 設(shè)置：”進(jìn)入前“的狀態(tài)和”離開后“的狀態(tài)（注：該類在進(jìn)入和離開后，將被刪除）
fade-enter, .fade-leave-to {
opacity: 0;
}
說明：進(jìn)入動(dòng)畫開始前和離開動(dòng)畫結(jié)束后，透明度為0。（隱含：離開動(dòng)畫開始前和進(jìn)入動(dòng)畫結(jié)束后，透明度保持元素現(xiàn)有狀態(tài)）
template的另一種優(yōu)雅的使用方式：
<script type="text/x-template" id="temp1">
<div>
<!-- content -->
</div>
</script>
<script>
Vue.component("demo1",{
template:'#temp1'
});
</script>
渲染函數(shù)
可以使用render渲染函數(shù)取代template的定義，它更接近于編譯器底層，同時(shí)這將使得模板代碼的定義極具靈活性：
render: function (createElement) {
return createElement(
'h' + this.level, // 標(biāo)簽名稱
this.$slots.default // 子元素?cái)?shù)組
)
},
上面代碼，傳入一個(gè)createElement函數(shù)，它的返回結(jié)果是一個(gè)VNode。
createElement函數(shù)的使用：
其返回一個(gè)VNode元素，使用方式如下所示：
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一個(gè) HTML 標(biāo)簽字符串，組件選項(xiàng)對(duì)象，或者
// 解析上述任何一種的一個(gè) async 異步函數(shù)。必需參數(shù)。
'div',
// {Object}
// 一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對(duì)象
// 你可以在 template 中使用這些特性。可選參數(shù)。
{
// (詳情見下一節(jié))
},
// {String | Array}
// 子虛擬節(jié)點(diǎn) (VNodes)，由 `createElement()` 構(gòu)建而成，
// 也可以使用字符串來生成“文本虛擬節(jié)點(diǎn)”?？蛇x參數(shù)。
[
'先寫一些文字',
createElement('h1', '一則頭條'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
$slot的使用
在“組件標(biāo)簽”的使用,會(huì)以上兩種形傳入slot
<my-comp>
<p slot="a">slot a</p>
this is default slot
</my-comp>
此時(shí)可以在template中可以使用如下方式獲?。?/p>
template:'<div>this is default :<slot></slot></div>'
在render中，可以：
render:function(createElement){
let default=this.$slots.default;
let a=this.$slots.a;
}
axios的基本使用：
const axios =require('axios');
axios({
method: 'post',
url: 'http://localhost:3000/users',
data: {uname:'ba'},
headers:{"Action":"do"}
}).then(function (resp) {
console.log(JSON.stringify(resp.data));
}).catch(function (err) {
console.log(err);
});
- 它可以在瀏覽器和node環(huán)境中使用
- 它會(huì)智能的根據(jù)data的特點(diǎn)，設(shè)置Content-Type和Accept頭
簡(jiǎn)單演示Vue-Router的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/">go home</router-link>
<router-link to="/about">go about</router-link>
<hr>
<router-view></router-view>
</div>
<script>
let home={template:'<h1>home</h1>'}
let about={template:'<h1>about</h1>'}
let router=new VueRouter({routes:
[{path:'/',name:'home',component:home},
{path:'/about',name:'about',component:about}
]})
new Vue({router:router,el:'#app'})
</script>
</body>
</html>
