Vue快速入门之本地应用

一、准备工作
1、基础知识储备
  • html
  • css
  • javascript
  • AJAX
2、开发工具
  • VSCode插件
    • 浏览器实时预览 Live Server
    • 代码补全提示:
      • html snippets
      • vetur
      • vue 2 snippets
3、几个部分
  • Vue基础
  • 本地应用
  • 网络应用
  • 综合应用
二、Vue基础
1、Vue简介
  • JavaScript框架
  • 简化Dom操作
  • 响应式数据驱动
2、第一个Vue程序
文档:https://cn.vuejs.org/
  • 导入开发版本的vue.js

  • 插值表达式

  • 创建vue实例对象,设置el属性和data属性

  • 完整程序

3、el属性(挂载点)
el命中的css选择器
  • id–>#xxx
  • class–>.xxx
  • 标签–>el:”div”会直接命中所有div标签
一般使用id选择器,因为开发中id选择器一般是唯一的。
而类选择器和标签选择器可能有多个。
4、data属性(数据对象)
这里我们定义了三种数据类型
  • hello对应的是字符串
  • message对应的是字典
  • skill对应的是数组
可以看到字典类型的输出,可以使用key直接调出来
数组类型还是按照下标打印即可

 

 

三、本地应用
1、介绍
  • 核心:用Vue开发网页效果
  • Vue指令
    • 内容绑定,事件绑定:v-text、v-html、v-on
    • 显示切换,属性绑定:v-show、v-if,v-bind
    • 列表循环,表单元素绑定:v-for、v-on、v-model
2、 Vue指令
  • v-text:设置标签的文本值
  • v-html:设置标签的innerHTML,即内容为html标签的也能够正常按照格式显示
  • v-on与@:为元素绑定事件,一般使用简写@
  • v-show:根据表达值的真假,切换元素的显示和隐藏(样式不显示,但是源代码中还有)
  • v-if:根据表达式的真假,切换元素的现实和隐藏(dom操作,隐藏后源代码中无法查看)
  • v-bind:设置元素的属性(src、title、class)
  • v-for:根据数据生成列表结构
  • v-model:获取和设置表单元素的值(双向数据绑定)