Vue.js入门学习（一）
初学，也不知道怎么写，索性就按照官网的API走一遍吧，给自己的Vue学习之路开个头，毕竟后端写久了，总是惦记着前端，前端一搜一大堆，挑选一个来学吧，才发现，我去，这个还是当下最流行的框架，好吧，那就它了！Vue官方中文Api文档：点击打开链接由于初学，我也搜了关于Vue.js环境搭建的文章，发现，按照文章所说的走下来，最后出来的项目根本不是我这个初学者所能接受的，什么web
初学，也不知道怎么写，索性就按照官网的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，很对象，实现起来也是一点都不绕圈子。
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献12条内容
所有评论(0)