vue基础知识课时3 模板、交互、案例课时4 属性和事件

143 阅读 0 评论 95 点赞

我是靠谱客的博主甜蜜学姐，这篇文章主要介绍vue基础知识课时3 模板、交互、案例课时4 属性和事件，现在分享给大家，希望可以做个参考。

讲师：陈潇冰

课时1 vue基础、常用指令

1.官网下载： https://cn.vuejs.org/v2/guide/installation.html （也可以直接github）

手册（api文档）：https://cn.vuejs.org/v2/api/

2.vue angular的区别

官网中文，容易读;指令有相同有不同;vue个人维护angular由google维护;vue小巧适合移动端,angular1.0适合PC；

（相同点）两者都不兼容低版本的IE；

3.vue的雏形

数据的双向绑定：Vue对象中的data数据发生了改变，则用到该数据的所有的地方都发生了改变。

指令：vue中的指令扩张了HMTL的功能（所有的mvc前端框架的指令都可以这么理解，比如vue/angular...）。

常见的指令：

v-model: 等价于表单元素里的value（表单元素input，常见与Input标签） ,基本格式v-model={{}}。

v-for: 他的基本格式是：v-for="value in json",存在3个参数，value、$key、$index(索引，序列数字)。常见于li标签。复杂格式：v-for="k,v in json"。

(事件指令系列) v-on:click=fn v-on:movseover=fn v-on:dblclick=fn 等等：注意写法on后面跟的是“：”,具体的操作（click）后跟的是“=fn”。

v-show : v-show="true/flase",其中，“true/false”可以用data中的数据来代替。

data：

可以是字符串、数字、tureflase、数组arr、json等。

methods:

（格式）add:function (){

this.arr.push("mugua");

}

注意点：

1. 创建的Vue对象中的"Vue"首字母必须得是大写

2.Vue对象中关于选择器的选择，是与CSS、Jquery等通用的。也有class、id等。表明的是该Vue对象中的data、methods的作用范围。

3.在涉及到data中的数据的时候，元素属性不带{{}}，元素内容需要加{{}}。具体而言，<input type="text" v-model="msg2"> ，v-model中是不带有{{}}的。

4.新版的vue在使用v-for的时候，如何需要使用key ,$index,则必须得是 <li v-for="value,key,$index in json">的格式，单一的格式比如 <li v-for="value in json">使用$index,key会报defind的错误。

5.在使用data中的数据的时候，data不用带进去，比如this.arr.push("mugua")是正确的，加了data则是错误的 this.data.arr.push("mugua")。这个错误要注意，因为报错的信息并不明确。

所有的代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<script>
$(function () {
//1. 创建的Vue对象中的"Vue"首字母必须得是大写
let mvc = new Vue({
el: ".box",
data: {
msg: "welcome to vue",
msg2: 66666,
arr: ['apple', 'orange', 'pear', 'mihoutao'],
json: {
a: 'apple',
b: 'orange',
c: 'pear',
d: "mihoutao"
}
},
methods: {
// 你这都写的啥？
// add:{
//
// this.data.arr.push("mugua")
// }
add: function () {
this.data.arr.push("mugua");
// this.arr.push("mugua");
// not a function!
// this.json.push("muguanai");
}
}
});
})
</script>
</head>
<body>
<div class="box">
<input type="text" v-model="msg2">
<input type="text" v-model="arr">
<input type="text" v-model="json">
<br>
{{msg}}
<br>
<ul>
<!--
元素内容必须得带{{}}，你怎么又忘记了。！-->
<li v-for="value in json">{{value}}</li>
<!--
<li v-for="value in arr">{{$index}}</li>-->
<!--
<li v-for="value in json">{{$key}}</li>-->
<li v-for="value,key,$index in json">{{value}} :{{key}} :{{$index}}</li>
<li v-for="value in arr">{{value}}</li>
</ul>
<input type="button" value="add()" v-on:click="add" v-show="true">
<li v-for="value in arr">{{value}}</li>
</div>
</body>

课时2 小项目：简易留言（又称之为to-do-list）

课程中涉及到太多的关于bootstrap的相关知识点。这里有个比较好的关于bootstrap的文档：

https://v2.bootcss.com/base-css.html

bootstrap.css.map的作用：（简单的说，就是把太过复杂的css文件中的出现的变量记录下来并一一对应，这在bootstrap.min.css vs bootstrap.min.css.map中尤其明显，因为前者压缩之后的简写很有纪律的必要。）

https://www.cnblogs.com/wangzisheng/p/8780913.html

改节课涉及到2个部分，建议在自我实践的时候，先用bootstrap搭出基本的样式，再来尝试vue的一些操作。

bootstrap的学习记录部分详情见，不再重复赘述：

https://blog.csdn.net/u011483658/article/details/110950266

注意点：

1.用户（而非开发者）在使用输入框进行输入的时候，是可以改变v-model中的数据的（事实上，这个是输入框input的基本作用，任何框架或工具在使用Input的时候都可以如此使用。）。而在vue中，v-model中的数据改变了，则相关的所有涉及到该数据的地方都会发生改变（联级作用）。

2.接1：属性中的数据不能随便固定，只能通过new出来的vue对象中的data将数据固定。否则会报错，且错误难以查询。

3.数组中的元素是json格式，插入的时候，要做些修改，将原先的“散装”元素组装成json：

复制代码

1
2
3
4
5

this.mydatas.push({
name:this.name,
age:this.age
});

4.在使用v-for的时候，需要使用index的时候，则v-for当中就必须要有index， v-for="item in mydatas”是无法使用index的，不能简写：

复制代码

1
 <tr class="warning" v-for="item,index in mydatas">

5.需求的问题

在本次的项目中，最终形成的数据格式是一个数组。在这个数组中，每个的具体的元素都是json:：[json1,json2,json3,.........]。在确定了这种具体的数据格式之后，本项目就已经是完成了一大半了。这里有把具体的需求转化为一个具体的数据格式的过程。

6.模态框（弹出框的问题）：

点击按钮，弹出模态框，模态框中也有“确定”“取消”。因此，按钮并不是执行的最终结果，点击按钮后弹出的“确定”“取消”才是。所以，有模态框的时候，methods中的方法是大概率需要放在模态框中的。

7.单一选项的删除操作，vue和原生js/jquery的区别

js/jquery在进行删除操作的时候，先删除掉页面中的对应的元素，然后再对相应的数组进行操作。

vue在进行此类操作的时候，直接对相应的数组进行操作，当在对应的数组中删除掉对应的数据之后，页面中的元素会自动消失，不需要再对其另外操作。步骤如下：

i. 添加nowindex:

复制代码

1
2
3
4
5

data: {
................
nowindex:"",
},

复制代码

1
 <button v-on:click="nowindex=index"></button>

ii .精准添加删除方法（精准添加：点击按钮->弹出模态框->模态框中的“确定”按钮）

复制代码

1
2
3

<button v-on:click="del" >确定</button>

iii.删除方法的逻辑（注意要有“this”,否则会报错：xxx is not definded）

复制代码

1
2
3
4
5
6

del:function () {
//
mydatas not definded?
this.mydatas.splice(nowindex,1);
}

值得注意的是：index是在v-for中出现的，也只能用在v-for中，不能将其独立成功能模块：

复制代码

1
2
3
4
5
6
7
8
 <tr class="warning" v-for="item,index in mydatas">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td class="text-right">
<button v-on:click="nowindex=index" class="btn-primary btn-sm " data-toggle="modal" data-target="#myModal2">删除</button>
</td>
</tr>

主体架构部分（H5+引用）：

复制代码

<html lang="en">
<head>
<meta charset="UTF-8">
<title>to-do-list</title>
<link rel="stylesheet" href="../../bootstrap.css">
<script src="../../jquery-1.12.4.js"></script>
<script src="../../vue.js"></script>
<script src="../../bootstrap.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="box" id="box">
<form>
<legend class="text-center text-info">个人信息填写</legend>
<fieldset>

<label>姓名：</label>
<br>
<input type="text" placeholder="请填写你的姓名" class="form-control" v-model="name">
</fieldset>
<fieldset>
<label>年龄：</label>
<br>
<input type="text" placeholder="请填写你的年龄" class="form-control" v-model="age">
</fieldset>
</form>
<br>
<br>
<div class="text-center">
<button class="btn btn-primary" v-on:click="add">添加</button>
<input class="btn btn-danger" type="reset"
v-on:click="reset">
</div>
<hr>
<table class="table table-bordered
table-striped
table-condensed table-hover ">
<caption>
<h1 class="text-danger text-center">用户信息表</h1>
</caption>
<tr class="success">
<th>序号</th>
<th>姓名</th>
<th>年纪</th>
<th>操作</th>
</tr>








<tr class="warning" v-for="item,index in mydatas">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td class="text-right">
<button v-on:click="nowindex=index" class="btn-primary btn-sm " data-toggle="modal" data-target="#myModal2">删除</button>
</td>
</tr>
<tr v-show="mydatas.length!=0">
<td colspan="4" class="text-right">
<button
class="btn-danger btn-sm" data-toggle="modal" data-target="#myModal">删除全部</button>
</td>
</tr>
<tr v-show="mydatas.length==0">
<td colspan="4" class="text-center text-muted">
你还没添加信息
</td>
</tr>



<div id="myModal" class="modal
fade" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel" class="text-danger text-center">确认删除全部？</h3>
</div>



<div class="modal-footer">
<button v-on:click="delAll" class="btn btn-primary" data-dismiss="modal">确定</button>
<button class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>

<div id="myModal2" class="modal
fade" role="dialog"
aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel2" class="text-danger text-center">确认删除？</h3>
</div>



<div class="modal-footer">
<button v-on:click="del" class="btn btn-primary" data-dismiss="modal">确定</button>
<button class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</table>
</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<html lang="en">
<head>
<meta charset="UTF-8">
<title>to-do-list</title>
<link rel="stylesheet" href="../../bootstrap.css">
<script src="../../jquery-1.12.4.js"></script>
<script src="../../vue.js"></script>
<script src="../../bootstrap.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="box" id="box">
<form>
<legend class="text-center text-info">个人信息填写</legend>
<fieldset>
<!--
<legend >Legend</legend>-->
<label>姓名：</label>
<br>
<input type="text" placeholder="请填写你的姓名" class="form-control" v-model="name">
</fieldset>
<fieldset>
<label>年龄：</label>
<br>
<input type="text" placeholder="请填写你的年龄" class="form-control" v-model="age">
</fieldset>
</form>
<br>
<br>
<div class="text-center">
<button class="btn btn-primary" v-on:click="add">添加</button>
<input class="btn btn-danger" type="reset"
v-on:click="reset">
</div>
<hr>
<table class="table table-bordered
table-striped
table-condensed table-hover ">
<caption>
<h1 class="text-danger text-center">用户信息表</h1>
</caption>
<tr class="success">
<th>序号</th>
<th>姓名</th>
<th>年纪</th>
<th>操作</th>
</tr>
<!--
<tr class="info ">-->
<!--
<td>1</td>-->
<!--
<td>zhubiao</td>-->
<!--
<td>16</td>-->
<!--
<td class="text-right">-->
<!--
<button class="btn-primary btn-sm ">删除</button>-->
<!--
</td>-->
<!--
</tr>-->
<tr class="warning" v-for="item,index in mydatas">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td class="text-right">
<button v-on:click="nowindex=index" class="btn-primary btn-sm " data-toggle="modal" data-target="#myModal2">删除</button>
</td>
</tr>
<tr v-show="mydatas.length!=0">
<td colspan="4" class="text-right">
<button
class="btn-danger btn-sm" data-toggle="modal" data-target="#myModal">删除全部</button>
</td>
</tr>
<tr v-show="mydatas.length==0">
<td colspan="4" class="text-center text-muted">
你还没添加信息
</td>
</tr>
<!--
以下为模态框-->
<!--
<a href="#myModal" role="button" class="btn" data-toggle="modal">查看演示案例</a>-->
<!--
modal1:modal for "删除全部"-->
<div id="myModal" class="modal
fade" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel" class="text-danger text-center">确认删除全部？</h3>
</div>
<!--
<div class="modal-body">-->
<!--
<p>One fine body…</p>-->
<!--
</div>-->
<div class="modal-footer">
<button v-on:click="delAll" class="btn btn-primary" data-dismiss="modal">确定</button>
<button class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!--
modal2:for "删除"-->
<div id="myModal2" class="modal
fade" role="dialog"
aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel2" class="text-danger text-center">确认删除？</h3>
</div>
<!--
<div class="modal-body">-->
<!--
<p>One fine body…</p>-->
<!--
</div>-->
<div class="modal-footer">
<button v-on:click="del" class="btn btn-primary" data-dismiss="modal">确定</button>
<button class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</table>
</div>
</body>
</html>

JS（jquery）部分：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(function () {
let mvc = new Vue({
el: "#box",
data: {
mydatas: [],
name: "",
age: "",
nowindex:"",
index:"",
},
methods: {
add: function () {
// 你这都写的啥？请整理成json格式！
// this.myadatas.push(this.name);
// this.myadatas.push(this.age);
this.mydatas.push({
name:this.name,
age:this.age
});
this.name="";
this.age="";
},
reset:function (){
this.name=" ";
this.age=" ";
},
delAll:function (){
this.mydatas=[];
},
// setnowindex:function (){
//
this.nowindex=this.index;
// },
del:function () {
//
mydatas not definded?
this.mydatas.splice(this.nowindex,1);
}
}
});
})

课时3 模板、交互、案例

模板

{{{msg}}}

转换：

常用：{{'welcome '|uppercase}}

连写：{{ msg |filterA |filterB }}

参数：{{msg |filterA '参数'}}

过滤器官方文档：

https://cn.vuejs.org/v2/guide/filters.html

https://cn.vuejs.org/v2/api/index.html#Vue-filter

交互

vue本身是不支持交互的。当需要做交互的时候，需要额外的引入一个文件vue-resource。（git下载，路径：vue-resource-->dist-->vue-resource.js）

$http(ajax) ，自带。

提到交互，就只这3种：get ,post , jsonp

get

格式：

（普通文本）this.$http.get("文件名.txt").then(function (res) { “这里填写成功的内容” },function (err){ “这里填写失败的内容”});

（php文本，需要向服务器发送数据）this.$http.get("xx.php",{a:1,b:2}).then(function (res) { “这里填写成功的内容” },function (err){ “这里填写失败的内容”});

注意点：

1. Do not mount Vue to <html> or <body> - mount to normal elements instead. -----不要将body作为选择器，有的版本会报这个错误。

2.webstorm自带的服务器无法打开编译php文件，但是可以通过普通文本（php文本也是当作普通文本处理，只能显示源码。）

交互需要在apache(php只能选择apache而不能tomcat)的服务器环境条件下才可以使用：

https://blog.csdn.net/u011483658/article/details/111559725。

3 .get接口在使用php文本的时候，失效，多次尝试都不可用。不知何故？（不报错，但是结果一直都是0,无论怎么改参数）

get接受普通文本的代码如下：

复制代码

1
2
3
4
<div id="box">
<input type="button"
value="打开测试文件" @click="f1_get()">
</div>

复制代码

1
2
3
4
5
6
7
8
9
10

methods:{
f1_get:function () {
this.$http.get("test.txt").then(function (res) {
alert(res.status);
alert(res.data);
},function (err){
});
}
}

get接口在使用php文本的时候，失效，多次尝试都不可用，学着post接口添加{ emulateJSON:true}也无效。不知何故？（不报错，但是结果一直都是0,无论怎么改参数），代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

methods: {
f1_get: function () {
this.$http.get('get.php',
{
a: 1,
b: 5
},
// { emulateJSON:true}
).then(function (res) {
// this.$http.get("test.txt").then(function (res) {
//alert(res.status);
alert(res.data);
}, function (err) {
});
}

post

{ emulateJSON:true}不可省，否则结果一直是0,还不报错，post接口失效。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

f1_get: function () {
this.$http.post('post.php',
{
a: 1,
b: 5
},
//此处{ emulateJSON:true}不可省，否则结果一直是0,还不报错，post接口失效。
{ emulateJSON:true}
).then(function (res) {
// this.$http.get("test.txt").then(function (res) {
//alert(res.status);
alert(res.data);
}, function (err) {
});
}

jsonp

获取本域之外的接口

中华搜索出现跨域问题。

360搜索能爬出来，但是只有"errorcode":0,"ext":"nlpv=sug_base4_zzdt"，"version":"revise"之类的可用，而关键数据"query":"a","result":[我想要这里的数据啊]不可用。

百度更难弄。输入之后根本没有数据能爬出来，直接是一个搜索页面。且url地址栏是一团乱七八糟的东西。

firefox调试器功能不全面，有问题。改用chrome。

改用chrome之后，

中华搜索依旧出现跨域问题。

搜狗搜索出现“Uncaught TypeError: Cannot read property 'sug' of undefined at ajajjson?callback=_jsonpb7n98iwmhi:1”的问题，this.$http.jsonp("url"，{}，{}).then,url添加callback则原来的数组变成了空数组，无解：

复制代码

1
2
3
https://www.sogou.com/suggnew/ajajjson?key=abcd
不加callback:
indow.sogou.sug(["abcd",["abcdefg字母表","abcd什么意思","abcd英语26个字母","abcd英文歌","abcdefg","abcd式词语大全","abcdefg的含义是什么意思","abcd什么意思恋爱","abcd的词语","abcdefg26个字母表"],["0;6;0;0","1;6;0;0","2;6;0;0","3;4;0;0","4;4;0;0","5;4;0;0","6;6;0;0","7;2;0;0","8;4;0;0","9;4;0;0"],["","","","","","","","","",""],["0"],"","suglabId_1"],-1);

复制代码

1
2
3
https://www.sogou.com/suggnew/ajajjson?callback?key=abcd
添加callback:
window.sogou.sug(["",[],[],[],[],[],["ConditionUmis"],[""],[],["0"]],-1);

意思很明显，搜狗搜索人家不允许你爬人家的数据。通过callback将数据重置成空数组。

360搜索可以使用jsonp，但是使用后callback后出现的数据也是空数组。只有"errorcode":0,"ext":"nlpv=sug_base4_zzdt"，"version":"revise"之类的可用，而关键数据"query":"a","result":[我想要这里的数据啊]不可用，整体的数据格式应该是这样的：

复制代码

1
2
suggest_so({"errorcode":0,"ext":"nlpv=sug_base4_zzdt","query":"abcd","result":[{"ci":"11.064693","ctrScore":"0.471972","rankScore":"241.208130","recallScore":"0.839907","recallType":"nginx'kg'baidu'xgb","rerankScore":"241.208130","word":"abcdefg字母表"},{"ci":"1.644274","ctrScore":"0.013424","rankScore":"0.022072","recallScore":"0.090940","recallType":"xgb","rerankScore":"0.022072","word":"abcdefg字母表大小写"}],"src":"","ssid":"89d73496541f43bca3b8f344ff55b6af","version":"revise"}
)

百度搜索可以使用jsonp，但是与360一样无法查询。爬出来的数据中的q,p,g（360还部分可查询，百度都不可查询）都是undefinded,它的数据格式是这样的：

复制代码

1
{"q":"ab","p":false,"g":[{"type":"sug","sa":"s_1","q":"abcc的成语"},{"type":"sug","sa":"s_2","q":"abab式的词语"},{"type":"sug","sa":"s_3","q":"abac式词语大全"},{"type":"sug","sa":"s_4","q":"abb式的词语"},{"type":"sug","sa":"s_5","q":"ab型血"},{"type":"sug","sa":"s_6","q":"abo"},{"type":"sug","sa":"s_7","q":"ab型血为什么叫贵族血"},{"type":"sug","sa":"s_8","q":"abac的成语"},{"type":"sug","sa":"s_9","q":"about"},{"type":"sug","sa":"s_10","q":"above"}],"slid":"5689024787140323011","queryid":"0x2479e6f3e426c3"}

要爬数据有点难。

不管怎样，还是将视频中的代码摘录如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

f1_get: function () {
this.$http.jsonp('https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&req=2&csor=2&pwd=a',
{
wd:'ab'
},
{
jsonp:"cb"
}).then(function (res) {
// this.$http.get("test.txt").then(function (res) {
// alert(res.status);
alert(res.data);
alert(res.data.q);
alert(res.data.p);
console.log(res.data.g);
}, function (err) {
});
}

课时4 属性和事件

常用的事件（事件以及事件的复合）

鼠标事件

click dbclick(双击) contextmenu(右击)

事件的简写：@click @dbclick @contextmenu

方法中需要使用事件event的时候，$event不可省：<button @click="fn($event)"></button>。

vue是如何阻止冒泡和阻止默认事件的：

@click.stop <=====> ev.cancelBubble=true或者ev.propgation();

@click.prevent<============>ev.preventDefult

键盘事件

keyup keydown

区别：在方法中alert()，keyup先弹出事件，手动点击之后，输入内容才会显示在页面；keydown，则是先显示输入的内容，再弹出事件，弹出事件对输入的内容不存在影响。

存在这样一个等式：

@keyup.enter === @keyup.13 <====> if(ev.keyCode==13)

上面的等式对于键盘上的所有的键几乎都可以使用：@keyup.a==@keyup.65

属性

:class :style是如何通过data中的数据找到层叠样式表css的：（一般属性直接在data中查找,这两者需要进一步上溯到css）

:class :style区别于一般的属性，一般的属性只需要“xx(这里是一般属性)”，比如:width="w"，即只需要加“”即可。而对于:class :style来说，通常是用数组或者json来表示的。由于存在这样一个特性，在vue中的data中的关于:class :style所需要的相关数据，都被“定位”到层叠样式表css中了！

:style建议采用json的格式：

复制代码

<div id="div1" >
<input type="text" v-model="styleJson.backgroundColor" >
<input type="text" v-model="styleJson.fontSize" >
<br>
<span :style="styleJson">{{txt}}</span>
</div>
-----
data:{
txt:"abc",
styleJson:{
color:"red",
width:"200px",
fontSize:"50px",
"font-size":"50px",
backgroundColor:"blue"
}
},

：class建议采用数组格式：

复制代码

<style>
.red1{
color:red
}
.blue2{
background-color: deepskyblue;
}
</style>
-----------------------
<span :class="[arr]">{{txt}}</span>
--------------------------
let mvc=new Vue({
el:"#div1",
data:{
arr:["red1","blue2"],
},
methods:{}
})

注意点：

1.:style建议采用json格式，:class建议采用数组格式，无论是json格式还是素组格式都建议在vue-data中写全，不要分在h5结构中补全。

2.驼峰方式（fontSize:"50px"）和“-”连写方式（"font-size":"50px","font-size"双引号不可省）虽然都可以采用，但是建议采用驼峰方式

3.在需要：style或者：class中的json的时候，可以用json.xxx调用xxx属性，比如：

---------------------

讲师：blue

路由

最后

以上就是甜蜜学姐最近收集整理的关于vue基础知识课时3 模板、交互、案例课时4 属性和事件的全部内容，更多相关vue基础知识课时3 内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：js
浏览次数：143 次浏览
发布日期：2024-01-08 22:30:24
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ogfy_14__7__26_x.html

vue基础知识课时3 模板、交互、案例课时4 属性和事件

课时1 vue基础、常用指令

课时2 小项目：简易留言（又称之为to-do-list）

课时3 模板、交互、案例

模板

交互

课时4 属性和事件

常用的事件（事件以及事件的复合）

鼠标事件

键盘事件

属性

路由

最后

评论列表共有 0 条评论

发表评论取消回复

vue基础知识课时3 模板、交互、案例课时4 属性和事件

课时1 vue基础、常用指令

课时2 小项目： 简易留言（又称之为to-do-list）

课时3 模板、交互、案例

模板

交互

课时4 属性和事件

常用的事件（事件以及事件的复合）

鼠标事件

键盘事件

属性

路由

最后

微信扫一扫：分享

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

课时2 小项目：简易留言（又称之为to-do-list）

发表评论取消回复