vue基础入门

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量22 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51092636/article/details/130354295
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、vue是什么？

vue的两大特性：1.数据驱动视图 2. 双向数据绑定

1.1 数据驱动视图

在这里插入图片描述

2.2 双向数据绑定

在这里插入图片描述

2.3 MVVM

在这里插入图片描述
在这里插入图片描述

二、vue的基本使用

1.1 导入vue.js脚本

<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>

1.2 在页面中声明一个将要被vue控制的DOM区域
1.3 创建vm实例对象
在这里插入图片描述

<body>
          <div id="root">{{username}}</div>

           <script>
                     const vm = new Vue({
                               el: '#root',
                               data: {
                                      username: 'duanrui' 
                               }
                     })
           </script>


</body>

三、Vue指令

1.1 内容渲染指令

在这里插入图片描述
v-text 指令会覆盖元素内部原有的内容（使用比较少）。
{{}}插值表达式：在实际开发中使用最多，只是内容上的占位符，不会覆盖原来的内容。
v-html：可以将带有标签的字符串渲染成真正的标签。

  <div id="root">{{username}}

                    <p v-text="gender">性别：</p>
          </div>

           <script>
                     const vm = new Vue({
                               el: '#root',
                               data: {
                                      username: 'duanrui',
                                      gender: '女'
                               }
                     })
           </script>

1.2 属性绑定

v-bind表示单向数据属性绑定,单向数据绑定可以简写成:

<body>
          <div id="root">
          <a v-bind:href="url">点击跳转</a>
          </div>

          <script>
                     const vm = new Vue({
                               el: '#root',
                               data: {
                                      username: 'duanrui',
                                      gender: '女',
                                      url:'http://www.baidu.com'
                               }
                     })
          </script>
          
</body>

1.3事件绑定

v-on 表示事件绑定可以简写成@click

<body>
          <div id="root">
          <h1>数量目前是：{{count}}</h1></h1>
          <button v-on:click="add">点击数量加1</button>
          </div>

          <script>
                     const vm = new Vue({
                               el: '#root',
                               data: {
                                      count:1
                               },
                               methods: {
                              add(){
                                        this.count++;
                              }
                                         
                               }
                     })
          </script>

绑定事件并传参
在绑定函数后面加()

<body>
          <div id="root">
                    <a v-bind:href="url">点击跳转</a>


                    <h1>数量目前是：{{count}}</h1>
                    </h1>
                    <button v-on:click="add">点击数量加1</button>
                    <button v-on:click="sub(2)">点击数量减1</button>
          </div>

          <script>
                    const vm = new Vue({
                              el: '#root',
                              data: {
                                        username: 'duanrui',
                                        gender: '女',
                                        url: 'http://www.baidu.com',
                                        count: 1
                              },
                              methods: {
                                        add() {
                                                  this.count++;
                                        },
                                        sub(n){
                                             this.count = this.count - n;     
                                        }
                                        
                              }
                    })
          </script>

</body>

vue中内置对象$event，可以获取到操作事件源

<body>
          <div id="root">
                    <a v-bind:href="url">点击跳转</a>


                    <h1>数量目前是：{{count}}</h1>
                    </h1>
                    <button v-on:click="even(2,$event)">检测even对象</button></button>
          </div>

          <script>
                    const vm = new Vue({
                              el: '#root',
                              data: {
                                        username: 'duanrui',
                                        gender: '女',
                                        url: 'http://www.baidu.com',
                                        count: 1
                              },
                              methods: {
                                        add() {
                                                  this.count++;
                                        },
                                        sub(n){
                                             this.count = this.count - n;     
                                        },
                                        even(n,e){
                                        console.log(e);
                                        }
                                        
                              }
                    })
          </script>

</body>

事件修饰符.prevent .stop

<a href="http://www.baidu.com" @click.prevent="show">事件修饰符</a>

 show(){
           console.log("链接被点击了一下！");
                                    }

在这里插入图片描述

1.4 按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

1.5 双向数据绑定

v-model

   <select name="城市" id="root" v-model="city">
                    <option value="">请选择城市</option>
                    <option value="1">南京</option>
                    <option value="2">北京</option>
          </select>
          

          <script>
          new Vue({
                  el:'#root',
                  data:{
                          city:''
                   }
             })
          </script>

在这里插入图片描述

1.6 条件渲染指令

在这里插入图片描述
在这里插入图片描述

1.7 列表渲染

v-for 具体用法 v-for='item in list

<body>
          <div id="root">
                    <table>
                              <thead>
                                     <tr>
                                        <th style="width: 200px;">序列</th>
                                        <th style="width: 200px;">姓名</th>
                                        <th style="width: 200px;">身份证</th>   
                                     </tr>
                                        
                              </thead>
                              <tbody>
                                        <tr v-for='item in list'>
                                                  <td>{{item.id}}</td>
                                                  <td>{{item.name}}</td>
                                                  <td>{{item.idcard}}</td>
                                        </tr>
                              </tbody>
                    </table>
          </div>


          <script>
                      const vm = new Vue({
                               el: '#root',
                               data: {
                                      username: 'duanrui',
                                      gender: '女',
                                      list:[
                                                {id:1,name:'张三',idcard:'342626199607184713'},
                                                {id:2,name:'赵四',idcard:'342626199607184713'},
                                                {id:1,name:'王五',idcard:'342626199607184713'}
                                      ]
                               }
                     })

          </script>
          
</body>

在这里插入图片描述

Vue 过滤器

在这里插入图片描述

weixin_51092636
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue基础入门
06-21
本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三 方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之...
Vue基础入门源码-03
05-16
该资源是我的vue入门博客的源码
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 4032
Vue 入门基础篇
二、vue基础入门
付之一笑的专栏
11-24 2080
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
Vue基础入门题库
qq_46556714的博客
09-22 1万+
Vue基础入门作业(含参考答案） 单选题 1、 下列选项中，代表视图部分的是（）。 1分 A、Element B、DOM C、Model D、View 参考答案 : D 答案说明 : MVVM主要包含3个部分，分别是Model、View和ViewMode。 Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。 2、 下面选项中，是基于Chrome V8引擎的JavaScript运行环境，它可以让JavaScript运行在服务器端的是（）。 1分 A、npm.
史上最详细vue的入门基础
楠黎倾风的博客
09-20 1万+
vue的入门基础
Vue基础入门小demo——记事本
黛琳ghz的博客，期待你的关注。
01-08 1万+
记事本（不是操作系统的那个记事本，是一个简单的网页版本记事本）是一个较全面的Vue指令集合案例，在你学习完大部分基本的v-指令后（如v-model），你可以写这个记事本案例，来熟悉和巩固v-指令的使用方法，记事本这个案例是一个功能比较齐全的小demo，是一个不错的练手案例。
vue2 基础入门
ClearloveYt的博客
07-03 2506
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
Vue基础入门源码-02
05-11
该资源是我的vue入门博客的源码
vue基础入门源码-01
05-10
该资源是我的vue入门博客的源码
vue基础入门&demo.pdf
02-18
vue；vue基础入门&demo.pdfvue基础入门&demo.pdf
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1050
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 225
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 186
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 368
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
vue2入门基础教程
09-09
要学习Vue2的入门基础知识，您可以按照以下步骤进行： 1. 下载和安装Vue.js：您可以从官方网站上下载并引入Vue.js脚本文件，或者使用CDN链接进行引用。 2. 创建HTML文件：创建一个HTML文件，其中包含被Vue控制的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值