Vue.js入门学习（一）

最新推荐文章于 2024-05-29 12:00:00 发布

appleyk

最新推荐文章于 2024-05-29 12:00:00 发布

阅读量1.1w

点赞数 4

分类专栏： Vue2.X前端学习笔记文章标签： Vue2.x入门学习 Vue.js简单入门案列学习 Vue.js前端框架 Vue学习路线 Vue.js

本文链接：https://blog.csdn.net/Appleyk/article/details/79001685

版权

Vue2.X前端学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

初学，也不知道怎么写，索性就按照官网的API走一遍吧，给自己的Vue学习之路开个头，毕竟后端写久了，总是惦记着前端，前端一搜一大堆，挑选一个来学吧，才发现，我去，这个还是当下最流行的框架，好吧，那就它了！

Vue官方中文Api文档：点击打开链接

由于初学，我也搜了关于Vue.js环境搭建的文章，发现，按照文章所说的走下来，最后出来的项目根本不是我这个初学者所能接受的，什么webpack、cnpm install、什么vue-cli脚手架、router..etc,我去，我面对眼前的项目树，直接懵逼

没关系，现在不会，不代表以后不会，初学者的心态一定要好，沉住气，才能在学习的道路上越走越远。

看了Vue.js的学习推荐路线，才恍然大悟过来：

“

对于没有接触过es6和webpack的童鞋来说，不建议直接用官方的脚手架vue-cli构件项目。
先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令和语法。

”

上来就走了弯路，我不甘心啊，好在，热情仍在，哈哈

利用VSCode打开一个文件夹Vue，并在文件夹下面创建一个html文件如下：

基本的html我还是会写的，秀一波常规操作如下：

目前我们只是引入了vue.js，并没有使用，浏览器打开页面如下：

声明式渲染

Vue.js 的核心是，可以采用简洁的模板语法来声明式的将数据渲染为 DOM：

我们在div中引入数据，{{message}}，数据绑定的模板我们放在<script>中写，如下：

我们在浏览器看一下效果

new，我们熟悉吧，上面我们创建了一个Vue的对象 -- data，这个data将数据message渲染在id=“app”的DOM上，也就是html标签对象div上，我们反过来思考一下，既然div中的message是由data提供的，那么，data.message的值发生变化了，div中显示的内容是不是也要一起变化呢，答案是肯定的。这里引用一下官方的发言：

“我们已经生成了第一个 Vue 应用程序！这看起来和渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被关联在一起，所有的数据和 DOM 都是响应式的。”

为了证明这个，我们在浏览器当前页面，按下F12，调出“开发者工具”，进入Console【JavaScript控制台】，输入如下内容：

如何响应消息进行同步呢，很简单，按下回车键：

趁热打铁，我们学习Vue的另一个DOM元素数据的绑定方式 -- v-bind

本篇的demo：

<html>

<head>
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <div id="app2">
        <span v-bind:title="message">
            鼠标悬停此处几秒， 可以看到此处动态绑定的 title！
        </span>
    </div>
</body>
<script>
    var data = new Vue({
        el: '#app',
        data: {
            message: 'Hello,My First Vue !'
        }
    })

    var app2 = new Vue({
        el: '#app2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })     
</script>

</html>

本篇关于Vue的入门到这就结束了，语法真的很JOSN，很对象，实现起来也是一点都不绕圈子。

appleyk

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Vue.js入门学习（一）

初学，也不知道怎么写，索性就按照官网的API走一遍吧，给自己的Vue学习之路开个头，毕竟后端写久了，总是惦记着前端，前端一搜一大堆，挑选一个来学吧，才发现，我去，这个还是当下最流行的框架，好吧，那就它了！Vue官方中文Api文档：点击打开链接由于初学，我也搜了关于Vue.js环境搭建的文章，发现，按照文章所说的走下来，最后出来的项目根本不是我这个初学者所能接受的，什么web
复制链接

扫一扫