vue 笔记一

最新推荐文章于 2024-04-17 16:53:21 发布

weixin_33737134

最新推荐文章于 2024-04-17 16:53:21 发布

阅读量61

点赞数

文章标签： json 测试 javascript ViewUI

本文介绍了Vue.js的基本概念，对比了Vue与Angular的区别，并详细展示了Vue的指令使用、事件处理、模板语法等核心功能，还提供了简易留言板的实际案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue:
读音: v-u-e
view

vue到底是什么?
一个mvvm框架(库)、和angular类似
比较容易上手、小巧
mvc:
mvp
mvvm
mv*
mvx
官网:http://cn.vuejs.org/
手册： http://cn.vuejs.org/api/

vue和angular区别?
vue——简单、易学
指令以 v-xxx
一片html代码配合上json，在new出来vue实例
个人维护项目

适合: 移动端项目,小巧

vue的发展势头很猛，github上start数量已经超越angular
angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护

合适: pc端项目

共同点: 不兼容低版本IE
-------------------------------------------
vue基本雏形:
angular展示一条基本数据:

var app=angular.module('app',[]);

app.controller('xxx',function($scope){  //C
  $scope.msg='welcome'
})

html:

div ng-controller="xxx"
{{msg}}

vue:
html:

<div id="box">
  {{msg}}
</div>

var c=new Vue({
  el:'#box',  //选择器 class tagName
  data:{
    msg:'welcome vue'
  }
});

常用指令:
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

$scope.show=function(){}

指令: 扩展html标签功能,属性

v-model	一般表单元素(input)	双向数据绑定

循环:

v-for="name in arr"
{{$index}}

v-for="name in json"
{{$index}}	{{$key}}

v-for="(k,v) in json"

事件:

v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({
  el:'#box',
  data:{ //数据
    arr:['apple','banana','orange','pear'],
    json:{a:'apple',b:'banana',c:'orange'}
  },
  methods:{
    show:function(){  //方法
      alert(1);
    }
  }
});

显示隐藏:

v-show=“true/false”

bootstrap+vue简易留言板(todolist):

bootstrap: css框架跟jqueryMobile一样
只需要给标签赋予class，角色
依赖jquery

确认删除？和确认删除全部么?
-----------------------------------------
事件:

v-on:click/mouseover......

简写的:

@click=""	推荐

事件对象:

@click="show($event)"

事件冒泡:
阻止冒泡:

a). ev.cancelBubble=true;
b). @click.stop	推荐

默认行为(默认事件):
阻止默认行为:

a). ev.preventDefault();
b). @contextmenu.prevent	推荐

键盘:

@keydown	$event	ev.keyCode
@keyup

常用键:
回车

a). @keyup.13
b). @keyup.enter

上、下、左、右

@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....

-----------------------------------------
属性:

v-bind:src=""
width/height/title....

简写:

:src=""	推荐

<img src="{{url}}" alt="">	效果能出来，但是会报一个404错误
<img v-bind:src="url" alt="">	效果可以出来，不会发404请求

-----------------------------------------
class和style:

:class="" v-bind:class=""
:style="" v-bind:style=""

:class="[red]"  red是数据
:class="[red,b,c,d]"

:class="{red:a, blue:false}"

:class="json"

data:{
  json:{red:a, blue:false}
}

--------------------------
style:

:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"

-----------------------------------------
模板:

{{msg}}	数据更新模板变化
{{*msg}}	数据只绑定一次

{{{msg}}}	HTML转意输出

-----------------------------------------
过滤器:-> 过滤模板数据
系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase	eg:	{{'welcome'| uppercase}}
lowercase
capitalize

currency	钱

{{msg| filterA 参数}}

....

-----------------------------------------
交互:
$http （ajax）

如果vue想做交互

引入: vue-resouce

get:
获取一个普通文本数据:

this.$http.get('aa.txt').then(function(res){
  alert(res.data);
},function(res){
  alert(res.status);
});

给服务发送数据:√

this.$http.get('get.php',{
  a:1,
  b:2
}).then(function(res){
  alert(res.data);
},function(res){
  alert(res.status);
});

post:

this.$http.post('post.php',{
  a:1,
  b:20
},{
  emulateJSON:true
}).then(function(res){
  alert(res.data);
},function(res){
  alert(res.status);
});

jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
  wd:'a'
},{
  jsonp:'cb'  //callback名字，默认名字就是"callback"
}).then(function(res){
  alert(res.data.s);
},function(res){
  alert(res.status);
});

https://www.baidu.com/s?wd=s