开篇寄语
以示例来学一门语言是最容易学进去的，这符合所见即所得，所以学习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>
先到这里，后续会有更多精彩文章发布，敬请期待。
- 我的微信
- 微信扫一扫加好友
-
- 我的微信公众号
- 扫描关注公众号
-
