前端学习(2056):初识vue.js
生活随笔
收集整理的這篇文章主要介紹了
前端学习(2056):初识vue.js
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
MVVM模式
jquery.js
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>demo704</title> </head><body><div id="app"><button>Click me</button></div><script src="./js/jquery.min.js">var btn = document.getElementsByTagName('button');console.log(btn);var showBtn = true;if (showBtn) {var btn = $('<button>Click me</button>');btn.on('click', function() {console.log('clicked');});$('#app').append(btn);}</script> </body></html>vue.js
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>demo704</title> </head><body><div id="app"><button v-if="showBtn" v-on:click="handleClick">click me</button><p>{{name}}</p></div><script src="./js/vue.js">var app = new Vue({el: '#app',data: {showBtn: true,name: 'geyao'},methods: {handleClick: function() {console.log('clicked')}}})</script> </body></html>?
總結
以上是生活随笔為你收集整理的前端学习(2056):初识vue.js的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: “约见”面试官系列之常见面试题之第九十九
- 下一篇: 前端学习(2048)vue之电商管理系统