Vue中的hellow world描述el与data的基本使用--Vue知识点归纳(一)

本文中将描述：

第一个Vue程序的开发使用
Vue 中的属性 el 基本使用说明
Vue 中的属性 data 操作数据使用说明

1 Vue 中的hellow world

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue基础</title>
</head><body><!-- 第三步 在html中使用--><div id="app">{{message}}</div><!-- 第一步 导入vue.js --><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 第二步 在script中创建Vue实例 --><script>var app = new Vue({el: "#app",data: {message: "hellow world"}})</script>
</body></html>

一个Vue实例其实就是 new Vue()，在这里使用到了 el属性和data属性。
官方文档中有很详细的说明，在这里我们可以理解为el 是将html中的元素节点与vue的实例关联起来了,data 是数据操作关联，例如我们这里定义的数据 message:“hellow world”，在html中的通过{{}} 引用

<div id="app">{{message}}</div>

在这里，我们通过el:"#app" 是通过css选择器中id关联，我们也可以使用class选择器关联(当然也运行其他类型选择器)如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue基础</title>
</head><body><div class="app">{{message}}</div><!-- 第一步 --><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: ".app",data: {message: "hellow world"}})</script>
</body></html>

总结：

2 Vue 中的data 数据类型

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue基础</title>
</head><body><div id="app"><!-- 标签中引用 字符串数据 -->{{message}}<!-- 标签中引用对象类型的数据 可能过点语法使用 --><p>姓名：{{ person.name}} 联系方式：{{person.wx}}</p><!-- 标签中引用数组类型的数据 --><p>地址是：{{ addres[0]}}</p></div><!-- 第一步 --><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {// 字符串数据message: "hellow world",// object 对象类型数据person: {name: "张三",wx: "zl928343994"},// 数组类型addres: ["北京","上涨"]}})</script>
</body></html>

总结：

Vue中的hellow world描述el与data的基本使用--Vue知识点归纳(一)相关推荐

Vue中v-for=（index,item）in data :key=index,指令中的key遇到的问题:删除后成功后重新拉取数据，但是数据出现更新错误的现象
删除前 2.删除第二个后现象 2.1 少了一个,第一位无任何变化: 2.2 第二个的id变了其它无任何变化: 2.3 本来删除的第二个,但是消失的确实第三个原因分析 3.1 v-for中的key: ...
vue中请求到的数据赋值给data 对象
在写vue的项目时,用axios请求到的数据,直接赋值给data对象,当修改data对象里面的数据,请求到的数据也会改变. _this.detailData是data对象里面的数据,response. ...
Vue中computed分析
Vue中computed分析在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
快速入门在Vue中使用滑动插件Swiper
前言 swiper 开源.免费.强大的滑动插件. swiper中文网 https://www.swiper.com.cn/ Swiper4中文API https://www.swiper.com.cn ...
vue中简单的小插曲
我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({el:"#app",data ...
vue中v-model详解
vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. ...
Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
Vue中的ref是做什么的？
Vue 中的 ref 属性详解_前端大猪草的博客-CSDN博客 Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件 ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...

Vue中的hellow world描述el与data的基本使用--Vue知识点归纳(一)

1 Vue 中的hellow world

2 Vue 中的data 数据类型

Vue中的hellow world描述el与data的基本使用--Vue知识点归纳(一)相关推荐

最新文章

热门文章