vue2 基础 （一）

最新推荐文章于 2023-09-27 17:23:04 发布
最新推荐文章于 2023-09-27 17:23:04 发布
阅读量166 收藏 1
点赞数
分类专栏： vue 文章标签： vue2 基础 使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/79998283
版权

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

---------------------------------------------------------------------------------------------------------------


vue 不支持ie8；


使用vue有多种方式，开发中我们使用npm下载模块，现在我们学习基础，可以直接引入vue.js

就和引入jquery一样，没有什么区别，特别简单；


好吧，什么也别想，什么也别困惑，学着学着就明白了，坚持就行：


第一步：引入我们的vue.js 文件，别把vue看的很难，就当成jquery来学就简单了；

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title>vue2基础</ title>
<!-- 在这里引入我们的vue文件 -->
< script src= "vue.js"></ script>
</ head>
< body>
第一步，先引入vue.js 文件 要自己去下载咯，这里不提供
</ body>
</ html>


第二步：我们在<body>中添加点内容吧；

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title>vue2基础</ title>
<!-- 第一步 在这里引入我们的vue文件 -->
< script src= "vue.js"></ script>
</ head>
< body>
<!-- 第二步,在网页中添加点内容吧 -->
< div id= "main">
< span>我是静态的内容</ span>
</ div>
</ body>
</ html>


第三步：这一步很重要，写法需要记住，就是死的东西，固定好的；

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title>vue2基础</ title>
<!-- 第一步 在这里引入我们的vue文件 -->
< script src= "vue.js"></ script>
</ head>
< body>
<!-- 第二步,在网页中添加点内容吧 -->
< div id= "main">
< span>{{abc}}</ span>
</ div>

< script>
// 第三步首先new 一个Vue()，这一步是固定的，就这么写就行了,
// 下面首先会设置 el 这个也是固定的，el代表我们这个Vue绑定到哪个元素上，
// 后面写上div的ID就可以了，我们的ID 是 main, 注意加#
// data代表数据，可以理解为一个data对象，这个是固定的,我们在对象里面写了一个 abc 属性
// 并且 abc 的值为：我就是数据部分 ; abc 是随便起的名字，
// 这么简单的设置之后，我们在span 中写上{{ abc }},就可以在span 中显示 abc;
new Vue({
el: "#main",
data:{
abc: "我就是数据部分"
}
});
</ script>
</ body>
</ html>

总结：上面我们学习了

          （1） 如何引入vue ，在<script>标签中引入

          （2） 如何创建vue ， new Vue({  .......   }) 

          （3） 然后创建的Vue（） 里面的两个东西，一个 el  ,一个data ,以及他们的作用；

                    当然了还有其他的东东，下面会说到；

          

cvper
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个基础的vue2脚手架
03-11
Vue2脚手架是开发Vue应用的一个重要工具，它为开发者提供了一个预配置的基础环境，以便快速启动项目，而无需从零开始设置构建系统、打包工具以及第三方库。本脚手架已经集成了ElementUI，这是一个流行的Vue组件库，...
Vue2-基础知识
qq_54379580的博客
09-28 1万+
一些vue的基础知识啦, 基本用法, 指令相关,侦听器,过滤器,计算属性, 组件相关, 路由相关的基础知识点啦~~~
VUE2基础知识（详细版）
weixin_59418570的博客
05-28 1651
组件是实现应用中局部功能代码和资源的集合。v-xx开头，实质是js代码的语法糖。虚拟DOM -- VDOM -- 是一个js对象有些属性需要动态来绑定，比如：动态绑定a元素的href属性；动态绑定img元素的src属性。v-bind可以给任何属性赋值，是从数据到页面的单向数据流（从data指向视图）
vue2基础
pressure7的博客
12-03 591
vue2基础、指令，vue-cli
学Vue2基础内容，这一篇就够了
weixin_49931650的博客
07-18 973
Vue2笔记--基础篇 二万多字，小白学了都说好 内含Vue的一些基础属性和案例使用 还有事件、指令、生命周期钩子和组件的使用 难理解的地方都用了图片展示
Vue基础之指令与过滤器
fanlingfang的博客
11-06 612
ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块 导入其它模块成员使用import 关键字 向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例 前端工程化 实际的前端开发: 模块化(js的模块化、css的模块化、资源的模
前端开发VUE2基础教程
12-01
5. **指令系统**：Vue2提供了一系列指令，如`v-bind`（用于动态绑定属性）、`v-on`（用于监听事件）和`v-if/v-show`（用于条件渲染）。例如，`v-bind:style` 可以绑定一个对象或数组来动态设置元素的CSS样式，`v-on`...
vue2基础，十分基础
03-11
在这个“Vue2基础”教程中，我们将深入探讨Vue 2的核心概念和特性，帮助你搭建坚实的Vue开发基础。 1. **安装与设置** - 安装Vue CLI（命令行工具）：Vue CLI简化了项目初始化，通过npm或yarn全局安装。 - 创建新...
Vue2 css signal chart
01-19
1. **Vue2基础知识**： - **Vue实例**：Vue2项目的核心是Vue实例，它通过`new Vue({})`创建。在这个项目中，Vue实例将作为整个应用的入口，包含数据、方法、生命周期钩子等。 - **模板语法**：Vue2使用模板语法来...
vite+vue2的项目基础包
最新发布
06-17
这个“vite+vue2的项目基础包”为开发者提供了一个快速启动Vue2项目的模板，免去了从零开始配置的繁琐过程。 1. Vite的核心特性： - **即时编译**：Vite在开发模式下，采用ES模块的热重载和按需编译，大大提高了...
vue2 基础入门
ClearloveYt的博客
07-03 2745
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 2万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
vue2基础总结
m0_46692607的博客
03-20 1万+
Vue2 API Vue2 guide 参考以上资料选择一些常用高频核心的Vue2知识进行总结归纳 1.基础  Vue文件 = template+script+style  创建vue实例 var vm = new Vue({选项对象})  html标签体插值{{xxx}} ，xxxx 会作为js 表达式解析  单向数据绑定data–>html:v-bind:href ="xxx" 或简写为:href  双向数据绑定data<–>html:v-mode:value="xxx" 或简写为v-
Vue2 基础知识点
Fziha的博客
08-31 920
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。2、所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等、promise的回调函数）最好写成箭头函数。且要给标签配置value值。4、methods中配置的函数，都是被Vue所挂你的函数，this的指向是vm 或 组件实例对象。
vue2基础知识
xixixi465的博客
11-16 941
vue2、webpack基础知识
Vue2基础
qq_45897636的博客
10-31 719
MVVM模型 vue中的数据代理 vue中常用的事件处理 vue2中选项式属性 vue2的组合式实现 component组件 transition组件 transition keep props父传子 emit子传父 插槽通信 全局事件总线 ref调用 自定义指令 全局变量 自定义插件 封装Message提示插件 移动端适配
Vue最全笔记
Tacit_zfy99的博客
08-14 1062
https://www.bilibili.com/video/BV1Zy4y1K7SH B站2021最新版vue教学，尚硅谷前端 讲的极好，这里把笔记copy一份，以便查阅。 一、vue基础 1 初识Vue： ​ 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； ​ 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； ​ 3.root容器里的代码被称为【Vue模板】； ​ 4.Vue实例和容器是一一.
VUE2.X全教程--基础详解（二）
qq_27820551的博客
01-25 6446
主要内容： 1.Vue实例的生命周期及每个生命周期中自调用函数调用时机 2.模板语法的使用  3.计算属性 computed   方法methods ,及监听器 watch 操作属性 4.计算属性中的get和set方法的使用 5.Vue中的两种样式绑定方式 6.Vue中的条件渲染 7.Vue中的列表渲染和对象渲染   上一章基础回顾 &lt;div id="root"&gt...
Vue2 基础教学文档-旨意为简单易懂
03-08
"Vue2 基础教学文档-旨意为简单易懂" Vue.js，简称Vue，是一个轻量级的、渐进式的JavaScript框架，由尤雨溪开发，其核心理念是通过简单的API实现数据绑定和组合视图组件，以提高Web前端开发的效率。Vue的设计使得它...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值