这次给大家带来新手学习vue详解，新手学习vue注意事项有哪些，下面就是实战案例，一起来看一下。
vue当前端最好的框架之一
首先我们根据官网的文档
#特别注意
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
立即学习“前端免费学习笔记（深入）”；
更新日志
每个版本的更新日志见 GitHub。
npm
在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
命令行工具CLI
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project$ npm install$ npm run dev
登录后复制
特别注意!!!!!!
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，熟悉 Vue 本身之后再研究 CLI。
根据流程下来一遍之后
就会出现相关文件夹
template是放着模板
srcipt 放着JS
style 是css样式
页面结构 结合页面对应一下 看着页面结构
这个hello是一个vue的组件 对应着components里面的hello.vue
在App.vue里面又通过components注册了一个子组件hello 一定要注意我们通过components属性注册 我们才可以使用hello这个标签,否则是不行的。 自己可以把components里面的hello注释试一下
自动格式化的快捷键ctrl+alt+L
现在在看一下hello.vue
代码结构 msg对应这个data里面的msg
我们在vue的定义里面定义一个data这个fun
他可以return一个obj,这个obj里面所有的值都会添加到他的依赖之中里面,然后在模板里面访问这个msg。通过模板里面的msg就可以访问到这个data里面的msg
export default 这个是vue提供的语法糖,可以通过obj去定义一个组件
会在App.vue 的import Hello from’./components/hello’
也就是说在hello.vue里面的data里面的对象,会赋值给这个hello
而在components{Hello相当于Hello:Hello}
登录后复制
也就是说components他的key就是hello 他的值就是export default的那个值
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
前端入门之css3
如何解决IE11的css Hack
axios怎样基于Promise的HTTP请求客户端
以上就是新手学习vue详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2784210.html
