Vue.js 基础学习

Posted 2020-10-05 胡卓

今天我开始了Vue.js 的学习。

那么什么是Vue.js 呢？

Vue.js是一套开发Web页面的javascript脚本框架。听起来感觉很难，不过据说，Vue.js是Web-Javascript脚本框架中最容易上手的框架。所以我便选择了先来学习这个。

要学习Vue.js首先就要获取库文件了，在网上有很多地方可以找到，我是在bootcdn上找到的

接下来我们通过Vue输出一串Hello World !

首先引入vue.

    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>

然后在body中创建一个div 并设置id

<div id="myApp">
        {{ message }}
    </div>

在文档中一旦出现{{ }}这种两对花括号时，vue就开始解析了，会把它当成类似js的语句来解释

接下来是js代码

<script>
    var myApp = new Vue({
        el : ‘#myApp‘ ,
        data : {
            message : "hello world!"
        }
    })
</script>

解释一下，上面js代码的含义 

new 一个Vue 其中el 是element的意思，用来绑定对象，即生成的Vue对象会产生一个域，这个域作用在那个元素上的 ，此处就是作用在id为myApp的元素上的

data 底下所有的属性都是绑定在这个myApp下的。

vue中的内容是直接和内存中的绑定的，如果你在网页的审查元素中书写 myApp.message = "Hello Vue" 那么此时页面内容也会变成Hello Vue

这样我们就实现了Hello world 了。