之前在网页里小范围的用了vue, 感觉用起来非常爽, 现在打算做自己的笔记应用. 这次打算做成SPA的形式, 前端全部用vue来写. 需要node的一些东西, 记录下学习过程. 迈向全栈，哈哈 ^_^
首先, 全局安装vue:
npm install --global @vue/cli
只有在创建时提供的 data 属性才是响应式的，在创建之后在添加新元素就不管用了。
当然还可以使用 app.$watch 方法显式创建一些监听器
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
methods 定义了一些可以调用的方法，他的值也可以用来插值。但是最好使用 computed，因为 computed …
HTML Document consists of different node, element is one type of node.
NodeList is a collection of node, HTMLCollection is a collection of element.
HTMLCollection 和 NodeList 都是动态的,会随着 DOM 的变化而变化
Array 是静态的数据结构
Write it in javascript,
start script starts chrome and opens the extension by opening extension's page
another scripts opens a http server locally to feed the initial command and rules
the extension then executes as instructed
see also:
https://chrome.google.com/webstore/detail/wild-spider/aanpchnfojihjddlocpgoekffmjkhbbe
https://chrome.google.com …
浏览器中的 JavaScript 运行在一个沙箱中。
fetch 默认不带 cookie, see https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
axios 自动附加请求域名对应的 cookie
可以使用 JavaScript 设置对应所在域名的 cookie，而 chrome extension 可以设置所有域名的 cookie
try {
let response = axios.get(url)
} catch (e) {
console.log(e)
}
// 可以使用的几种语法
axios.get(url)
axios.post(url …permissions: [
"tabs",
]
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {}); // tabs[0] would be the current tab
chrome.tabs.create({url: URL}, function(tab) {})
chrome.tabs.remove(tabId or [tabId], function() {})
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
let set = new Set();
let set = new Set([a, b, c]);
set.size // the size of set
set.add(a)
set.delete(a)
set.clear()
set.has(value)
set.keys() // the same as keys
set.values() // return the values as a iterator
reference:
see: https://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen
but you also need to set -webkit-user-drag: element; to the element.
The created vue instance will proxy its data member
<div id="app">
<ol>
<li v-for="company in companies">
<a v-bind:href="company.link">{{ company.text }}</a> // bind 更新参数
<button v-on:click="reverseText">逆转消息</button>
</li>
</ol>
</div>
let vm = new Vue({
el: '#app',
data: {
companies: [
{text: 'Google', link …window.getSelection and document.getSelection all returns the Selection object, the selection object is almost useless.
window.getSelection.getRangeAt(0) returns a Range object. for history reasons, there is only one range in each selection.
rangeAncestor = range.commonAncestorContainer; commonAncestorContainer is the common ancestor of the range elements.