vue的初体验

最新推荐文章于 2022-08-27 09:23:29 发布
最新推荐文章于 2022-08-27 09:23:29 发布
阅读量91 收藏
点赞数
分类专栏： vue学习心得 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanzai11111/article/details/108966650
版权
本文介绍了Vue.js的三种安装方式：直接CDN引入、下载引入和通过NPM安装。详细讲解了如何在开发和生产环境中使用Vue.js，并重点阐述了Vue实例的创建，包括el、data和methods等关键选项的用途。同时，文章还概述了Vue的生命周期概念。
摘要由CSDN通过智能技术生成

安装方式：
1、直接CDN引入：

script src=“http://cdn.jsdelivr.net/npm/vue”>
2、下载和引入
开发环境：https://vuejs.org/js/vue.js
生产环境：https://vuejs.org/js/vue.min.js
3、NPM安装
后续通过webpack和CLI的使用，后续都会使用这个方法。

除了用var进行对象或者变量外，还可用
let(es6里面定义变量)const(es6里面常量)

创建Vue实列传入options里面可以有很多选项，目前线掌握三个：
1、el（里面的类型可以是string/HTMLElement）作用是：决定之后的Vue实力管理的是哪一个DOM。
2、data：（里面的类型可以是Object/function）作用是：Vue示例中对应的数据对象。
3、methods：（里面的类型可以是[函数名:string]:Function（组件中必须是函数））作用是：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

Vue的生命周期：

nanzai11111
关注
专栏目录
Vue初体验
ivenqin的博客
11-18 304
Vue的引入 要使用 Vue，我们可以直接在 Vue.js 的官网直接下载 vue.min.js 文件，然后在 HTML 页面中通过 <script> 标签来引入这个文件。下载地址为：https://vuejs.org/js/vue.min.js。 引入格式如下所示，其中 path 是文件所在路径： <script src="path/vue.min.js"></script> 或者也可以不下载 vue.min.js 文件，直接引入 Vue 文件地址，例如： &lt
Vue初体验——快速入门
程序无言
09-27 212
一. Vue基础语法 1. 插值操作 v-once: 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。并且该指令后面不需要跟任何表达式。 <h2 v-once>{{message}}</h2> v-html: 按照HTML格式解析，指令后面往往会跟上一个string类型。 <h2 v-html="link"></h2> v-text: 该作用和Mustache比较相似，都是将数据显示在界面中。不过v-text不会因为网络慢的原因，界面上
vue初体验
qq_45117205的博客
08-27 238
Vue基础体验
Vue 初体验
ILove_bugs的博客
11-22 341
第1阶段： html css 。 浮动、定位布局、mdeia（百分比）、响应式、flex、rem布局 <tagname key="value"></tagname> <tagname key="value" /> selector{ key:value; } 第2阶段： 得保证嵌套标签要合理 ，逻辑思维，编程思维。 声明变量、数据类型、运算符（算术、赋值、比较、逻辑、三目）、 声明函数( 参数、this )、分支语句（ if,switch ），..
01-VUE初体验
学习笔记记录
01-08 109
简单认识一下Vuejs Vue (读音 /vjuː/，类似于 view)，不要读错。 Vue是一个渐进式的框架，什么是渐进式的呢？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。 Vue有很多特点和Web开发中常见的高级功能 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM 这些特点，你
VUE初体验
weixin_43487532的博客
12-13 145
vue体验
VUE初体验问题汇总计算属性问题computed和methods方法
qq_43440751的博客
03-17 273
VUE初体验 计算属性问题Vue computed计算属性 Vue computed计算属性 1.关于computed属性，我认为最重要的问题在于他和methods的区别，菜鸟教程中给出相关的主要区别是：我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 2.直接看这段话可能理解不会那么快，下面我们看一下代码实例： 有这样一个需求，将d
vue中v-model结合radio类型
nanzai11111的博客
10-15 1055
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 1、 选男的时候绑定到数据里面的sex,选女也是一样的。 2、而且使用v-model时不用使用name属性也可以让两个选项互斥 3、当要选择默认
vue中事件监听v-on的基本使用
nanzai11111的博客
10-08 677
v-on参数 当通过methods中定义方法，以供@click调用，需要注意参数问题， 情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加。（） <!-- 1、 事件调用的方法没有参数--> <button @click="btnClick">按钮1</button> <button @click="btnClick()">按钮2</button> <!-- 2、 在事件定义时,方法本身需要一个参数，正常的写法应该是下面这样
vue中计算属性computed
nanzai11111的博客
10-08 553
简单的案例：将firstName和lastName结合起来并且中间还要加上空格 <div id="app"> <!-- 计算属性的作用是当要对输出的内容加以修改之后才输出的--> <!-- 如果将firstName和lastName结合起来并且中间还要加上空格的话--> <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2>
vue中v-bind动态绑定
nanzai11111的博客
10-08 391
v-bind指令 除了内容需要动态绑定之外，我们元素的某些属性也需要动态的绑定，比如<img src=""/>或者<a href=""></a>里面的图片路径或者网址路径一定不是写死的，是需要随着请求来的数据而随之改变的。 这就会用到我们的v-bind指令了。 -- 正常的做法就是，使用v-bind指令--> <img v-bind:src="imgURL"> <a v-bind:href = "webURL">webstrom快
vue中的插值操作
nanzai11111的博客
10-08 371
1、mustache双大括号语法 mustache语法中，不仅仅可以直接写变量，也可以直接写简单的表达式 2、v-once指令 在某些情况下可能不希望界面随意的跟随改变，这时就可以使用Vue指令 1）此指令后面不需要跟任何表达式（比如之前的v-for后面是跟随一些表达式的） 2）该指令表示元素和组件，只渲染一次，不会跟着数据的改变而改变。 3、v-html指令 运用指令可以对所给的url进行解析，从而变成正常的我们想要的那种形式，可以点击并跳转。 4、v-text指令 这个指令与mustache双大括号语法
vue中solt插槽的基本使用
nanzai11111的博客
10-15 355
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 第二步：要使用这个插槽的话就直接在组件的标签里面嵌套在插槽里面放什么内容就可以了--> <!-- 但是你整体看的时候发现其实只
vue中计算属性的getter和setter
nanzai11111的博客
10-08 322
<div id="app"> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName:'kobe', lastName:'bryant' }, computed:{
vue中v-model修饰符的使用
nanzai11111的博客
10-15 296
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 1、.lazy修饰符--> <!--在没有加.lazy修饰符的时候，是实时绑定更新的， 加入之后写完数据后，失去焦点或者回
vue中v-model结合chexbox类型
nanzai11111的博客
10-15 254
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- label的好处就是点框或者文字都能选中--> <!--这是chekbox单选框的中v-model的使用方法 <la
vue中计算属性computed和methods函数的对比
nanzai11111的博客
10-08 235
<div id="app"> <!-- 1、通过字符串直接拼接，一般不适用，语法过于繁琐--> <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <!-- 2、直接定义methods函数--> <h2>{{getFullName()}}</h2> <h2>{{getFu
Vue3.0初体验：项目搭建与核心特性
"Vue3.0的初体验和项目搭建教程" Vue3.0作为Vue.js框架的最新版本，带来了显著的改进和优化，提升了整体性能，并引入了一系列新特性。以下是对这些变化的详细说明： 1. **性能提升 (Performance)**: Vue3.0在性能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值