<div v-html="str"></div>data: function () {
return {
str = "<p>some text</p>"
}
}
VueJs 2 부터 작동한다.
| Javascript) str to int / int to str (0) | 2020.06.23 |
|---|---|
| JavaScript) 속성(attribute)값으로 태그(elements) 찾기 (0) | 2020.06.23 |
| JS 팝업 레이어 만들기 / popup layer (0) | 2020.06.02 |
| Vuejs router.push Get/Post 화면 이동시 데이터 보내기 (0) | 2020.05.28 |
| 자바 스크립트의 세 번째 시대 (1) | 2020.05.28 |
일단 팝업 검색창을 띄울 레이어를 생성합니다.
간단하게 div 태그로 구역을 지정하고, style 을 설정하였습니다.
<div id="SearchLayer" style="position:absolute;z-index:999;display:none; width:100%; height:90%;
background: none rgba(0, 0, 0, 0.9);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#80000000', endColorstr='#80000000');
" align='center'>
<table valign="middle" height=100%><tr><td >
<input type='text'><input type='submit'><br>
...
<br><br>
<font size='3' color='white' onclick='CloseSearch()'>Close</font>
</td></tr></table>
</div>블로그에 적용하기 전에 테스트 코드로 짜서 테스트하느라, 실제 적용된거랑은 약간 차이가 있겠지요.
여기서 처음 접속시에는 보이지 않게하기 위해서 display:none; 을 지정하였습니다.
그다음 매번 클릭 시 나타났다, 없어졌다를 반복하기 위해서 해당 div를 제어하는 js를 작성합니다.
<script type="text/javascript">
function ViewSearch(){
document.getElementById("SearchLayer").style.display='inline'
}
function CloseSearch(){
document.getElementById("SearchLayer").style.display='none'
}
</script>getElementById로 div 의 id를 찾은 후 style로 노출 유무를 지정해주시면 됩니다.
마지막으로 방금 만든 ViewSearch() 함수와 CloseSearch() 함수를 실행하는 부분을 작성해주시면 됩니다.
테스트할때는 그냥 a 태그로 했었고, 실제 적용에는 메뉴바에서 해당 함수를 호출하도록 해놨습니다.
<a href="javascript:ViewSearch();">HAHWUL_TEST</a>실제 이런식으로 적용이 되었지요.
테스트 진행하며 만들었던 html 전체 코드입니다.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function ViewSearch(){
document.getElementById("SearchLayer").style.display='inline'
}
function CloseSearch(){
document.getElementById("SearchLayer").style.display='none'
}
</script>
<div id="SearchLayer" style="position:absolute;z-index:999;display:none; width:100%; height:90%;
background: none rgba(0, 0, 0, 0.9);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#80000000', endColorstr='#80000000');
" align='center'>
<table valign="middle" height=100%><tr><td >
<input type='text'><input type='submit'><br>
...
<br><br>
<font size='3' color='white' onclick='CloseSearch()'>Close</font>
</td></tr></table>
</div>
<a href="javascript:ViewSearch();">HAHWUL_TEST</a>
</body>
</html>출처 : https://www.hahwul.com/2015/12/coding-htmljavascript-code-for-popup.html
| JavaScript) 속성(attribute)값으로 태그(elements) 찾기 (0) | 2020.06.23 |
|---|---|
| (VueJs) string text to Html Convert / 일반 텍스트를 HTML 태그로 변환하기 (0) | 2020.06.05 |
| Vuejs router.push Get/Post 화면 이동시 데이터 보내기 (0) | 2020.05.28 |
| 자바 스크립트의 세 번째 시대 (1) | 2020.05.28 |
| [Web][VueJS] v-for과 key, 그리고 성능사이의 관계 (0) | 2020.05.27 |
Vuejs 로 작업중일때 router를 통해 화면을 다른 vue로 바꾸면서 Get/Post로 데이터를 보내고 싶을때가 있다.
이럴때 사용하면된다.
Send.vue ===> Receive.vue 로 이동하는 경우를 가정하자.
router.js
import Vue from "vue";
import VueRouter from "vue-router";
//vue router
Vue.use(VueRouter);
const routes = [
{ path: "/Send", component: require("./pages/Send.vue").default },
{ path: "/Receive", component: require("./pages/Receive.vue").default, name:"ReceiveTest" }
];
const router = new VueRouter({
mode: "history", //removes # (hashtag) from url
base: "/",
fallback: true, //router should fallback to hash (#) mode when the browser does not support history.pushState
routes, // short for `routes: routes`
});
export default router;Post를 사용하기 위해서는 꼭 router에 name 값을 지정해줘야한다. 이유는 하단에.
Send.vue 의 script단
=> 데이터를 보내는 vue
//router.vue의 경로로 설정해주세요.
import router from "../../router";
export default {
//methods 부분만 기입하겠습니다. 필요한 곳에 click이든 event로든 사용하시면됩니다.
methods: {
GetTest(item) {
//라우터에서 지정한 path 값
router.push({ path: "/Receive", query: { id: "Get 확인" } });
},
PostTest(item) {
//라우터에서 지정해준 name 값
router.push({ name: "ReceiveTest", params: { id: "Post 확인" } });
}
}
}
Receive.vue 의 script단
==> 데이터를 받는 vue
export default {
name: "Receive",
data() {
return {
//Get으로 받았을 경우
id: this.$route.query.id,
//Post로 받았을 경우
id: this.$route.params.id,
};
},
created() {
//Get으로 받았을 경우
console.log(this.$route.query.id);
//Post로 받았을 경우
console.log(this.$route.params.id);
},
};
created 에서 받아 axios등으로 데이터를 불러와 세팅을해도되고
data 에 담아 필요한곳에 사용하면된다.
| (VueJs) string text to Html Convert / 일반 텍스트를 HTML 태그로 변환하기 (0) | 2020.06.05 |
|---|---|
| JS 팝업 레이어 만들기 / popup layer (0) | 2020.06.02 |
| 자바 스크립트의 세 번째 시대 (1) | 2020.05.28 |
| [Web][VueJS] v-for과 key, 그리고 성능사이의 관계 (0) | 2020.05.27 |
| Vue.js 라이프사이클/생명주기 이해하기 (0) | 2020.05.26 |
10 년마다 JavaScript에서 보호 기능이 변경됩니다. 나는 우리가 자바 스크립트 의 제 3의 시대 로 간주 될 수있는 가속화 된 변화의 기간을 막 시작했다고 생각한다 .
1997 년부터 2007 년까지 JS의 첫 번째 나이 는 강타로 시작하여 m 소리로 끝났습니다. 여러분은 모두 Brendan Eich의 이야기를 알고있을 것입니다. Flash / Actionscript와 같은 폐쇄 된 생태계와의 강력한 경쟁 속에서 ES4 노력이 어떻게 왜곡되었는지는 잘 알려져 있지 않습니다. JS의 주요 이야기는 주요 저자 인 Brendan Eich와 Allen Wirfs-Brock의 JavaScript : The First 20 Years에서 더 잘 알 수 있습니다.
2009 년부터 2019 년까지 JS의 두 번째 나이는 2009 년 의 annus mirabilis 에서 시작하여 npm, Node.js 및 ES5가 탄생했습니다. Doug Crockford가 우리에게 좋은 부분을 보여 주면서 사용자는 JS 빌드 도구 및 라이브러리를 구축 하고 데스크톱 및 새로운 스마트 폰으로 JS의 범위를 확장했습니다. 2019 년에는 Facebook의 Hermes 와 같은 전화기 와 Svelte 3 과 같은 컴파일러의 첫 번째 프론트 엔드 프레임 워크 에서 JS를위한 특수 런타임이 등장했습니다 .
2020 년은 새로운 시대의 시작과 같은 느낌입니다. 1 세가 언어를 개발하는 것과 2 세가 사용자가 언어를 탐색하고 확장하는 것에 관한 것이라면, 3 세는 레거시 가정을 지우고 툴링 계층을 붕괴시키는 것입니다.
참고 : 전에 축소 레이어 논문을 발표했습니다!
해결되는 주요 레거시 가정은 일련의 타협으로 발전한 CommonJS에 대한 JS 에코 시스템의 의존성입니다. 그 대체품 인 ES Modules는 한동안 기다려 왔지만 기존 툴링은 느리지 만 "충분히"뛰어 나기 때문에 진정으로 도약 할 모멘텀이 부족했습니다. 프론트 엔드에는 최신 브라우저가이를 소량 처리 할 수있는 기능을 갖추고 있지만 중요한 세부 사항은 아직 해결되지 않았습니다 . 새앙 토끼 / 스노우 팩의 프로젝트는 ES 모듈 밖으로 흥분으로 사라질 수있는 외관을 제공함으로써 미래를 가속화하기 위해 배치됩니다. 최종 보너스로서, IE11은 올해부터 시작하여 2029 년 에 끝날 때까지 느린 행진을 시작할 것 입니다.
또 다른 가정은 JavaScript 도구가 JavaScript로 작성되어야한다는 것입니다. 핫 패스에서 타입 안전 및 10x-100x 성능 속도 의 가능성은 무시하기에는 너무 큽니다. "JS의 JS를위한"이상은 TypeScript가 JavaScript를 거의 완전히 인수함으로써 없어졌고 이제 Deno와 Relay는 사람들이 Rust를 배우고 핵심 JS 도구에 기여할 수 있음을 입증하고 있습니다. Brandon Dail 은이 변환이 2023 년까지 완료 될 것으로 예상 합니다. 접근성이 성능을 능가하는 대부분의 주변 툴링에 대해 JavaScript 및 TypeScript를 계속 작성합니다. " 기능적 코어, 명령형 쉘 " 에 대해 생각하던 곳에서 이제 " 시스템 코어, 스크립팅 쉘 "로 이동하고 있습니다.
참고- 이것은 논쟁의 여지 가 있으며 Python의 PyPy는 이것이 확실한 결론이 아니라는 것을 나타냅니다 .
레이어는 흥미로운 방식으로 무너지고 있습니다. Deno는 완전히 새로운 런타임을 작성하는 급진적 인 접근 방식을 취하여 테스트, 서식 지정, 보푸라기 및 하나의 바이너리로 묶기, TypeScript 말하기 및 표준 lib 포함과 같은 작업을 수행하는 일반적인 도구 모음을 접습니다 . 로마는 다른 압정을 취해 Node.js 위에있는 모든 레이어를 무너 뜨립니다 (내가 아는 한 너무 가까이 있지는 않습니다).
10 년 전에 존재하지 않았고 지금은 삶의 사실은 퍼블릭 클라우드 (AWS, Azure, GCP 등)입니다. 자바 스크립트는 클라우드와 흥미로운 관계를 맺고 있습니다. 클라우드 플랫폼 개발자는 10 피트 폴로 JS를 건드리지 않지만 JS는 가장 큰 소비자입니다. AWS Lambda가 먼저 JS와 함께 시작되었습니다. 또한 IDE와 클라우드 사이에서 계층을 축소하고 그 사이에서 성가신 랩톱을 제거하는 명확한 이동이 있습니다. Glitch, Repl.it, Codesandbox, GitHub Codespaces , Stackblitz 등은 JS를 활용하여이 공간을 탐색하는 모든 Cloud Distros 입니다.
프론트 엔드 프레임 워크에서도 진행중인 활동은 흥미 롭습니다. Svelte 는 애니메이션에서 상태 관리에 이르는 모든 것을 컴파일러로 축소했습니다 . React는 메타 프레임 워크 와 클라이언트-서버 통합을 탐색 하고 있습니다. 그리고 Vue는 Vite라는 "unbundler"dev 서버 프로젝트를 진행하고 있습니다.
요약 : Third Age JS 도구는
이 모든 작업의 결과는 더 나은 개발자 경험 (빠른 빌드, 업계 표준 툴링) 및 사용자 경험 (더 작은 번들, 더 빠른 기능 전달)입니다. 사이트 스크립팅 토이 언어에서 전체 애플리케이션 플랫폼에 이르기까지 JavaScript의 최종 변형입니다.
경우 게리 베르나르의 예측이 성립 , 세 번째 시대는 자바 스크립트의 마지막 (자신의 타임 라인 2035까지 JS를 제공) 할 수있다. 브랜든 아이 히 (Brendan Eich)조차도 "JS와 WASM에 항상 배팅하라"는 그의 유명한 말을 피봇했다. 그는 원래 JS가 "범용 가상 머신" 이라고 생각 했지만 WASM이 이제 그 아이디어의 궁극적 인 성취 라고 한 번 말했습니다 .
| JS 팝업 레이어 만들기 / popup layer (0) | 2020.06.02 |
|---|---|
| Vuejs router.push Get/Post 화면 이동시 데이터 보내기 (0) | 2020.05.28 |
| [Web][VueJS] v-for과 key, 그리고 성능사이의 관계 (0) | 2020.05.27 |
| Vue.js 라이프사이클/생명주기 이해하기 (0) | 2020.05.26 |
| vuejs를 asp.net framework 에서 사용하기 (0) | 2020.05.25 |