vue的使用及绑定和一些vue指令

最新推荐文章于 2024-04-21 18:51:25 发布
最新推荐文章于 2024-04-21 18:51:25 发布
阅读量1k 收藏 6
点赞数 6
分类专栏： Vue 文章标签： vue.js 前端 javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53841687/article/details/126000933
版权
本文详细介绍了Vue.js的使用，包括如何引用vue.js文件、创建基本框架，以及深入讲解了Vue的绑定原理。重点阐述了Vue的各种指令，如Mustache语法、v-for、v-once、v-html、v-text、v-pre和v-cloak，并通过案例展示了这些指令的实际应用。同时，还讨论了如何避免加载延迟造成的用户体验问题。
摘要由CSDN通过智能技术生成

目录

一、vue的使用

1. 引用 vue.js 文件

2. vue 的基本框架

 2.1：主界面

2.2：创建new Vue() 对象

2.3：定义模型对象

二、vue的绑定

三、vue的指令

1.  Mustache语法

2.  v-for

3.  v-once

4.   v-html

5.  v-text

6.  v-pre

7.  v-cloak

四、案例

一、vue的使用

1. 引用 vue.js 文件

对不同构建版本的解释

在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别： 

UMD CommonJS ES Module (基于构建工具使用) ES Module (直接用于浏览器)
完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
完整版 (生产环境 vue.min.js - - vue.esm.browser.min.js
只包含运行时版 (生产环境) vue.runtime.min.js - - -

 

下图链接：vue CDN by jsDelivr - A free, fast, and reliable Open Source CDN

可以在此dist 目录下引用vue.js 文件

2. vue 的基本框架

 2.1：主界面

        <div id="app"> 
			<h2>{
  {name}}</h2><!-- 大括号语法 -->
		</div>
  1.  将界面中所有元素包裹在一个父元素下，并通常取地址名“app”
  2. 在父元素内创建子元素，其子元素中可能随程序自动变化的变量，用{ {变量名}} 来标记或占位
  3. 其界面中可能需要触发事件的元素，可用语法@事件名=“事件处理函数名”来标记

2.2：创建new Vue() 对象

用于监控div 所包含的区域

       <script>
			const vm = new Vue({//MVVM框架  vm层
				el:'#app',
				data(){
                    
                }
			})
		</script>

2.3：定义模型对象

保存界面中所需的所有变量和事件处理函数

        <script>
			const vm = new Vue({//MVVM框架  vm层
				el:'#app',
				data:{//model层
					name:'张超'
				}
                methods:{

                }
			})
		</script>
  1.  data:{} 保存界面中所需的所有变量和初始值；
  2. methods:{} 保存界面中所需的所有事件处理函数；

注意： methods 中的事件处理函数中，如果要操作data中的变量，必须加 this.

二、vue的绑定

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.变量名 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset&#
最低0.47元/天 解锁文章
呦呦鹿鸣~@
关注
专栏目录
Vue 3.0双向绑定原理的实现方法
10-16
因此，Proxy 代理不仅可以代理对象，还可以代理数组，甚至代理一些内部操作，从而使得Vue3.0中的响应式系统更为全面和强大。 接下来，详细地阐述Vue3.0双向绑定的实现方法。在Vue3.0中，双向绑定的实现可以分为以下...
vue 中动态绑定class 和 style的方法代码详解
08-27
Vue 中动态绑定 Class 和 Style 的方法代码详解 Vue.js 作为一个响应的数据绑定系统，...使用 v-bind 指令可以绑定 Class 和 Style，使用对象和数组可以绑定 Class，使用 JavaScript 表达式可以实现复杂的逻辑判断。
Vue中的绑定指令
kalath_aiur的博客
01-14 281
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .page{ background-color: pal...
VUE指令之绑定
HJHxHJH的博客
12-08 591
v-bind、v-on、v-model v-bind <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) 该指令绑定
Vue----事件绑定指令
emmmm.....
04-28 3758
文章目录3.6 事件绑定指令3.6.1 事件对象3.6.2 绑定事件并传参3.6.3 事件修饰符3.6.4 按键修饰符 3.6 事件绑定指令 vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，原生的DOM对象有onclick、oninput等原生事件，在vue中为v-on:click、v-on:input等。v-on 简写为 @。 通过v-on绑定的事件处理函数，需要在methods节点中声明。 示例： <!DOCTYPE html> <html lang="en
vue指令和事件绑定
weixin_30739595的博客
07-19 606
安装npm 简单的说，npm就是JavaScript的包管理工具。类似Java语法中的maven，gradle，python中的pip。 去nodejs官网下载nodejs傻瓜式安装即可，默认会安装npm。但是这个npm可能不是最新的，更新：npm install npm@latest -g 使用步骤： 初始化：npm init 安装包：npm install jquery@2.0.1...
Vue绑定指令
A
12-01 564
属性绑定指令 基本用法： 如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。 <!-- 假设有如下的 data 数据： data: { inputValue: "请输入内容", imgSrc: "https://cn.vuejs.org/images/logo.png" } --> <!-- 使用 v-bind 指令， 为 input 的 placeholder 动态绑定属性值 --> <input type="text" v-bind:pl
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty...
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
09-01
双向数据绑定是现代前端框架如Angular和Vue的核心特性之一，它允许视图与模型之间的数据自动同步。本文将深入探讨这两个框架如何实现这一功能，尤其是Vue的双向绑定机制。 首先，我们要理解JavaScript对象中的数据...
vue属性绑定指令
weixin_42541725的博客
02-28 208
vue属性绑定指令
Vue绑定指令v-bind、v-on
林中明月间丶
01-15 573
&lt;div id="app"&gt; &lt;input type="text" v-on:input="inputHandle()"&gt; &lt;textarea name="" id="" cols="30" rows="10" v-on:input="du()"&gt;11&
Vue 之 深入理解绑定指令
weixin_42504044的博客
09-04 131
深入理解绑定指令 v-bind入门 1.<div v-bind:title="message" >点击查看</div> data() { return { message:'我是一个title', } 渲染显示 ** 绑定属性 ** <img src="http://img0.imgtn.bdimg.com/i...
vue的绑定指令的使用
m0_72699629的博客
11-08 270
vue的绑定指令的使用
Vue常用指令2(事件绑定指令/属性绑定指令)(v-on/v-bind)
最新发布
cyqwersj的博客
04-21 961
按钮- 按钮- 按钮
vue模板语法与绑定指令
abza7117的博客
03-06 101
1.插入文本 <!-- 插入文本 --> <span>Message: {{ msg }}</span> <!-- 插入HTML元素 --> <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span...
vue数据绑定指令
fiona_0427的博客
06-30 887
指令 1.什么是指令 本质就是自定义属性（data-xxx） Vue中指定都是以 v- 开头 2.v-cloak 防止页面加载时出现闪烁问题–vue是先显示插值表达式，然后迅速替换。 v-cloak指令的用法 1、在style中提供样式 [v-cloak]{ display: none; } 2、在插值表达式所在的标签中添加v-cloak指令 v-cloak背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果 <
Vue基础--Vue中的事件绑定指令详解
qq_44749491的博客
09-24 6307
详解Vue中的事件绑定
Vue:vue中的指令（属性绑定指令、事件绑定指令、修饰符、双向绑定指令...）
weixin_46682277的博客
03-08 6085
内容指令 v-text指令： v-text 和原生js中的 innerText 差不多，都无法解析标签，会把标签当做文本输出，在vue中使用 v-text指令会覆盖标签原来的内容 代码示范： <template> <div> # 最后输出结果为Hello Vue~~会被覆盖掉 <p v-text="msg">Vue~~</p> </div> </template> <script> export defaul
Vue基础（一）：指令概念（内容、属性、事件、双向绑定、条件、列表）
欢迎来到长风沛雨的博客
11-16 1805
学了vue的指令内容，六种指令的分类概念，筛选一些关于指令的内容记录一下。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值