开篇寄语
以示例来学一门语言是最容易学进去的,这符合所见即所得,所以学习Vuejs也并不例外,伯衡君接下来就以这几天我所学到的内容做一些简单的汇总,以一些有趣而又简单的示例来入门此框架。
内容详情
以下内容以Vue3版本为例,和2的差别不是特别大。
如果熟悉jQuery的朋友,肯定知道在使用jQuery前,会在head标签中引入,vuejs也并不例外,如果是使用vuejs cli则另当别论,不在本篇讨论范围了。
打开VS code或者其他顺手的编辑器,在页面输出"Hello World!",代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs Demo</title> </head> <body> <div id="app"> </div> <script src="https://unpkg.com/vue@next"></script> <script> var app = { template: "<h1>Hello World</h1>" }; Vue.createApp(app).mount('#app') </script> </body> </html>
使用浏览器打开刚创建的 index.html ,页面会输出一个大大的 h1 标签,内容就是我们期待的 Hello World,如下图所示:
好,这样一来你就掌握了Vuejs了,就是这么简单。
接下来是在实际应用中,表现上例相同的内容,但是书写方法不一样的方式。
- 数据绑定
示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs Demo</title> </head> <body> <div id="app"> </div> <script src="https://unpkg.com/vue@next"></script> <script> var app = { template: "<h1>{{msg}}</h1>", data() { return { msg: 'Hello World', } } }; Vue.createApp(app).mount('#app') </script> </body> </html>
可以看到,Vuejs传递数据是以"{{}}"这个符号为标志的。
- Vue组件(Vue.component)
Vue.component(id, [definition]) 方式是注册一个名称为 id 的全局组件,然后我们可以通过使用该组件来,实现目标元素渲染,示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs Demo</title> </head> <body> <div id="app"> <helloworld></helloworld> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({}); app.component('helloworld', { data() { return { msg: "Hello World" } }, template: `<h1>{{ msg }}</h1>`, }) app.mount("#app") </script> </body> </html>
- Vue.directive
自定义一个指令,并且指令的使用是通过在目标元素中添加 v-指令id属性来实现的。
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs Demo</title> </head> <body> <div id="app"> <div v-helloworld="msg"></div> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { msg: 'Hello World' } } }); app.directive("helloworld", { mounted(el, binding) { el.innerHTML = "<h1>" + binding.value + "</h1>" } }) app.mount("#app") </script> </body> </html>
- Render Faction
Vue 建议在绝大多数情况下使用模板来构建应用程序。但是,在某些情况下,我们需要 JavaScript 的全部编程能力。这就是我们可以使用渲染功能的地方,示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs Demo</title> </head> <body> <div id="app"> </div> <script src="https://unpkg.com/vue@next"></script> <script> const { createApp, h } = Vue const app = Vue.createApp({ data() { return { msg: 'Hello World' } }, render() { return h('h1', {}, this.msg) } }); app.mount("#app") </script> </body> </html>
先到这里,后续会有更多精彩文章发布,敬请期待。
- 我的微信
- 微信扫一扫加好友
- 我的微信公众号
- 扫描关注公众号