|
最近一直在学习 这里是GitHub的项目地址，目前虽然还是个半成品（有点懒），但对于初学者来说应该会有帮助，因为我也是初学者。使用到的技术栈包括 这不是一篇纯技术文章，更多的是我自己总结的一些方法和对 初学者的难题根据我学习的经历，我觉得对于初学者学习 从Vue-cli开始
# 全局安装 vue-cli
npm install -g vue-cli
# 创建一个基于 Webpack 模板的项目
vue init webpack my-project
# 安装依赖
cd my-project
npm install
# 运行
npm run dev
直接进入到单文件组件开发
单文件组件（.vue后缀名）很好的实现了组件的封装，让组件看起来更像组件。文件结构如下： <template lang='html'>
<!-- 这里是组件的 HTML 标签 -->
</template>
<script>
export default {
// 这里是组件 js 代码
}
</script>
<style lang='scss' scoped>
// 这里是组件的 CSS 样式
</style>
选择一款合适的编辑器我曾经无数次纠结过这个问题：到底是使用 简单的说一下，选择 如果你也跟我一样纠结的话，那我建议你选择 Sublime作为前端编辑器，推荐几个好用的插件：
另外推荐一款我在用的主题： 纵观全局我一直有一个观点：就是看事物要先看全局，忽略那些繁琐的细节，然后再逐个深究。比如看书要先看目录（虽然我讨厌看书），首先做到心里有数，知道自己在看什么或有没有必要再看下去(比如这篇文章)。 比较重要的几个概念我不是一个语言表达能力很好的人，不会扯那些概念，我只能尽可能的说一些自己的理解。 这里先说一句，Vue中的 Vue实例通过 new Vue({
// el是实例挂载点，会将根组件替换掉原文档中id为 app 标签
el: '#app',
// 通过render函数渲染
render: h => {
// 这里App是根组件
h(App)
}
})
// 第二种写法
new Vue({
el: '#app',
// 通过字符串模板
template: '<App />',
components: { App }
})
Vue扩展实例严格来说，通过 扩展实例创建方式： const MyComponent = Vue.extend({
// 该对象就相当于 单文件组件中 export 导出的对象
// 这就是为什么说 所有的Vue组件都是被扩展的Vue实例
})
// 创建扩展实例
const component = new MyComponent()
同样的，Vue扩展实例也需要挂载，其语法与根实例挂载一样： // 会替换掉 HTML 文档中 id 为 app 的标签
new MyComponent({el: '#app'})
// 但是这里不建议这么做，因为这样会与实例挂载点冲突
// 这里仅仅是为了说明扩展实例与 根实例的相似之处
扩展实例一个重要的用法就是在需要的时候才被插入到HTML文档中。比如点击一个按钮，弹出一个模态（modal）框。在我的Demo中，正是通过该方法实现一个加载等待的模态框。通过此方法有一个好处就是，可以将该功能封装成一个Vue插件，需要的时候通过一条指令就可以将组件插入到文档中，不需要预先将组件写入到HTML文档中。方法如下： // 创建扩展实例
let component = new MyComponent()
// 挂载到虚拟DOM中
// 不传递参数，若传递参数会挂载到指定的地方
component = component.$mount()
// 通过原生语法将 扩展实例添加到HTML文档中
document.body.appendChild(component.$el)
同样，Vue根实例也可以通过该方式挂载到HTML中。 组件组件就是扩展的Vue实例（哈哈）。反正记住在Vue中，一切可见的东西（但不限于可见的东西）都是组件，一个Vue实例就是由一大堆组件通过一定的组合和嵌套累积起来的。 学习组件无外乎就是它的创建和使用，通过扩展Vue实例也算是一种创建的方式，另外还有字符串模板和render函数渲染的方式。我一开始就建议直接使用单文件组件，具体请转移官方文档或从GitHub上Clone我的demo查看详情。 生命周期每个组件都有自己的生命周期，从广义上来说，Vue实例其实也是一个组件。一般常用的几个生命周期钩子： 所谓的生命周期钩子，就是说组件在特定的时刻会自动触发该事件，执行对应的函数。 学习Vue的基本思想程序员，其实大部分时间是用于思考的。建立一种思想，一种思维方式很重要。这也是我现在一直在努力做的事。 学习一个框架，就要站在它的角度去思考问题。而Vue是一种 什么是MVVM
之前，我们使用 什么是MVC顺便谈一下 Vue的基本原理我没有研究过Vue的源码，也解释不出来它是怎么实现的？毕竟我们是使用框架，通过它来提高开发效率，没必要太过于深究，否则就失去了使用它的意义（大神请忽略之）。记住一句话：我们是站在巨人的肩膀上开发的。如果什么都要去深究其原理，那还不累死？ Vue的核心是组件，一切可以看见的东西都是由组件构成。然后通过把不同的组件组合和嵌套在一起，最终组成了一个根组件，也就是 new Vue({
// 该属性会 将Vue实例挂载到 真实的HTML中
el: '#app',
// App 就是根组件，被挂载到Vue实例中
render: h => h(App)
})
最后越写到后面感觉越偏离主题（不知所云，看来得好好练一下文笔了），实在写不出想要的那种效果，所以就先到此为止吧。先整理一下思路，后面有时间会接着更新，希望自己会坚持下去，这是第一篇。 关注我，获取前端更多技术文章！ |
|
|
来自： 堂tj77m7tpne37 > 《待分类》
