最近开始入坑学vue了，学React的“失败”还历历在目(基础没打好的情况下直接写项目果然难顶)。ps:这个笔记主要用作个人记录与交流学习，主要参考geektime的vue开发实战专栏，前期代码居多，后期入门了就稍加完善这个笔记，没入门就烂尾🙃
Vue是一门Processive(渐进性)，Reactive(响应式)的前端框架...更多细节可以查看vue中文官网对vue的简介视频。
作为各种编程语言(框架)的第一个入门程序，那必然是helloworld，创建一个helloworld.html文件，使用你喜欢的编辑器(推荐vscode)打开，将如下的Html代码编入(重点是<body>标签，重重点是<script>便签):
<!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>Hello, vue!</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'hello vue!',
}
})
</script>
</body>
</html>
运行结果为:
右击chrome浏览器空白处选检查(快捷键(fn+)F12)，打开档期页面的console:
编码改变app.message的值并回车执行:
可以看出id为app的div中的文本是随new的Vue对象中的message值变化而立刻变化的，这个体现了Vue响应式的特点。第一个script标签src引用的url来源于vue官方教程(官网->学习->教程->下拉到安装)
再复杂一点的例子是自定义一个vue列表组件并展示列表，代码的细节暂时没能力说明白，大概使用了vue指令，逻辑还是挺清晰的:
<!DOCTYPE html>
<html lang="cn">
<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>Hello, itemList!</title>
</head>
<body>
<div id="app">
{{message}}
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li class="text">{{todo.text}}</li>'
})
var app = new Vue({
el:'#app',
data:{
message: 'hello vue!',
groceryList: [{
id: 0,
text: '蔬菜'
}, {
id: 1,
text: '奶酪'
}, {
id: 2,
text: '其它食物'
}],
}
})
</script>
</body>
</html>
运行结果:
这两个例子非常简单，使用的vue的方式类似引进Jquery通过script标签src指定js文件位置的方式。这种是不推荐的，最主要的原因感觉还是前端工程化。现代的前端不再像以前那样写写多个html页面css样式js脚本构建了。后续会谈...