vue笔记

分手后的思念是犯贱 2022-06-02 02:51 179阅读 0赞

读音: v-u-eview

vue到底是什么?  
一个mvvm框架(库)、和angular类似  
比较容易上手、小巧  
官网:[http://cn.vuejs.org/][http_cn.vuejs.org]  
手册： [http://cn.vuejs.org/api/][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

遍历数据

事件

事件对象:  
@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}
        }

如果你也想根据条件切换列表中的 class，可以用三元表达式：

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy\[1\] 时才添加 activeClass。  
————————–  
style:  
:style=”\[c\]”  
:style=”\[c,d\]”  
注意: 复合样式，采用驼峰命名法  
:style=”json”

数据只绑定一次

<div id="box"> <input type="text" v-model="msg"> { { msg}} //数据原样输出 <br>{ {*msg}} //数据只绑定一次 <br>{ { { msg}}} //能解析html </div>

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

{
       {msg| filterA}}
    {
       {msg| filterA | filterB}}
    
    uppercase //转换成大写   eg: {
       {'welcome'| uppercase}}
    lowercase //转换成小写
    capitalize  //首字母大写
    
    currency    钱
    
    {
       {msg| filterA 参数}}
    {
       {msg | filterA | filterB}}
    
    与事件相关的过滤器
    @keyup="add | debounce 2000"  延时执行

limitBy的使用方法

v-for = “val in arr | limitBy 2” 只显示2条数据  
limitBy 2 1 //只显示2条，从索引为1的位置开始取  
limitBy 2 arr.length-1

filterBy 过滤  
v-for=”val in arr | filterBy ‘o’” //只显示含有字母o的数据

orderBy 排序显示

v-for = “val in arr | orderBy parseInt(num)”  
orderBy 1 正序  
orderBy 0 正常显示（不排序）  
orderBy -1 倒序

<div id="box"> <br>{ { { center|uppercase}}} <hr>{ {'SDFSF'|lowercase}} <hr>{ {12|currency "RMB"}} </div> <script> new Vue({ el:"#box", data:{ center:"center", red:"red" }, methods:{} }) </script>

交互:  
$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);
        });

[http_cn.vuejs.org]: http://cn.vuejs.org/
[http_cn.vuejs.org_api]: http://cn.vuejs.org/api/