vue源码(一)-搭建简单的vue项目

ゝ一世哀愁。 2023-05-30 10:59 7阅读 0赞

## vue源码(一)-搭建简单的vue项目 ##

#### 一、下载vue ####

到官网直接下载开发版本vue：[https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html]  
![截屏2019-11-1010.33.50][2019-11-1010.33.50]

下载完成后，会有一个vue.js文件

#### 二、嵌入到网页 ####

创建html文件，将下载好的vue.js文件嵌入到html中

#### 三、编写代码 ####

现在就可以使用vue进行页面开发了，我们将我们需要编写的代码放入到`script`标签中，进行编写页面逻辑，下面页面中进行展示一个在vue数据中的message字段，显示到界面的逻辑。

<!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>html-vue</title>
        <script src="./vue.js" ></script>
    </head>
    <body>
        <div id="app">
            <p>{
       { message }}</p>
        </div>
        
    </body>
    <script> var msg= 'hello vue学习'; var app = new Vue({ el: '#app', data: { message: msg } }) </script>
    </html>

上面代码中，message通过vue特有语法“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。将定义的msg的值，显示到了html页面p标签中。  
效果如下所示：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70][]

[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html
[2019-11-1010.33.50]: https://img-blog.csdnimg.cn/20191110120847143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191110120950497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70