Vue 从入门到进阶之路(一)

vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码,但是在 vue 3.x 出来之前,还是想再复习一下 vue2.x ,好记性不如烂笔头,特此记录,与君共勉!

vue 作为国人开发的框架,在很多使用习惯上使我们用起来十分顺手,又有中文官网加持,使我们在学习起来几乎没什么门槛,那接下来我们就开始一点点学习吧。

vue 官网教程 https://cn.vuejs.org/v2/guide/

vue 官网为我们提供了一整套的教学实例,包括从起步安装到后期维护,在这里我们就不再那么繁琐第进行说明,我们就以最简单的案例带大家一点点深入了解 vue 的精髓。

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vuetitle>
 6     
 7     <script src="https://cdn.jsdelivr.net/npm/vue">script>
 8 head>
 9 <body>
10 <div class="app">
11     <p>{{ message }}p>
12     <button v-on:click="handleClick">点我button>
13 div>
14 <script>
15     var app = new Vue({
16         el: '.app',
17         data: {
18             message: 'Hello world!'
19         },
20         methods: {
21             handleClick() {
22                 console.log(this.message)
23             }
24         }
25     })
26 script>
27 body>
28 html>

 

在上面的代码中我们直接在 HTML 中引入 vue.js,然后在一个 div 标签中以 {{ }} 的方式插值,在 script 的 JavaScript 代码中我们 var app = new Vue();意思是我们通过 var 的形式 new 出了一个 Vue 的实例。

在 Vue 的实例中,我们通过 el 属性来定义这个 Vue 实例要接管的 HTML 代码的哪一部分,在上面的代码中我们是让 Vue 实例接管了 id="app" 的内容,当然我们也可以写成 el:".app",那么 HTML 代码就需要写成 class="app"。

在 Vue 的实例中,我们可以通过 data 属性来定义我们的数据,在上面的代码中我们定义了一个 message 的变量名称并赋值 hello world! 如果我们想要让这个数据在页面上显示,我们就需要在 Vue 实例接管范围内,即 id="app" 的代码范围内通过插值表达式 {{ }} 将 message 绑定到我们的代码上,就可以在页面上显示了。

在 Vue 的实例中,我们可以通过 methods 属性来定义我们的方法,在上面的代码中我们在一个 button 按钮上通过 v-on:click 的形式绑定了一个 handleClick 点击事件,在 Vue 的实例中我们就可以在 methods 属性中对 handleClick 方法进行控制了,例如我们打印输出 this.message,注意在 Vue 的实例中 this 的指向就是上下文,就 Vue 实例本身,this.message 即 hello world!同时 v-on:click 可以改写成 @click,这是一种简写方式。

最终结果如下:

Vue 从入门到进阶之路(一)_第1张图片

 

你可能感兴趣的:(Vue 从入门到进阶之路(一))