前端Vue框架快速学习

  • Z时代
  • 2024-01-10
  • 分类：综合

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中编写的代码
结果

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

  1. v-on:指令用于给页面元素绑定事件

  2. v-for :遍历数据渲染

  3. v-if :条件判断。当得到结果为true时，所在的元素才会被渲染。

  4. v-else :来表示v-if的else

  5. v-show:用于根据条件展示元素的选项

  6. v-bind:html属性不能使用双大括号形式绑定，只能使用v-bind指令

问题解决

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

以上是 前端Vue框架快速学习 的全部内容， 来源链接： utcz.com/z/378025.html

回到顶部