基礎
Vant
Bootstrap
組件
解決 Bootstrap dropdown require Popper.js的問題
這個沙雕組件需要popper.js這個庫，4.4的文檔是這麼寫的
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
但是官方的popper已經更新到2.11了，而bootstrap需要的庫版本是1.16.0，從上面那個鏈接的url可以看出來，如果直接使用v2的popper仍然會報錯，直接將上面那個鏈接裏的js代碼拷貝下來導入也可以的
我發現js的第三方庫有個特點，例如popper的github裏有好幾個Popper.js，只有一個是需要我引入的
Bootstrap 麪包屑導航（Breadcrumb）
修改麪包屑導航欄，添加樣式.breadcrumb-item + .breadcrumb-item::before { content: "> ";}，這個是兄弟選擇器
bootstrap 4 panels已被card替換 - 由良大小姐 - 博客園
Vue
vue的文檔非常好
Vue對象屬性
computed 和watch
簡單理解，watch屬性是當觀察到data裏的對應的數據變化之後會執行的函數
vue選擇標籤，下面的兩個vue不能顛倒，否則會報錯，無法正常渲染，也好理解
<script src="../web/js/vue.js"></script>
<div id="outer">
{{outerdata}}
<div id="inner">{{innerdata}}</div>
</div>
<script>
new Vue({
el:"#inner",
data:{ innerdata:1 }
});
new Vue({
el:"#outer",
data:{ outerdata:1 }
})
</script>
事件
v-on監聽的事件裏，文檔裏說
指令
v-bind指令
Vue中的v-cloak使用解讀 解決閃一下的問題
組件
Vue.component('welcome-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button> `
})
new Vue({
el: '#emit-example-simple',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})
<div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
解釋一下上面代碼的運行機制，首先welcome-button是一個全局組件，這個組件在#emit-example-simple裏用到，v-on是用來進行事件綁定用的，這個組件在使用的時候，被額外綁定了一個叫做welcome的事件，觸發該事件會調用sayHi方法。而組件裏面有一句是v-on:click="$emit('welcome')"，意思是這個click事件觸發的時候，會進一步觸發父級組件（此時指的就是組件本身，即welcomt-button）的welcome事件，進而執行被註冊到emit-example-simple的方法sayHi
插槽slot
其實是組件的功能拓展，即可以在自定義組件內部再添加東西
作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
<script src="vue/vue-router.js"></script>
<script src="jQuery/jquery-3.4.1.js"></script>
<script>
$(function f() {
let template = $('#navigation-link').html();
Vue.component('navigation-link', {
template: template,
data: () => {
return {user: {firstName: 'wang', lastName: 'xiaohu'}}
}
});
new Vue({
el: "#d1",
})
})
</script>
</head>
<body>
<template id="navigation-link">
<div>
<span><slot name="namedSlot" v-bind:user="user">{{ user.lastName }}</slot></span>
</div>
</template>
<div id="d1">
<navigation-link>
<template v-slot:namedSlot="slotProps">{{ slotProps.user.firstName }}</template>
</navigation-link>
</div>
</body>
</html>
上面的例子就是如何使得插槽內容能夠訪問子組件中才有的數據。上面把插槽命名爲namedSlot，然後在組件中使用v-slot:namedSlot="slotProps"來指定這個插槽，slotProps就帶有着屬性數據
渲染的功能就是使用函數生成組件裏的插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue.js"></script>
<script src="vue/vue-router.js"></script>
<script src="jQuery/jquery-3.4.1.js"></script>
<script>
$(function f() {
let template = $('#navigation-link').html();
Vue.component('anchored-heading', {
template: template,
props: {
level: {
type: Number,
required: true
}
},
render: function (createElement) {
return createElement(
'h' + this.level, // 標籤名稱
this.$slots.default // 子節點數組
)
},
});
new Vue({
el: "#d1",
})
})
</script>
</head>
<body>
<template id="navigation-link">
<div>
<slot></slot>
</div>
</template>
<div id="d1">
<anchored-heading :level="3">Hello world!</anchored-heading>
</div>
</body>
</html>
裏面level: {type: Number,required: true}，意思是指明這個屬性的類型以及是否必須輸入，在組件上使用level參數的時候一定要使用v-bind:level="3"，此時纔會認爲這個參數是個數字3，否則會看成普通的字符串3
Vue-cli
組件基礎
初識 Vue.js 中的 *.Vue文件
單文件組件，其中script 部分裏的東西實際上就是註冊組件時（Vue.component）候會使用的的參數
JSP
jsp是什麼，作爲一個準淘汰的工具，至少要知道他是幹什麼。用Tomcat寫過後臺處理程序吧，就是處理get和post請求的。注意，在處理的時候，是可以通過response直接控制輸出的頁面的，例如
public class SubmitServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter writer = resp.getWriter();
writer.println("print");
writer.write("write");
}
}
<servlet>
<servlet-name>SubmitServlet</servlet-name>
<servlet-class>SubmitServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SubmitServlet</servlet-name>
<url-pattern>/submitServlet</url-pattern>
</servlet-mapping>
那麼訪問http://localhost:8080/submitServlet的時候就會出現
而JSP受此啓發，每個JSP最後都會被轉化成一個java類，這個類繼承了HttpServlet的一個子類，在其內部有一個類似於service的函數，這個函數會按照jsp裏的java代碼邏輯進行執行處理request，返回response。jsp代碼裏還有html標籤之類的東西，這些東西都會按照jsp裏的組織形式（一些規則，比如誰先誰後啊之類的）一股腦的塞進out.print()方法裏，最後response裏存着的就是一張完整的HTML，所以JSP叫做java server page，整個頁面都是在服務端構建起來的。