Vue第一天（显示数据）

最新推荐文章于 2023-08-31 18:26:19 发布

若叶-知秋

最新推荐文章于 2023-08-31 18:26:19 发布

阅读量484

点赞数

文章标签：自学 Vue 菜鸟

本文链接：https://blog.csdn.net/qq_31051117/article/details/83993529

版权

实习生

没人管没人带

只能自己找事干

所以开始自学一下Vue，

因为前后端分离时曾经用过Springboot+Vue

作为一个java学习者，对Vue了解不深，正好趁着没人管我的时候，学习一波。

此天数按照我所分解模块分布，一天为一模块

今天开始更新

第一步：下载WebStorm并破解

破解可借鉴：https://blog.csdn.net/voke_/article/details/76418116

第二步：下载Node.js并破解

借鉴：http://note.youdao.com/noteshare?id=3b4f49ad9b172dd0d1e0155586dd041e&sub=101C35F537154F4EBB22304AAD013794

第三步：初始化项目并下载

命令：

初始化项目
npm init

下载Vue
npm install vue --save--dev
npm install vue-resource --save-dev

淘宝镜像下载这些暂时没有弄，可以自行查询配置

代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/jquery"></script>
</head>
<body>

<!--先安装：npm install bootstrap --save-dev-->


<div id="app" class="container-fluid">
    <p>{{message}}</p>
</div>
<hr>---------------------------------------------------
<hr class="container">显示2
<div id="vue_det" class="container-fluid">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<hr>---------------------------------------------------
<hr class="container">显示3
<div id="vue3" class="container-fluid">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
</div>

</body>
</html>

<script>
    <!--显示1-->
 /*   var vm = new Vue({
        el: "#app",
        data: {
            message:'hello'
        }
    })*/

/*显示2*/
/* var vm=new Vue({
     el:"#vue_det",
     data:{
         site:"测试显示",
         url:"www.baidu.com",
     },methods:{
         details:function () {
             return this.site+"第二种显示方法";
         }
     }
 })*/

/*显示3*/
    //数据对象
    var data={site:"测试3",url:"www.ceshi.com"}
    //显示
    var vm=new Vue({
        el:"#vue3",
        data:data
    })
    //判断数据
    document.write(data==vm.$data)
    document.write("<br>")
    document.write(vm.$el===document.getElementById('vue3'))
</script>

第一天模块结束

若叶-知秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第一天（显示数据）

实习生没人管没人带只能自己找事干所以开始自学一下Vue，因为前后端分离时曾经用过Springboot+Vue作为一个java学习者，对Vue了解不深，正好趁着没人管我的时候，学习一波。此天数按照我所分解模块分布，一天为一模块今天开始更新第一步：下载WebStorm并破解破解可借鉴：https://blog.csdn.net/voke_/article/detai...
复制链接

扫一扫