【自学】Vues基础

学习目录

  1. Vues基础
  2. 本地应用
  3. 网络应用
  4. 综合应用

工具的准备

我个人比较喜欢使用HTMLDROWNER,学习资料推荐使用VC,仅供选择吧

前置知识

HTML+CSS+JS+AJAX:这个是学习资料博主推荐的

个人感觉认真学好HTML+CSS+JS理解vues基础很容易上手

官方网址

Vue.js - 渐进式 JavaScript 框架 | Vue.js:官方学习网址

VUES背景知识

  1. 是一个JS的框架
  2. 简化DOM操作
  3. 响应式数据驱动

初始运用

如何导入vues

两种方式:

复制代码
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

el:挂载点

el:挂载点

  1. 问:Vue实例的作用范围是什么呢?
    答:Vue会管理el选项命中的元素及其内部的后代元素
  2. 问:是否可以使用其他的选择器?
    答:可以使用其他的选择器,但是建议使用ID选择器
  3. 问:是否可以设置其他的dom元素呢?
    答:可以使用其他的双标签,不能使用HTML和BODY

data:数据点

data:数据对象

  1. Vue中用到的数据定义在data中

  2. data中可以写复杂类型的数据

  3. 渲染复杂类型数据时,遵守js的语法即可

    {{ message }}

    var app = new Vue({
    el:"#app"
    data:
    message:"黑马程序员"
    array:[],
    obj:{}
    }
    })

创建第一Vues.js程序步骤

  1. 导入开发版本的Vues.js
  2. 创建Vues实例对象,设置el属性和data属性
  3. 使用简洁的模板语法把数据渲染到页面上

案例分析与细节

相关推荐
A黄俊辉A2 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
honkun62 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs19912 天前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net
雪芽蓝域zzs2 天前
第26章:ECharts 自定义主题 + 页面一键切换主题(深色 / 浅色两套)
vue.js·echars
雪芽蓝域zzs2 天前
第22章:ECharts 图表联动(多图表交互联动)
vue.js·echars
daols882 天前
vue 表格组件 vxe-table 实现虚拟滚动与无需滚动加载
vue.js·vxe-table
雪芽蓝域zzs2 天前
第18章:ECharts 折线图 + 标记点、标记线,自定义 tooltip
vue.js·echars
雪芽蓝域zzs2 天前
第24章:ECharts 地图组件(基础行政区地图,若依 Vue3)
vue.js·echars
计算机毕设定制辅导-无忧学长2 天前
《基于Vue的流浪动物救助中心管理系统的设计与实现》
java·vue.js·spring boot·流浪动物救助中心管理系统
雪芽蓝域zzs2 天前
第25章:地图下钻交互(点击省份,切换到对应省份城市地图)
vue.js·echars