1. 首页
  2. 文章中心
  3. js

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

78 阅读 0 评论
我是靠谱客的博主 甜蜜学姐，最近开发中收集的这篇文章主要介绍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")。这个错误要注意，因为报错的信息并不明确。

所有的代码如下：


<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：


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

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

 <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:


data: {
................
nowindex:"",
},
 <button v-on:click="nowindex=index"></button>

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


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

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


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

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

 <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>
<!--
<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）部分：

$(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}}

 {{*msg}}

{{{msg}}}

转换： 

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

{{'WELCOME'|lowercase}}

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

{{'WELCOME'|lowercase|capitalize}}

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

{{12|currency "$"}}   {{12|currency  "￥"}}   {{12|currency "￡"}} 

过滤器官方文档：

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接受普通文本的代码如下：

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

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,无论怎么改参数），代码如下：


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接口失效。


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则原来的数组变成了空数组，无解：

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);
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":[我想要这里的数据啊]不可用，整体的数据格式应该是这样的：

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,它的数据格式是这样的：

{"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"}

要爬数据有点难。

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


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的格式：

 

  1. <div id="div1" >

  2. <input type="text" v-model="styleJson.backgroundColor" >

  3. <input type="text" v-model="styleJson.fontSize" >

  4.  

  5. <br>

  6. <span :style="styleJson">{{txt}}</span>

  7. </div>

  8.  

  9. -----

  10. data:{

  11. txt:"abc",

  12. styleJson:{

  13. color:"red",

  14. width:"200px",

  15. fontSize:"50px",

  16. "font-size":"50px",

  17. backgroundColor:"blue"

  18. }

  19. },

：class建议采用数组格式：

 

  1. <style>

  2. .red1{

  3. color:red

  4. }

  5. .blue2{

  6. background-color: deepskyblue;

  7. }

  8. </style>

  9. -----------------------

  10. <span :class="[arr]">{{txt}}</span>

  11. --------------------------

  12. let mvc=new Vue({

  13. el:"#div1",

  14. data:{

  15.  

  16. arr:["red1","blue2"],

  17.  

  18. },

  19. methods:{}

  20. })

  21.  

 

注意点：

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

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

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

         <input type="text" v-model="styleJson.backgroundColor" >
        <input type="text" v-model="styleJson.fontSize" >

 

 

 

 

 

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

讲师：blue

 

路由

 

最后

以上就是甜蜜学姐为你收集整理的vue基础知识课时3     模板、交互、案例课时4  属性和事件的全部内容，希望文章能够帮你解决vue基础知识课时3     模板、交互、案例课时4  属性和事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

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

相关文章

图片无法显示404，net::ERR_HTTP_RESPONSE_CODE_FAILURE
图片无法显示404，net::ERR_HTTP_RESPONSE_CODE_FAILURE
蓝桥杯 试题 基础练习 矩形面积交
蓝桥杯 试题 基础练习 矩形面积交
蓝桥杯试题 基础练习 矩形面积交 BASIC-18 JAVA前言试题 基础练习 矩形面积交本题试题
蓝桥杯试题 基础练习 矩形面积交 BASIC-18 JAVA前言试题 基础练习 矩形面积交本题试题
bootstrap.css.map 404
bootstrap.css.map 404
vue基础知识课时3     模板、交互、案例课时4  属性和事件
vue基础知识课时3     模板、交互、案例课时4  属性和事件
jquery-1.10.2.min.map是什么，怎么用？
jquery-1.10.2.min.map是什么，怎么用？
bootstrap.min.css.map HTTP/1.1
bootstrap.min.css.map HTTP/1.1" 404 1699
解决应用程序错误，内存不能为“read”或“written”
解决应用程序错误，内存不能为“read”或“written”

评论列表共有 0 条评论

立即
投稿
返回
顶部