Vue基础知识总结（一）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、基本语法：
　　1、实例化：new Vue({})
　　2、el：一定是根容器元素（vue的作用域就是这个根元素内），就是写选择器
　　　  data：用于存储数据
　　      methods：定义方法（方法里this指向当前vue实例化的对象，但是获取属性和方法不需要this.data.name，直接this.name即可，获取方法也是如此）

二、数据绑定：给属性绑定对应的值

　　（1）v-bind的使用：v-bind:href="website"，v-bind:value="value"（注意此处就不需加双大括号了）

　　（2）v-html用于绑定输出html元素：<div v-html="websiteTag"></div>

三、事件：
　　（1）v-on:click="事件名"（有参数的话就是事件名(参数)），简写：@click="事件"

　　（2）事件修饰符：v-on:click.事件修饰符
　　　　v-on:click.once="add(1)"，v-on:mousemove.stop，v-on:click.prevent="add"（阻止默认事件）

　　（3）键盘事件keyup、keydown，

　　　　键盘修饰符：keyup.enter、keyup.alt.enter(链式：alt+enter键)

四、双向数据绑定：input/select/textarea
　　（1）v-model指令

　　（2）ref机制：给input标签标记
　　<input ref="name" v-on:keyup="logName">

　　方法里面利用this.$refs.name.value去获取值

五、动态绑定css样式：

　　（1）v-bind:class="{red:true,blue:true}"

六、条件与循环
　　（1）v-if/v-else-if/v-else、v-show，两者的区别（有无实际dom元素的区别）

　　（2）v-for、列表渲染template

　　（3）v-for里面对数组默认的有{{$index}}索引，对json对象默认有{{$index}}、{{$key}}键值，或：v-for="(k,v,index) in json"

　　注意：在数组里面，小括号里面的参数第一位是value值，第二位是索引值；而在json里面，第一位是value值，第二位是key值，第三位是索引值

七、事件深入：
　　（1）事件对象$event：@click="show($event)"

　　（2）事件冒泡：

　　阻止冒泡：
　　　　1、原生的：$event拿到事件对象，然后方法里面ev.cancelBubble=true

　　　　2、@click.stop="show()"
　　阻止默认行为：

　　1、原生的：$event拿到事件对象，然后方法里面ev.preventDefault()

　　2、@contextmenu.prevent(阻止右键默认行为)

　　（3）键盘事件：@keydown、@keyup、$event、ev.keyCode（获取键值）

　　常用键：@keydown.13或@keydown.enter/@keydown.up(上下左右均可)

八、属性

　　v-bind绑定属性：v-bind:src="url"

　　<img src="{{url}}" alt=""> 此方式效果可以出来，但会报错

　　<img v-bind:src="url" alt="">，效果出来，不会发请求

　　v-bind简写就是冒号：:src="url"

九、class和style
　　（1）class：
　　　　1、:class="[red,blue]" red/blue指的是data里的数据，data里的red/blue再去指向实际的class名
　　　　2、:class="{red:true,blue:true}"或者:class="{red:a,blue:b}",a/b为data里的数据true/false
　　　　3、:class="json"，即把方法2的json放到data里面去
　　（2）style：跟class写法一样
　　　　1、:style="[c,b]"；
　　　　注意：复合样式需要采用驼峰命名法
　　　　2、:style="{width:\'200px\',color:\'red\'}"或者:style="{width:a,color:b}"
　　　　3、:style="json"

十、模板
　　v-model指令
　　{{msg}} 数据更新、模板随着变化
　　{{*msg}} 数据只绑定一次
　　{{{msg}}} HTML转意输出

十一、过滤器

　　过滤模板的数据

　　（1）系统提供一些过滤器:capitalize/lowercase/uppercase

　　　　语法：{{msg|fiter}}单个、{{msg|fiterA|fiterB}}多个

　　　　currency 钱的标志

　　　　{{msg|fiter 参数}}，比如{{12|currency "￥"}}就变成：￥12.00

十二、交互

　　如果vue想做交互，必须引入vue-resource

　　一般三种交互方式：get、post、jsonp，或直接this.$http({……})

　　1、get：

　　向本地文件取数据

//1、this.$http，指向当前的ajax对象
//2、promise的写法
this.$http.get(\'a.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);
});

　　2、post：需要加请求头信息

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

　　3、jsonp

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);
});

　　4、this.$http()

    this.$http({
        url:地址
        data:给后台提交数据,
        method:\'get\'/post/jsonp
        jsonp:\'cb\' //callback名字
    }).then();

以上是 Vue基础知识总结（一） 的全部内容， 来源链接： utcz.com/z/378550.html

回到顶部