前端Vue框架快速学习

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Node和NPM
NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、 VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

下载地址：链接
下载之后一直点下一步即可安装，在cmd命令行输入以下命令查看node和npm的版本信息

安装nrm，-g代表全局安装

通过nrm查看npm的仓库列表，再通过nrm use taobao来指定使用的镜像源

创建工程
在idea中创建一个项目
在idea软件中，左键File，选择Empty Project，输入项目名及路径，然后点击完成
再创建一个modules,点击+号，然后选择Static Web，输入项目名及路径即可

可以通过此下载vue：vue链接

在idea的Terminal窗口输入npm init -y

也可在线安装vue，安装成功之后可在项目目录下的node_modules下看见一个vue的目录
Vue入门
在hello目录下，创建一个HTML文件，并在里面编写如下代码
通过vue进行渲染

结果

数据
在代码中加入如下代码
在浏览器中打开，并在输入框中输入内容，值会跟着改变
方法
在html中加入如下代码
在浏览器中
v-text和v-html

• v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
• v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

编写如下代码
结果
v-model
可使用元素

1. input
2. select
3. textarea
4. checkbox
5. radio
6. components(自定义组件)

编写代码
结果
登录机注册组件
一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换

在src目录下，创建一个user目录，之后在user目录下创建login.js和register.js
在login.js中编写如下代码

在register.js编写如下代码
demo01中编写的代码
结果

之后的代码就不一一演示了

7. v-on:指令用于给页面元素绑定事件
8. v-for :遍历数据渲染
9. v-if :条件判断。当得到结果为true时，所在的元素才会被渲染。
10. v-else :来表示v-if的else
11. v-show:用于根据条件展示元素的选项
12. v-bind:html属性不能使用双大括号形式绑定，只能使用v-bind指令

问题解决
在demo01.html中引入外部js时，不能写相对路径，只能写绝对路径。不然会报如下错