Vue--系统指令(基础)
2024-05-28 11:07:50
Vue概念:vue是mvvm模式的，直接操作dom开销较大，先获取dom，修改里边的内容，但是用vue的话，直接视图和模型绑定，不管是视图的数据发生改变还是模型的数据发生改变，其都是关联的，不需要直接操作dom，效率更高。
一.Vue的简单使用例子:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div id="app">
11 {{message}}
12 </div>
13 </body>
14 <script src="../vue2.4.4.js"></script>
15 <script>
16 //如果要使用vue需要创建一个新的vm对象
17 var vm = new Vue({
18 //要操作的dom元素
19 el: "#app",
20 //提供数据
21 data: {
22 message: "小追命又回来了"
23 }
24 //如果要使用vue来操作视图需要使用vue内置的一些系统指令：
25 // {{ 属性 }} 输出
26 });
27 </script>
28 </html>二.基本输出指令
1.{{}}
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div id="app">
11 <p>姓名：{{name}}</p>
12 <p>年龄：{{age + 1}} ----- {{ age>=18?"成年":"未成年"}} </p>
13 <!-- 如果大于18说明成年，如果小于18说明未成年 -->
14 </div>
15 </body>
16 <script src="vue2.4.4.js"></script>
17 <script>
18 //如果要使用vue需要创建一个新的vm对象
19 var vm = new Vue({
20 //要操作的dom元素
21 el: "#app",
22 //提供数据
23 data: {
24 name: "小追命",
25 age: 18
26 }
27 //如果要使用vue来操作视图需要使用vue内置的一些系统指令：
28 // {{ 属性 }} 输出
29 // 输出指令只能输出内容不能加入一些判断：if for语句
30 });
31 </script>
32 </html>2.v-text和v-html指令
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div id="app">
11 <!-- v-text:可以给元素设置一些文本值，会将字符串原样输出 -->
12 <div v-text="msg1"> </div>
13 <!-- v-html 可以给元素设置一些文本值，会将标签解析为dom元素-->
14 <div v-html="msg2"> </div>
15 </div>
16 </body>
17 </html>
18 <script src="vue2.4.4.js"></script>
19 <script>
20 var vm = new Vue({
21 el:"#app",
22 data:{
23 msg1:"<h1>小追命v-text</h1>",
24 msg2:"<h1>小追命v-html</h1>",
25 }
26 });
27 </script>3.v-cloak和提前加载vue.js取消元素的闪速的效果
闪烁：由于浏览器先加载dom结构
解决方法：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 /* 方法2： */
10 [v-cloak]{
11 display: none;
12 }
13 </style>
14 <!-- 防止页面闪烁方法1 -->
15 <!-- <script src="vue2.4.4.js"></script> -->
16 </head>
17 <body>
18 <div id="app">
19 <!-- 方法2： -->
20 <span v-cloak> {{name}}</span>
21 <!-- cloak 解决闪烁原理：就是在加载vue代码之前这个元素先让它在页面上隐藏起来，
22 等到vue加载成功以后才会将元素显示出来 -->
23 </div>
24 </body>
25 </html>
26 <script src="vue2.4.4.js"></script>
27 <script>
28 var vm = new Vue({
29 el:"#app",
30 data:{
31 name:"小追命"
32 }
33 });
34 </script>4.v-mode和v-bind实现双向数据绑定
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div id="app">
11 <!--
12 1. 如果要给文本框设置属性最好使用：v-model属性来设置
13 2. 可以让文本框中的数据实行双向绑定
14 -->
15 <input type="text" title="帅帅的" v-model="name">
16 <span v-text="name"></span>
17 <!-- v-mode 和v-bind要一起才能实现数据双绑定
18 为了其它的属性也依赖于name属性我们需要学习新的指令:v-bind
19 -->
20 <input type="text" v-bind:title="name" v-model="name">
21 <!--
22 v-bind可以简写 ":" 号
23 -->
24 <input type="text" :title="name" v-model="name">
25 <!-- <a v-bind:href="del?id=id" >删除元素</a> 这样两个id 是不行的 -->
26 <a v-bind="{href:'del?id='+id}">删除元素</a>
27 </div>
28 </body>
29 </html>
30 <script src="vue2.4.4.js"></script>
31 <script>
32 var vm = new Vue({
33 el:"#app",
34 data:{
35 id:2,
36 name:"帅帅的"
37 }
38 });
39 </script>5.v-for遍历数组、对象数据
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <!-- 解决闪烁问题 -->
9 <script src="vue2.4.4.js"></script>
10 </head>
11 <body>
12 <div id="app">
13 <ul >
14 <!--
15
16 v-for遍历数据:
17 v-for可以用来遍历数组，item 是遍历的项 index是下标
18 在vue1.0版本中index是放在item之前的
19 在vue2.0版本中index是放在item之后的
20
21 -->
22 <li v-for="(item,index) in arr" ::key="index">{{item}}-----------{{index}}</li>
23 </ul>
24
25
26
27 <!--
28 v-for遍历对象
29 参数右三个：
30 item:当前项
31 key:键
32 Index:下标
33 性能优化 :key="index"
34 作用: 告诉vue底层将来我的数组中有对象不应该将所有的数据都更新，
35 只需要更新改变的那一条就行了
36 原因: 因为有了这个标识后，vue底层会给遍历生成的每一个元素添加一个唯一标识，将来只要与这个标识相关的数据发生了改变，
37 vue的底层会根据这个唯一的表示找到元素将里面的结构重新生成
38 注意: key与index关键字跟我们在遍历时出现的item index key没有任何关系，它仅仅只是vue一种优化标识
39 -->
40 <ul>
41 <li v-for="(item,key,index) in obj">
42 {{item}}----------{{key}}---------{{index}}
43 </li>
44 </ul>
45 </div>
46 </body>
47 </html>
48
49 <script>
50 new Vue({
51 el:"#app",
52 data:{
53 arr:['追命',"无情","冷血","铁手"],
54 obj:{
55 name:"追命",
56 age:18,
57 height:180
58 }
59 }
60 });
61 </script>6.使用v-on给元素绑定事件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div id="app">
11 <!-- 需求:点击按钮得到name中的属性 -->
12 <button v-on:click="getValue">点我得到数据v-on:</button>
13 <!-- 简写：直接去掉v-on：改为@ -->
14 <button @click="getValue">点我得到数据@</button>
15 <input type="text" v-model="name" @keydown="getRes($event)">
16 <input type="text" v-model="name" @keydown.13="getR()">
17 </div>
18 </body>
19 </html>
20 <script src="vue2.4.4.js"></script>
21 <script>
22 new Vue({
23 el:"#app",
24 data:{
25 name:"吴彦祖"
26 },
27 // 提供方法
28 methods:{
29 getValue:function(){
30 // 这里面的this指的是vue对象
31 alert(this.name);
32 },
33 getRes:function(ev){
34 // keydown是当我们按下所有键的时候都会触发，我们应该判断只有按下enter键时才应该执行代码
35 // 键盘上的每个键按下都会有一个keycode返回enter键的keycode是13
36 if(ev.keyCode==13) {
37 alert(this.name);
38 }
39 },
40 getR:function(){
41 alert(this.name);
42 }
43 }
44 });
45
46 </script>7.v-if和v-show的区别和使用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=div">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <div id="app">
11 <!-- 需求: 通过按钮来控制v-show中的元素的显示与隐藏 -->
12 <button @click="showHide">点我显示/隐藏</button>
13 <!--
14 v-if可以用来控制元素是否显示：
15 true 显示
16 false 隐藏
17 v-if隐藏会将元素 完全隐藏,用一个占位来进行占位
18
19 -->
20 <span v-if="ifValue" v-text="name"></span><br>
21 <!--
22 v-show可以用来控制元素是否显示：
23 使用display:none;来隐藏元素
24 -->
25 <span v-show="showValue" v-text="name"></span>
26 </div>
27 </body>
28 </html>
29 <script src="vue2.4.4.js"></script>
30 <script>
31 new Vue({
32 el:"#app",
33 data:{
34 name:"ithaha",
35 ifValue:true,
36 showValue:true
37 },
38 methods:{
39 showHide:function() {
40 this.showValue = !this.showValue;
41 }
42 }
43 });
44 </script>三.完成品牌管理案例的删除和增加功能
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 #app {
11 width: 600px;
12 margin: 10px auto;
13 }
14
15 .tb {
16 border-collapse: collapse;
17 width: 100%;
18 }
19
20 .tb th {
21 background-color: #0094ff;
22 color: white;
23 }
24
25 .tb td,
26 .tb th {
27 padding: 5px;
28 border: 1px solid black;
29 text-align: center;
30 }
31
32 .add {
33 padding: 5px;
34 border: 1px solid black;
35 margin-bottom: 10px;
36 }
37 </style>
38 </head>
39
40 <body>
41 <div id="app">
42 <div class="add">
43 编号: <input type="text" v-model="id">品牌名称: <input v-model="name" type="text">
44 <button @click="add">添加</button>
45 </div>
46 <div class="add">品牌名称：<input type="text"></div>
47 <div>
48 <table class="tb">
49 <tr>
50 <th>编号</th>
51 <th>品牌名称</th>
52 <th>创立时间</th>
53 <th>操作</th>
54 </tr>
55 <tr v-if="list.length <= 0">
56 <td colspan="4">没有品牌数据</td>
57 </tr>
58 <!--加入: key="index" 时候必须把所有参数写完整 -->
59 <tr v-for="(item,key,index) in list" :key="index">
60 <td>{{item.id}}</td>
61 <td>{{item.name}}</td>
62 <td>{{item.ctime}}</td>
63 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
64 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
65 </tr>
66 </table>
67 </div>
68
69 </div>
70 </body>
71
72 </html>
73 <script src="vue2.4.4.js"></script>
74 <script>
75 var vm = new Vue({
76 el: "#app",
77 data: {
78 id: 0,
79 name: '',
80 list: [
81 { "id": 1, "name": "it哈哈", "ctime": Date() },
82 { "id": 2, "name": "娃哈哈", "ctime": Date() }
83 ]
84 },
85 methods: {
86 add: function () {
87 //将id和namepush到list数组中
88 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
89 },
90 del:function(id) {
91
92 // 根据id得到下标
93 // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
94 var index = this.list.findIndex(function(item){
95 //根据item中的id属性来判断这个item是否是上面id中
96 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
97 return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外接
98 });
99 // 根据下标在list集合中将对应的数据删除
100 // splice(开始删除的下标，删除的长度)
101 this.list.splice(index,1);
102 }
103 }
104 });
105
106 </script>转载于:https://www.cnblogs.com/mrszhou/p/7844908.html
Vue--系统指令(基础)相关推荐
- vue自定义指令基础
今天,我们讲讲vue自定义指令基础知识,主要包括指令如何创建,如何注册,以及指令的相关属性钩子函数. 指令的注册 我们通过以下方法注册一个全局自定义指令 Vue.directive(name,defi ...
- Vue系统指令（一）
Vue系统指令(一) 插值表达式 {{}} v-cloak v-text v-html v-bind:属性绑定机制 v-on:事件绑定机制 `v-on:click`:点击事件 `v-on`的简写形式 ...
- Vue-基本语法和系统指令
Vue最简单小例子演示使用步骤: 1.导入Vue文件: 2.创建Vue实例对象,设置属性(el.data等等): 3.使用模板语法把数据渲染到页面 <body><div id=&qu ...
- vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件 安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
- Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录 一.VueJS是什么? 二.Vue的优缺点 三.MVVM 数据双向绑定 四.Vue的安装和使用 五.Vue模板语法-文本渲染 六.常用的vue的指令 一.VueJS是什么? 它是一个轻量级MVV ...
- 【Vue知识点- No2.】vue脚手架、基础API
No2.vue脚手架.基础API 必安装-vue-devtools 搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功 vscode-插件补充 v ...
- Vue教程_基础(一)
目录 章节 地址 Vue教程_tips https://blog.csdn.net/weixin_46349544/article/details/124082287 Vue教程_基础(一) http ...
- Vue.js 框架基础笔记
Vue.js 框架基础笔记 1. Vue.js 基本概念 1.1 遇见 Vue.js 1.1.1 为什么要学习 Vue.js 1.1.2 前端开发的复杂化 1.1.3 Vue.js 特点 1.1.4 ...
- vue项目目录结构分析、过滤器、vue文件中基础template、script、style
项目目录结构: 1.在一个项目中一般的目录结构为:my_project------------项目文件夹|____src--------------------------------存放人可以看懂的 ...
- Linux系统进阶-基础IO
Linux系统进阶-基础IO 文章目录 Linux系统进阶-基础IO C语言中的文件接口 对文件进行写入 对文件进行读取 什么是当前路径 默认打开的三个流 stdout & stderr 系统 ...
最新文章
- NET中验证控件表达式汇总
- 5G技术与触觉互联网，一个全新的世界
- springer grammar revise tool
- Spring+Mybatis多数据源配置
- Spring主要用到两种设计模式
- LeetCode 430. 扁平化多级双向链表（DFS）
- android 读写文件 简书,Android10 文件操作适配
- Linux命令（二）
- java struts xml文件设置----自定义日期转换器（局部，及全局类型转换器类）
- 网页实现数据库表信息的CRUD操作
- 『尼罗河魅影之谜』的故事模式与推理内核
- M4A格式的ID3信息提取
- html 字体图标转换工具,HTML5 webfont字体图标的使用
- 配置OSPF负载分担
- c#文件名去掉后缀_C#如何从文件路径中分离出文件名以及文件扩展名
- 如何在滴滴云 DC2 上搭建 MySQL 服务
- LeetCode-SQL（八）
- 基于收敛加密的文件所有权证明协议——毛峥
- 广点通广告第一次点击落地页广告跳转失败，app退出
- 高德地图python爬虫 商家_Python爬虫练习：爬取高德地图地铁线路及站点数据