紧跟潮流
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。
这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分
<div id="id">
<h1>你好,{{name}}</h1>
</div>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
new Vue({
el:'#id',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择字符串
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'hello'
}
})
</script>
1.2 指令语法
Vue中有很多指令，且形式都是：v-????, 此处以v-bind举例，承接上文做一些修改。
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）
举例：v-bind:href="x"或简写为 :href="x", x同样要写js表达式且可以直接读取到data中的所有属性
<div id="id">
<h1>你好,{{name}}</h1>
<h2>指令语法</h2>
<a v-bind:href="school.url" v-bind:x="hello">点我{{school.hello}}</a>
<a :href="school.url" v-bind:x="hello">点我{{school.hello}}</a>
</div>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
new Vue({
el:'#id',
data:{
name:'hello',
school:{
url:'https://www.baidu.com',
hello:'你好'
}
}
})
</script>
如代码所示，a标签下的url要引用vue中的数据，需要在href前面加上 v-bind 或 :
2.data和el的2种写法
==============
2.1 el的两种写法
2.1.1 new Vue时候配置el属性
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:''
}
})
2.1.2 先创建Vue实例，随后再通过v.$mount('#root')指定el的值。
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
const v = new Vue({
data:{
name:''
}
})
v.mount('#root')
2.2 data的两种写法
2.2.1 对象式
new Vue({
el:'#id',
data:{
name:''
}
})
2.2.2 函数式
new Vue({
el:'#id',
data:function(){
return{
name:''
}
}
})
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。子组件中的data必须写成函数式，因为data如果是对象的话，会影响其它组件的数据。
一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
3.Vue的数据绑定方式
============
3.1 单向数据绑定(v-bind)
数据只能从data流向页面。譬如以以下代码为例：
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name">
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'hello'
}
})
</script>
打印在网页上为：
在网页hello输入内容刷新依然为hello
在vue插件上保存修改数据，页面上的数据才会改变，所以才叫做单向数据绑定。
3.2 双向数据绑定(v-model)
数据不仅能从data流向页面，还可以从页面流向data。
<div id="root">
双向数据绑定：<input type="text" v-model:value="name">
</div>
<script>
//vue实例的另一种写法
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
const v = new Vue({
data:{
name:'hello'
}
})
v.mount('#root')
</script>
ps：1. 双向绑定一般都应用在表单类元素上(如：input、select等) 2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。
<!-- 简写 -->
双向数据绑定：<input type="text" v-model="name">
4. vue实例实现快捷化
==============
这里以vscode举例，vscode不仅操作界面简洁，而且内含丰富的前端插件，支持多种语言编写，被誉称“宇宙最强编译器”
1.打开左下角设置选择用户代码片段
2.点击之后正上角出现一排选项，选择如下
最后
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
