Vue.js从0开始到实战开发2:Vue基础之第一个Vue程序+el挂载点+data数据对象

简介: vue的官方文档:https://vuejs.bootcss.com/guide/#起步

vue的官方文档:https://vuejs.bootcss.com/guide/#起步

1、第一个Vue程序

创建Vue实例。#是id选择器。

通过#可以告诉vue管理哪一个id部分。(el是挂载点)

data通过赋值,把message对应的值改为了hello vue!

  • 开发第一个Vue程序总结
  • 导入开发版本的Vue.js(去官网中找)。
  • 创建Vue的实例对象,设置el属性和data属性。
  • 使用模板语法把数据渲染到页面上即可。

2、el挂载点

注意,el挂载点只会对id相等的元素内部进行渲染数值。

如下图所示。

同时也不一定需要用#选择器,也可以选择.选择器(对应class),还有标签选择器等等,效果都是一样的。

如下图是使用class的.选择器。还可以选择标签选择器,也就是div。(即el:“div”)

一般开发中,一般用id选择器,而类和标签选择器都是很多的,会造成歧义

并且也可以设置其他的dom元素,可以使用其他的双标签,但是不能用在html或者body上,不然会报错。

一般是把el挂载点放在div标签上。

总结:

3、data属性 数据对象

data中可以写复杂的数据对象,但是需要遵守语法进行调用。

相关文章
|
8天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
37 3
|
2天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
5 0
|
3天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
3天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
14 0
|
3天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
11 0
|
3天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
6 0
|
3天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
7 1
|
3天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
43 0
|
3天前
|
JSON JavaScript API
vue项目开发笔记记录(一)
vue项目开发笔记记录
48 0
|
3天前
|
JavaScript
Vue-实现点击空白处隐藏某节点
Vue-实现点击空白处隐藏某节点
10 1