vue基础知识（一）

小徐今天学习了吗
176 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情。

vue介绍

Vue是一套用于构建用户界面的渐进式javascript框架。渐进式的意思是逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。

vue是MVVM的框架，MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM。

  • V（修改视图） -> M（数据自动同步）
  • M（修改数据） -> V（视图自动同步）

需要注意的是，

  1. 在vue中，不推荐直接手动操作DOM。

  2. 在vue中，通过数据驱动视图，不要再想着怎么操作DOM，而是想着如何操作数据。

vue组件化思想

在这里我们先介绍下什么是模块化和组件化。

模块化：

  • 模块: 一个独立的js文件就是一个模块
  • 模块化: 拆分成一个个独立的文件/模块
  • 侧重于功能/业务

组件化：

  • 组件: 是一个个可复用的UI模块, 包含（HTML+CSS+JS）
  • 组件化: 把一个完整的页面拆分成多个组件构成。

组件 (Component) 是 Vue.js 最强大的功能之一。

在vue中都是组件化开发的，组件化开发就是把一个完整的页面分割成一个一个的小组件。

组件的优点是容易维护、易复用。

开发vue有两种方式：

  1. 传统开发模式：基于html/css/js文件开发vue
  2. 工程化开发方式：在webpack环境中开发vue，这是最推荐的方式。现代化的项目也都是在webpack环境下进行开发的。

vue-cli的使用

vue-cli也叫vue脚手架，vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。

  • 开箱即用
  • 零配置
  • webpack、babel

基本使用

全局安装命令

 npm i @vue/cli  -g
 # OR
 yarn global add @vue/cli

查看版本

 vue -V

初始化一个vue项目

 vue create 项目名

启动项目

单文件组件

一个.vue文件就是一个组件,后续开发vue，所有的功能都是基于组件实现。

一个单文件组件由三部分构成

  • template(必须) 影响组件渲染的结构 html

    • 只能有一个根元素

  • script 逻辑 js

    • created 打印

  • style 样式 css less scss

    • style用于提供组件的样式，默认只能用css

vue插值表达式

vue中可以通过data提供数据。插值表达式, 小胡子语法{{ }}可以使用 data 中的数据渲染视图

  1. 基本语法

    • 表达式

      • 运算
      • 三元表达式
      • 函数方法调用
     {{ msg }}
 {{ obj.name }}
 {{ msg.toUpperCase() }}
 {{ obj.age > 18 ? '成年' : '未成年' }}

    • 语句

      • if 循环语句

  2. vue中插值表达式的注意点: 不能在标签属性中使用

     <h1 id="box" class="box" title="{{ msg }}"></h1>

vue指令

vue指令, 实质上就是特殊的 html 标签属性, 特点是 v- 开头。每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能

v-bind指令

插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令。它的作用是动态绑定数据，用在属性上。

  • 语法：v-bind:title="msg"
  • 简写：:title="msg"
 <!-- 完整语法 -->
 <a v-bind:href="url"></a>
 <!-- 缩写 -->
 <a :href="url"></a>
 <!-- 缩写 -->
 <input :checked="isChecked" type="radio" />

v-on指令

基本使用

v-on用于注册事件。

  1. 写内联语句, 将要执行的代码直接写在 "" 内部, 适合写少量代码

    v-on:事件名="要执行的代码"

  2. 指向methods中的定义的函数

    v-on:事件名="methods中的函数"

  3. 指向methods中的定义的函数，并传入参数

    v-on:事件名="methods中的函数(实参)"

v-on指令可以简写成@事件名。

我们通过一个简单的需求进行实现点击按钮, 控制某个元素的显示隐藏的功能。

 <div id="app">
   <h3>v-on</h3>
   <div v-show="isShow">内容部分</div>
   
   <button v-on:click="isShow = !isShow">切换显示隐藏</button>
   <button v-on:click="fn1">切换显示隐藏</button>
   <button v-on:click="fn2(1, 2)">点击时调用函数并传值</button>
   
   <hr>
   
   <button @click="isShow = !isShow">切换显示隐藏</button>
   <button @click="fn1">切换显示隐藏</button>
   <button @click="fn2(1, 2)">点击时调用函数并传值</button>
   
 </div>
avatar
文章
阅读
粉丝