Vue--系统指令(基础)
Vue概念:vue是mvvm模式的，直接操作dom开销较大，先获取dom，修改里边的内容，但是用vue的话，直接视图和模型绑定，不管是视图的数据发生改变还是模型的数据发生改变，其都是关联的，不需要直接操作dom，效率更高。
一.Vue的简单使用例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script src="../vue2.4.4.js"></script>
<script>
//如果要使用vue需要创建一个新的vm对象
var vm = new Vue({
//要操作的dom元素
el: "#app",
//提供数据
data: {
message: "小追命又回来了"
}
//如果要使用vue来操作视图需要使用vue内置的一些系统指令：
// {{ 属性 }} 输出
});
</script>
</html>
二.基本输出指令
1.{{}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>姓名：{{name}}</p>
<p>年龄：{{age + 1}} ----- {{ age>=18?"成年":"未成年"}} </p>
<!-- 如果大于18说明成年，如果小于18说明未成年 -->
</div>
</body>
<script src="vue2.4.4.js"></script>
<script>
//如果要使用vue需要创建一个新的vm对象
var vm = new Vue({
//要操作的dom元素
el: "#app",
//提供数据
data: {
name: "小追命",
age: 18
}
//如果要使用vue来操作视图需要使用vue内置的一些系统指令：
// {{ 属性 }} 输出
// 输出指令只能输出内容不能加入一些判断：if for语句
});
</script>
</html>
2.v-text和v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-text:可以给元素设置一些文本值，会将字符串原样输出 -->
<div v-text="msg1"> </div>
<!-- v-html 可以给元素设置一些文本值，会将标签解析为dom元素-->
<div v-html="msg2"> </div>
</div>
</body>
</html>
<script src="vue2.4.4.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg1:"<h1>小追命v-text</h1>",
msg2:"<h1>小追命v-html</h1>",
}
});
</script>
3.v-cloak和提前加载vue.js取消元素的闪速的效果
闪烁：由于浏览器先加载dom结构
解决方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 方法2： */
[v-cloak]{
display: none;
}
</style>
<!-- 防止页面闪烁方法1 -->
<!-- <script src="vue2.4.4.js"></script> -->
</head>
<body>
<div id="app">
<!-- 方法2： -->
<span v-cloak> {{name}}</span>
<!-- cloak 解决闪烁原理：就是在加载vue代码之前这个元素先让它在页面上隐藏起来，
等到vue加载成功以后才会将元素显示出来 -->
</div>
</body>
</html>
<script src="vue2.4.4.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"小追命"
}
});
</script>
4.v-mode和v-bind实现双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
1. 如果要给文本框设置属性最好使用：v-model属性来设置
2. 可以让文本框中的数据实行双向绑定
-->
<input type="text" title="帅帅的" v-model="name">
<span v-text="name"></span>
<!-- v-mode 和v-bind要一起才能实现数据双绑定
为了其它的属性也依赖于name属性我们需要学习新的指令:v-bind
-->
<input type="text" v-bind:title="name" v-model="name">
<!--
v-bind可以简写 ":" 号
-->
<input type="text" :title="name" v-model="name">
<!-- <a v-bind:href="del?id=id" >删除元素</a> 这样两个id 是不行的 -->
<a v-bind="{href:'del?id='+id}">删除元素</a>
</div>
</body>
</html>
<script src="vue2.4.4.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
id:2,
name:"帅帅的"
}
});
</script>
5.v-for遍历数组、对象数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 解决闪烁问题 -->
<script src="vue2.4.4.js"></script>
</head>
<body>
<div id="app">
<ul >
<!-- v-for遍历数据:
v-for可以用来遍历数组，item 是遍历的项 index是下标
在vue1.0版本中index是放在item之前的
在vue2.0版本中index是放在item之后的 -->
<li v-for="(item,index) in arr" ::key="index">{{item}}-----------{{index}}</li>
</ul> <!--
v-for遍历对象
参数右三个：
item:当前项
key:键
Index:下标
性能优化 :key="index"
作用: 告诉vue底层将来我的数组中有对象不应该将所有的数据都更新，
只需要更新改变的那一条就行了
原因: 因为有了这个标识后，vue底层会给遍历生成的每一个元素添加一个唯一标识，将来只要与这个标识相关的数据发生了改变，
vue的底层会根据这个唯一的表示找到元素将里面的结构重新生成
注意: key与index关键字跟我们在遍历时出现的item index key没有任何关系，它仅仅只是vue一种优化标识
-->
<ul>
<li v-for="(item,key,index) in obj">
{{item}}----------{{key}}---------{{index}}
</li>
</ul>
</div>
</body>
</html> <script>
new Vue({
el:"#app",
data:{
arr:['追命',"无情","冷血","铁手"],
obj:{
name:"追命",
age:18,
height:180
}
}
});
</script>
6.使用v-on给元素绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 需求:点击按钮得到name中的属性 -->
<button v-on:click="getValue">点我得到数据v-on:</button>
<!-- 简写：直接去掉v-on：改为@ -->
<button @click="getValue">点我得到数据@</button>
<input type="text" v-model="name" @keydown="getRes($event)">
<input type="text" v-model="name" @keydown.13="getR()">
</div>
</body>
</html>
<script src="vue2.4.4.js"></script>
<script>
new Vue({
el:"#app",
data:{
name:"吴彦祖"
},
// 提供方法
methods:{
getValue:function(){
// 这里面的this指的是vue对象
alert(this.name);
},
getRes:function(ev){
// keydown是当我们按下所有键的时候都会触发，我们应该判断只有按下enter键时才应该执行代码
// 键盘上的每个键按下都会有一个keycode返回enter键的keycode是13
if(ev.keyCode==13) {
alert(this.name);
}
},
getR:function(){
alert(this.name);
}
}
}); </script>
7.v-if和v-show的区别和使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=div">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 需求: 通过按钮来控制v-show中的元素的显示与隐藏 -->
<button @click="showHide">点我显示/隐藏</button>
<!--
v-if可以用来控制元素是否显示：
true 显示
false 隐藏
v-if隐藏会将元素 完全隐藏,用一个占位来进行占位 -->
<span v-if="ifValue" v-text="name"></span><br>
<!--
v-show可以用来控制元素是否显示：
使用display:none;来隐藏元素
-->
<span v-show="showValue" v-text="name"></span>
</div>
</body>
</html>
<script src="vue2.4.4.js"></script>
<script>
new Vue({
el:"#app",
data:{
name:"ithaha",
ifValue:true,
showValue:true
},
methods:{
showHide:function() {
this.showValue = !this.showValue;
}
}
});
</script>
三.完成品牌管理案例的删除和增加功能
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head> <body>
<div id="app">
<div class="add">
编号: <input type="text" v-model="id">品牌名称: <input v-model="name" type="text">
<button @click="add">添加</button>
</div>
<div class="add">品牌名称：<input type="text"></div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!--加入: key="index" 时候必须把所有参数写完整 -->
<tr v-for="(item,key,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div> </div>
</body> </html>
<script src="vue2.4.4.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
id: 0,
name: '',
list: [
{ "id": 1, "name": "it哈哈", "ctime": Date() },
{ "id": 2, "name": "娃哈哈", "ctime": Date() }
]
},
methods: {
add: function () {
//将id和namepush到list数组中
this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
},
del:function(id) { // 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，
var index = this.list.findIndex(function(item){
//根据item中的id属性来判断这个item是否是上面id中
//对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外接
});
// 根据下标在list集合中将对应的数据删除
// splice(开始删除的下标，删除的长度)
this.list.splice(index,1);
}
}
}); </script>
Vue--系统指令(基础)的更多相关文章
- Vue 2.0基础语法：系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
- vue学习指南：第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- Vue.js 运行环境搭建详解（基于windows的手把手安装教学）及vue、node基础知识普及
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue总结 01基础特性
最近有时间来总结一下vue的知识: 一.vue.js 被定义成一个开发web界面的前端库,是一个非常轻量的工具.vue.js本身具有响应式和组件化的特点. 我们不需要在维护视图和数据的统一上花费大量的 ...
- Vue.js应用基础
声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- angularjs学习第七天笔记（系统指令学习）
您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令 系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在 系统指令在学习了分成两个部 ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
随机推荐
- 用DataTable填充实体类List
/// <summary> /// 用DataTable填充实体类List /// </summary> public static List<T> FillLis ...
- 枚举进程，线程，堆 CreateToolhelp32Snapshot
Takes a snapshot of the processes and the heaps, modules, and threads used by the processes.对当前系统进行一 ...
- Spring框架中的核心思想包括什么
(1)依赖注入 (2)控制反转 (3)面向切面
- 页面跳转不带 referrer的方法
如果页面中包含了如下 meta 标签,所有从当前页面中发起的请求将不会携带 referer: <meta name="referrer" content="neve ...
- 19-10-15-Night-E
信心赛??高考赛…… 过程 T1码了暴力+随机化. T2没码完.$Kuku$了 T3写了暴力+ puts("86400\n-1"); 骗了点分. T1 ××你告诉我CF E题是T1 ...
- thinkphp浏览历史功能实现方法
这篇文章主要介绍了thinkphp浏览历史功能实现方法,可实现浏览器的浏览历史功能,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了thinkphp浏览历史功能实现方法,分享给大家供大家参考.具 ...
- bootstrab table+表格 select可编辑完整实例
先看下效果图: ============================================================================================ ...
- css3之文本和颜色功能之text-overflow,word-wrap
语法 text-overflow: clip|ellipsis|string; clip修剪文本.ellipsis显示省略符号来代表被修剪的文本.string使用给定的字符串来代表被修剪的文本. 效果 ...
- hive启动一些错误记录
java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMeta ...
- 使用Maven编译运行Storm入门代码(Storm starter)(转)
Storm 官方提供了入门代码(Storm starter),即 Storm安装教程 中所运行的实例(storm-starter-topologies-0.9.6.jar),该入门代码位于 /usr/ ...