没有合适的资源?快使用搜索试试~ 我知道了~
vue基础入门学习文档.docx
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 77 浏览量
2021-12-30
23:49:44
上传
评论
收藏 1.43MB DOCX 举报
温馨提示
试读
16页
vue基础入门学习文档.docx
资源推荐
资源详情
资源评论
前言
看了无数篇阮一峰、廖雪峰大牛们的博客,也想尝试着写一篇像他们一样通俗易
懂的 Vue 入门的文章。当然本人也是入门小白一个,关于高深层次的技术性东
西自己也不是参悟的很透彻。不过倒是可以与大家一起分享一下自己踩坑以及关
于 Vue 必学的一些最基础方面的知识。
Vue 作为目前前端开发中三大框架之一,是一套用于构建用户界面的渐进式框
架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的
核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一
方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复
杂的单页应用提供驱动。Vue.js 是一个 JavaScriptMVVM 库,是一套构建用户界
面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开
发的设计。相比于 Angular.js,Vue.js 提供了更加简洁、更易于理解的 API,使
得我们能够快速地上手并使用 Vue.js ;同时比起 React + Redux 相对复杂的架
构,Vue.js 更加轻量级也更加容易上手,是初创项目的首选前端框架。Vue 的核
心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。并且
作者是华人的关系,Vue 拥有着对华人开发者最友好的 api 文档和官方教程。
一、安装
对于没有接触过 es6 和 webpack 的同学来说,不建议直接用官方的脚手架
vue-cli 构建项目,直接引用
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
即可。
通过 webpack 来构建项目步骤如下:
1. 安装 Node,下载地址:h%ps://nodejs.org/en/ 或者 h%p://nodejs.cn/
2. 安装 vue-cli,终端输入:npm install vue-cli -g
3. 初始化项目(即构建项目),vue init webpack vue-test,后面名字(vue-test)
是本次项目的名字。
4. 根据终端提示逐步往下进行。当进行到是否要安装 vue-router 时,点击 Y,
因为后面要用,出现是否语法检测(Use ESLint to line your code?) 我们点击 N。
这个很棘手,因为语法检测非常严格,有时候甚至你多写或者在符号前加空格,
他都会报错。空行也是如此,本人就被它折磨过,甚至最后直接重新开始构建一
个新的项目。
5. 其余的命令为:“是否安装单元测试工具”以及“是否需要端到端测试工具”,
依据个人情况而定选择是否安装。
6. 到此步,一个项目便安装完成了。进入项目 cd vue-test ,安装依赖 npm install,
一般系统会自动帮你安装好了依赖,这里可以选择不用执行此命令。
7. 开启本地服务 npm run dev ,在 h%p://localhost:8080 中看到 vue 的一个介
绍就表明整个项目构建成功。
二、起步
1.
声明式渲染
老样子,先来一个 Hello World ,在 src/component 新建一个 test.vue。
HelloWorld.vue 是构建项目完成之后自带的页面,如果不再需要它可以将其删
除,若要让 test.vue 显示出来必须要在 router.js 中修改他的路由。
现在开始写代码,回归 test.vue ,在下列方法中写入 vue 自带的 data 方法,此方
法类似于 react 的 state ,用于储存一些变量的信息、状态。随后通过 {{xxx}} 的
方式渲染在页面上。Vue 的数据和 DOM 已经被建立了关联,所有东西都是响应
式的
本人用的是 WebStrome2017-3.5 ,这一版本中新增了 vue 文件的创建。亲测只
有从这个版本开始才可以直接创建 .vue 的文件,当然,别的版本可以直接下载
插件包也可以使用。.vue 文件的好处就是自动帮你把组件的格式写好,你只需
在里面直接写 html 的代码,或者 js 代码就好了。
2.
事件
Vue 的命令语句中有一个 v-on 的方法,他正是用来绑定事件的。以点击事件为
例。“@” 可以替换 v-on 命令,如:“@click=”xxx””
当然,也可以通过函数来触发点击事件,vue 将所有的函数放在 methods 中,
这就意味着我们要在此方法中写所有的事件函数
剩余15页未读,继续阅读
资源评论
奔跑的朱亚文
- 粉丝: 0
- 资源: 4万+
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功