前言
这篇文章记录笔者在重新系统学习Vue时的心路历程
之前接触过，也上手做过了一些Vue相关的项目，但是没有系统地耐下心去学习Vue
这里对重新系统学习Vue过程中书写的Demo和背后的思考做一个记录
一、Hello World
考虑到重点从Demo中进行解读和思考，这里Vue环境搭建等过程就进行略去了，直接进行代码的解读和剖析
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Vue Hello World练习</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>Hello World,这里是{{name}}</h1>
</div>
<script>
Vue.config.productionTip = true; //设置全局配置
//创建Vue实例，只传一个参数，配置对象
new Vue({
el: '#root', //根据Id选择器，让实例和容器之间建立关系，值通常为css选择器字符串
data: { //data用于存储数据，数据供El容器去使用，值我们暂时先写成一个对象
name: 'HangZhou'
}
});
</script>
</body>
</html>
2.书写步骤
创建容器
Vue框架初步的认知应该是创建一个容器，而后往里面注入数据
所以我们在书写时，需要先创建容器
<div id="root">
<h1>Hello World,这里是{{name}}</h1>
</div>
这里的容器里面的代码要符合html规范，不过混入了一些特殊的Vue语法，例如上面的大括号
注入数据
这里注入苏剧，我们通过Vue创建实例，再通过Vue往容器里面注入数据
Vue是一个实例，里面包含了我们需要注入的数据，Vue中注入的数据，是要通过一个配置对象进行实现，也就Vue后面紧跟的括号中的内容
//创建Vue实例，只传一个参数，配置对象
new Vue({
el: '#root', //根据Id选择器，让实例和容器之间建立关系，值通常为css选择器字符串
data: { //data用于存储数据，数据供El容器去使用，值我们暂时先写成一个对象
name: 'HangZhou'
}
});
3.最终呈现效果
总结
笔者认为编码大致要经历几个阶段
1.关注语法
2.关注语法背后的设计功能
3.关注设计功能背后的设计思想
希望自己的编码能够更上一层楼吧
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
