版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Fanbin168/article/details/85220935
Vue.Js文件的引入:
<head>
<meta name="viewport" content="width=device-width" />
<title>Vue学习</title>
<!-- 可以引入本地文件,也可以用CDN方式 -->
<script src="~/Scripts/vue.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 生产环境版本,优化了尺寸和速度 -->
</head>
Vue基本结构
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="id" /><!--要删除的id-->
<input type="text" v-model="keywords" /><!--搜索关键字-->
<p>{{msg1}}</p>
<p>{{msg2}}</p>
<table>
<tr><td>Id</td><td>Name</td></tr>
<tr v-for="item in Search(keywords)">
<td v-text="item.id"></td>
<td v-text="item.name"></td>
</tr>
</table>
<input type="button" value="新增" v-on:click="Add" />
<!--v-on为事件指定的方法名称可以不带括号,也可以带括号的-->
<input type="button" value="编辑" v-on:click="Edit()" />
<!--这个id就是v-model绑定的id值,也就是data中的id值-->
<input type="button" value="删除" v-on:click="Del(id)" />
<input type="button" value="搜索" v-on:click="Search(keywords)" />
</div>
<script>
//创建Vue实例:当我们导入Vue.js包后,在浏览器内存中就有了Vue构造函数
var vm = new Vue({
el: "#app", //指我们new出来的这个vm实例要控制的元素(区域)
data: { //data中存放的是el中需要用到的数据
id: '',
keywords: '',
msg1: "欢迎学习vue",
msg2: "你好Vue",
list: [{ id: 1, name: '奔驰' },{ id: 2, name: '宝马' }, { id: 3, name: '奥迪' }]
},
methods: { //methods中定义了我们当前new出来的这个vm实例中所有的可用方法
Add: function () {
alert("新增");
},
Edit: function () {
alert("编辑");
},
Del: function (id) {
alert(id);
},
Search: function (keywords) {
//var newList = []; //搜索到的结果结合
//this.list.forEach((item, index) => {
// if (item.name.indexOf(keywords) != -1) {
// newList.push(item);
// }
//})
//return newList;
//或者用下面这个种方式[注意:ES6中可以实现数组遍历的方法有 forEach,some,filter,findIndex]
//filter返回的是满足条件的集合
return this.list.filter((item,index) => {
if (item.name.includes(keywords)) { //includes()的作用,是查找一个值在不在数组里,若在,则返回true,反之返回false。 基本用法:['a', 'b', 'c'].includes('a')返回 true
return item;
}
})
}
}
})
</script>
</body>
</html>
v-cloak指令
当我们使用{{...}}来渲染数据的时候,如果网速比较慢的情况下,数据还没加载出来,页面上就会出现{{...}}代码
例如:
<div id="app">
<p>{{msg}}</p>
</div>
在网速比较缓慢的情况下页面会出现 {{msg}} 直到等数据加载成功后,才会显示真正的数据。 为了避免这种情况发生,Vue提供了v-cloak指令来解决这个问题。
那么,v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过试验发现,v-cloak并不需要添加到每个标签,只要在el挂载的标签上添加就可以
<html>
<head>
<script src="~/Scripts/vue.js"></script>
<style type="text/css">
/*在这里定义个[v-cloak]样式*/
[v-cloak] {
display: none !important; /*当msg数据加载完毕,vue会自动将display修改为block*/
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "你好Vue"
}
})
</script>
</body>
</html>
v-text指令
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
@*
v-text默认是没有闪烁的问题的。 当msg数据加载完毕,vue会将msg数据插入标识了v-text的标签元素中;
例如: <p v-text="msg"></p> 最后被渲染成<p>你好Vue</p>
注意: v-text是覆盖插入,即便标签有初始值,如<p v-text="msg">哈哈</p>,当msg数据加载完毕后,
vue会将msg的值插入到<p>标签的中间,原有的值“哈哈”将会被覆盖,最后被渲染成<p>你好Vue</p>
*@
<p v-text="msg"></p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg1: "你好Vue",
}
})
</script>
</body>
</html>
v-html指令
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
@*
假设我们的msg数据就是一个标签,我们想将她以标签的形式展示出来,而不是以字符串的形式展示,这时候可以使用v-html
*@
<p v-text="msg1"></p>
<p v-html="msg1"></p>
<p v-html="msg2"></p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg1: "<H1>你好Vue</H1>",
msg2:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
</body>
</html>
v-bind指令 :绑定属性的指令
v-bind指令只能实现数据的单向绑定,从Model绑定到View
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<!--v-bind 是vue中用于绑定属性的指令-->
<input type="button" v-bind:value="myvalue" v-bind:title="mytitle" />
<!--因为mytitle是一个变量,所以它还可以做运算; 例如:这里指定mytitle这个变量与字符串"123"相加-->
<input type="button" v-bind:value="myvalue" v-bind:title="mytitle+'123'" />
<!--v-bind可以简写为英文的冒号 : 后面跟需要绑定的属性名称就可以了 例如::value -->
<input type="button" :value="myvalue" :title="mytitle" />
</div>
<span id="qq_login_btn" data-role="none"></span>
<script>
var vm = new Vue({
el: "#app",
data: {
myvalue:"我是按钮",
mytitle: "我是title"
}
})
</script>
</body>
</html>
v-on指令:用于绑定事件的指令
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<!--v-on是vue中用于绑定事件的指令-->
<input type="button" value="按钮" v-on:click="myClick" />
<!--注意:在vue官方文档中v-on的简写形式是@符号,但是在MVC视图中@符号和 Razor引擎冲突,所有需要用@@的形式来简写v-on指令-->
<input type="button" value="按钮" @@click="myClick" />
</div>
<span id="qq_login_btn" data-role="none"></span>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "张三",
age:25
},
methods: {
myClick: function () {
//注意:在vue实例vm中,如果想要获取data中的数据,或者想要调用methods中的方法,
//必须通过this.属性名或this.方法名来进行访问;这里的this就表示我们new出来的vm对象实例
alert(this.name);
}
}
})
</script>
</body>
</html>
v-on指令的stop事件修饰符:阻止冒泡
<html>
<head>
<script src="~/Scripts/vue.js"></script>
<style>
.box {
border: 1px solid red;
width: 80px;
height: 50px;
background-color: bisque;
line-height: 50px;
text-align: center;
margin-bottom:40px;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<label>这是没有阻止button被点击后的所触发的事件冒泡</label>
<div class="box" @@click="divClick">
<!--在click事件后面加一个.stop就可以阻止事件冒泡-->
<input type="button" value="按钮" @@click="btnClick" />
</div>
<label>这是阻止了button被点击后的所触发的事件冒泡</label>
<div class="box" @@click="divClick">
<!--在click事件后面加一个.stop就可以阻止事件冒泡-->
<input type="button" value="按钮" @@click.stop="btnClick" />
</div>
</div>
<span id="qq_login_btn" data-role="none"></span>
<script>
var vm = new Vue({
el: "#app",
data: {
userName: "Hello",
},
methods: {
btnClick: function () {
alert("点击了button按钮");
},
divClick: function () {
alert("点击了div");
}
}
})
</script>
</body>
</html>
v-on指令的 prevent事件修饰符:阻止默认事件
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<!--a标签有一种默认的行为,就是点击它后会跳转到指定的网页-->
<!--假如就像点击这个a标签,触发我指定的事件,而不是去执行这个a标签的默认行为(跳转)怎么办呢?-->
<!--vue中,只要在事件名称的后面.prevent就可以阻止事件的默认行为了-->
<a href="http://www.baidu.com" v-on:click.prevent="aClick">去百度</a>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
aClick: function () {
alert("点击了a标签");
}
}
})
</script>
</body>
</html>
v-on指令的once事件修饰符:事件只触发一次
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<!--a标签有一种默认的行为,就是点击它后会跳转到指定的网页-->
<!--假如就像点击这个a标签,触发我指定的事件,而不是去执行这个a标签的默认行为(跳转)怎么办呢?-->
<!--vue中,只要在事件名称的后面.prevent就可以阻止事件的默认行为了-->
<!--事件修饰符还可以连写, 比如v-on:click.prevent.once 就表示阻止默认事件,同时事件只触发一次-->
<!--v-on:click.prevent.once 与v-on:click.once.prevent效果是一样的-->
<a href="http://www.baidu.com" v-on:click.prevent.once="aClick">去百度</a>
<input type="button" value="只触发一次事件的按钮" v-on:click.once="aClick" />
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
aClick: function () {
alert("点击了");
}
}
})
</script>
</body>
</html>
v-on指令的 capture事件修饰符
.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式
即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
就是谁有该事件修饰符,就先触发谁。
代码如下:
<body>
<div id="app" v-cloak>
<!--在click事件后面加一个.capture就可以添加事件侦听器时使用事件捕获模式-->
<div class="box" @@click.capture="divClick">
<input type="button" value="按钮" @@click="btnClick" />
</div>
</div>
<span id="qq_login_btn" data-role="none"></span>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
btnClick: function () {
alert("点击了button按钮");
},
divClick: function () {
alert("点击了div");
}
}
})
</script>
</body>
我们可以看到当我们点击了按钮,最先触发的是 点击了div,然后才触发了点击了button按钮,这就是上面所说的则由外而内触发
v-model指令 :实现数据的双向绑定
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<p v-text="userName"></p>
<!--v-model能实现表单元素和Model中数据的双向绑定-->
<!--注意:v-model只能运用在表单元素中,如:input(radio,checkbox,text,address,email....) select,textarea 等等-->
<input v-model="userName" />
</div>
<span id="qq_login_btn" data-role="none"></span>
<script>
var vm = new Vue({
el: "#app",
data: {
userName: "Hello",
}
})
</script>
</body>
</html>
Vue中通过属性绑定为元素设置class样式
<html>
<head>
<script src="~/Scripts/vue.js"></script>
<style>
.a {
color: red;
}
.b {
font-size: x-large;
}
.c {
font-style: italic
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!--平常我们普通的设置样式加-->
<div class="a b c">1:猥琐发育,别浪</div>
<!--采用v-bind设置样式: 数组加载样式-->
<div v-bind:class="['a','b','c']">2:猥琐发育,别浪</div>
<!--采用v-bind设置样式: 数组加载样式,并在数组中做三元表达式条件来设置样式-->
<div v-bind:class="['a','b', isShow?'c':'']">3:猥琐发育,别浪</div>
<!--采用v-bind设置样式: 数组中嵌套使用:只有在isShow的值为true的时候,才会显示c样式-->
<div v-bind:class="['a','b',{'c':isShow}]">4:猥琐发育,别浪</div>
<!--采用v-bind设置样式: 直接使用对象(a,b,c这些类名可以不用单引号引起来,也可以用单引号引起来)-->
<div v-bind:class="{a:true,b:true,'c':true}">5:猥琐发育,别浪</div>
<!--采用v-bind设置样式: 直接使用对象,这个对象也可以放到Data中-->
<div v-bind:class="divClass">6:猥琐发育,别浪</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isShow: true,
divClass: { a: true, b: true, 'c': true }
},
})
</script>
</body>
</html>
Vue通过属性绑定为元素设置style行内样式
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app" v-cloak>
<!--第一种:直接写在元素上; 注意:如果对象的键中间有-线 则不能省略单引号,键的值也需用用单引号引起来-->
<div v-bind:style="{color:'red', 'font-size':'50px'}">猥琐发育,别浪</div>
<!--第二种:写在Data中; 注意:如果对象的键中间有-线 则不能省略单引号,键的值也需用用单引号引起来-->
<div v-bind:style="divClass1">猥琐发育,别浪</div>
<!--第三种:写在Data中; 假设Data中设定了2种样式,在这个元素上我都上使用,可以使用[]的形式-->
<!--注意:数组中的样式变量不要加单引号-->
<div v-bind:style="[divClass1,divClass2]">猥琐发育,别浪</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isShow: true,
divClass1: { color: 'red' },
divClass2: {'font-size':"50px"}
}
})
</script>
</body>
</html>
v-for指令:遍历
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--循环普通数组:1个参数的for-->
<p v-for="item in list">{{item}}</p>
<!--循环普通数组:2个参数的for-->
<p v-for="(item,index) in list">索引:{{index}}--值:{{item}}</p>
<!--循环复杂数组:1个参数的for-->
<p v-for="item in list2">{{item.name}}</p>
<!--循环复杂数组:2个参数的for-->
<p v-for="(item,index) in list2">索引:{{index}}--id值:{{item.id}} --name值:{{item.name}}</p>
<!--循环对象:第一个参数是必选的,第二个,第三个是可以选的-->
<p v-for="(val,key,index) in user">索引:{{index}}--ket值为{{key}}--val值为:{{val}}</p>
<!--遍历数字:这里输出1,2,3,4,5,6,7,8,9,10-->
<!--注意,遍历数字是从1开始的,而不是0哦-->
<p v-for="item in 10">{{item}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
list: [1, 2, 3, 4, 5, 6],
list2: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '赵六' }
],
user: { id: 1, name: "lily", age: 25, address: "北京朝阳三里屯", email: '[email protected]' },
}
})
</script>
</body>
</html>
v-for中key的使用注意事项
当在vue.js中用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略,如果数据项的顺序被改变vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给vue一个提示,以便它能够跟踪每个节点的身份,从而重用新排序现有的元素,你需要为每项提供唯一的key属性
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-for中key的使用注意事项-->
<!--
当在vue.js中用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略,如果数据项
的顺序被改变vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保
它在特定索引下显示已被渲染过的每个元素。
为了给vue一个提示,以便它能够跟踪每个节点的身份,从而重用新排序现有的元素,你需要为每项
提供唯一的key属性
-->
<label>
id
<input type="text" v-model="id" />
</label>
<label>
name
<input type="text" v-model="name" />
</label>
<input type="button" value="添加" v-on:click="add" />
<!--为了解决下面描述的问题。你需要为每项提供唯一的key属性,其实就是在v-for后面加一个 v-bind:key
让这个key绑定遍历项的id,当然也可以绑定其他的值,比如name,只要值唯一就行了,因为id一般是唯一的,所以我们绑定的是item.id-->
<p v-for="(item) in list" v-bind:key="item.id">
<input type="checkbox" value="{{item.id}}" />
{{item.id}}--{{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
list: [
{ "id": 1, name: "嬴政" },
{ "id": 2, name: "李斯" },
{ "id": 3, name: "韩非" },
{ "id": 4, name: "荀子" }
]
},
methods: {
add: function () {
//this.list.push({ "id": this.id, "name": this.name }) //往后面追加没问题
//假设从开始追加数据:我们开始勾选住荀子,然后开始追加一项
//假设我们追加一个 id=5,name="赵高"的项。这时候我们会发现,之前勾选的荀子,变成了韩非了
//这是因为vue 只知道你勾选了索引为3的那一项(索引从0开始),当你从开始位置新增一个元素,
//那么你之前勾选的索引为3的那一项,现在索引位置已经变成4了。而前面的韩非变成了索引为3了
//所以才出现之前勾选的荀子,现在变成了韩非了
//为了解决这个问题。你需要为每项提供唯一的key属性,其目的就是让索引与绑定的值关联起来。
this.list.unshift({ "id": this.id, "name": this.name })
}
}
})
</script>
</body>
</html>
没有加v-bind:key="item.id"的效果
添加了v-bind:key="item.id"的效果