vue基础

没实践之前总是只知道一点皮毛,似懂非懂,实践之后自己对vue有了更加深刻的认识。

内部指令:

基本

1、v-if/v-else  和v-show:

v-if用来判断是否加载html的DOM:用法v-if=“XXX”(XXX在data中)

v-show用来调整css中的display属性,DOM是已经加载出来了的,只是css控制没有显示出来。

区别:v-if:判断是否加载,可以减轻服务器的压力,在需要的时候加载。 v-show:调整的css属性,可以使客户端的操作更加流畅。

2、v-for指令循环渲染一组打他数组,指令需要以item in items形式的特殊语法,items是原数组,item是数组元素迭代的别名。

排序

computed:{sortItems:function(){

return this.items.sort();}}  (一定要注意声明一个新的对象,因为sort方法直接在数组上重排序,不声明会污染原来的数据源。)

记住数组中即使每一项都是数值,但是比较的还是是字符串。所以数据位数不同会出现bug,但是具体的方法我们可以参见红宝书p93,其实就是sort参数里面加上compare函数);

对象中排序:同样首先利用原生的对象形式的数组排序方法。

function sortbykey(array,key){

return array.sort(function(a,b){

var x=a[key];  var y=b[key];    return (x<y)?-1:(x>y)?1:0;

}}

data里面items的值和computed是不允许相同的。

v-text和v-html

由于直接使用{{}}会在JavaScript出错的时候暴露(生产环境动态渲染HTML同意导致XSS攻击)

<span v-text="XXX"></span>
<span v-html="XXX"></span>

v-on绑定事件

键盘绑定事件


v-model双向数据绑定

使用范围:文本区域加入数据绑定、多选按钮绑定一个值、多选按钮绑定一个数组、单选按钮绑定数据

v-bind

一般用于处理HTML中的标签属性

用处:1、绑定属性值;2、直接绑定class样式;3、绑定class并进行判断;4、绑定class数组;5、绑定style(用对象写法);6、绑定style样式(利用对象绑定)

其它指令

1、v-pre

<div v-pre>{{message}}</div>

跳过vue的编译,直接显示原始值

2、v-cloak

渲染完整个DOM后才能使用,必须和CSS样式一起使用

[v-cloak]{
display:none;
}
<div v-cloak>
{{message}}
</div>

3、v-once

第一次DOM时进行渲染,渲染完成之后视为静态内容,跳出以后的渲染

<div v-once>第一次绑定的值:{{message}}</div>
<div><input type="text" v-model="message"></div>

全局API

Vue.directive自定义指令

Vue.directive("XXX",function(el,binding,vnode){
   el.style='color:'+bonding.value;
});

之后就可以像v-bind一样使用了; v-XXX=“???”???为data中的键;

三个参数:el:指定所绑定的元素,可以直接用来操作DOM;binding;生成一个对象,包含指令的很多信息;vnode:vue编译形成的虚拟结点。

生命周期:bind;inserted;update;componentUpdated;unbind;

Vue.extend构造器的延伸

自定义无参数标签

和自定义组件很像,但是没有传递任何参数,只是一个静态标签。

var authorExtend=Vue.extend({
template:" <p><a :href="authorUrL">{{authoreName}}</a></p>"
data:function(){
return{
authorName:'manyuyu',
authorUrl:"http://www.manyuyu.com"}
}
})

但是这个额时候html中这个标签还不起作用,可以参考一下vue的生命周期。所以我们还是需要一次挂载;

new authorExtend().$mount('author');

这样我们就可以直接在html中输入<author></author>就是管用的。

挂载到普通的标签上

通过在html标签上的id或者class来生成扩展实力构造器,Vue.extend里的代码是一样的,在挂载的时候我们用类似jQuery的选择器方法进行挂载就可以

new authorExtend().$mount('#author')

Vue.set全局操作

作用即使在构造器外部操作构造器内部的数据、属性或者方法。

比如:在vue构造器内部定义了count为1的数据,我们在构造器外部定义了一个方法,每次点击按钮就给值加1,这时就需要Vue.set。

var outData={
count:1,
goodName:'car'
};
var app=new Vuee({
el:'#qpp',
data:outData;
})

在外部改变数据的三种方法:

1、利用Vue.set改变

function add(){
Vue.set(outData,'count',4);
}

2、用Vue对象的方法添加

app.count++

3、直接操作外部数据

outData.count++;

为什么要有Vue.set的存在?(其实我的个人理解是只对外部的游泳)

由于JavaScript的限(Vue数组变异方法的不足,修改数组中的值,值会修改,但是,渲染的视图并没有改变),Vue不能自动检测以下变动的数组:当利用索引值直接设置一个项时;修改数组的长度时;

tip:Vue.set()在methods中也可以写成this.$set()

但是最好不要再Vue实例化之后再为其添加修改属性:(https://www.cnblogs.com/leona-d/p/6708167.html?utm_source=itdadao&utm_medium=referral)

vue生命周期

Template制作模板:

有点类似于vue-cli中的XXX.vue写法,就是在构造器里面写上了template属性!

组件和指令的区别:

组件注册的是一个标签,而指令注册的是已有标签里的一个属性。在实际开发过程中还是组件用的比较多,因为指令看起来封装的没那么好。

component组件props属性设置:

1、定义属性并获取属性值。

定义属性我们需要props选项,加上数组形式的属性名称,例如props:[’XXX‘],在组件模板里面都出来需要用插值的形式,例如{{XXX}}

2、属性中带’-‘的处理方式,在标签中可以写,但是在props数组里面用这种写法是错误的,故利用小驼峰写法!

3、在构造器里面向组件传值

html

<panda v-bind:here="message"></panda>

JavaScript

var app=new Vue({
el:"XX",
data:{
message:""
},
components:{
"panda":{
template:`<div style="color:red">panda from {{here}}</div>`,
props:['here']
}}})

component标签

<component></component>标签是Vue框架自定义的标签,它的用途是可以动态绑定我们的组件,根据数据的不同更换不同的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-4</title>
</head>
<body>
    <h1>component-4</h1>
    <hr>
    <div id="app">
       <component v-bind:is="who"></component>
       <button @click="changeComponent">changeComponent</button>
    </div>
 
    <script type="text/javascript">
        var componentA={
            template:`<div style="color:red;">I'm componentA</div>`
        }
        var componentB={
            template:`<div style="color:green;">I'm componentB</div>`
        }
        var componentC={
            template:`<div style="color:pink;">I'm componentC</div>`
        }
       
        var app=new Vue({
            el:'#app',
            data:{
                who:'componentA'
            },
            components:{
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC,
            },
            methods:{
                changeComponent:function(){
                    if(this.who=='componentA'){
                        this.who='componentB';
                    }else if(this.who=='componentB'){
                        this.who='componentC';
                    }else{
                        this.who='componentA';
                    }
                }
            }
        })
    </script>
</body>
</html>



选项:

watch:

<div id="app">
        <p>今日温度:{{temperature}}°C</p>
        <p>穿衣建议:{{this.suggestion}}</p>
        <p>
            <button @click="add">添加温度</button>
            <button @click="reduce">减少温度</button>

        </p>
</div>
var suggestion=['T恤短袖','夹克长裙','棉衣羽绒服'];
        var app=new Vue({
            el:'#app',
            data:{
                temperature:14,
                suggestion:'夹克长裙'
            },
            methods:{
                add:function(){
                    this.temperature+=5;
                },
                reduce:function(){
                    this.temperature-=5;
                }
            },
            watch:{
                temperature:function(newVal,oldVal){
                    if(newVal>=26){
                        this.suggestion=suggestion[0];
                    }else if(newVal<26 && newVal >=0)
                    {
                        this.suggestion=suggestion[1];
                    }else{
                        this.suggestion=suggestion[2];
                    }
                }
            }
        })

Mixins

两种用途:1、已经写好构造器后需要增加的方法或者临时改动使用的方法;2、许多地方都公用的方法

<script type="text/javascript">
        //额外临时加入时,用于显示日志
        var addLog={
            updated:function(){
                console.log("数据放生变化,变化成"+this.num+".");
            }
        }
        var app=new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods:{
                add:function(){
                    this.num++;
                }
            },
            mixins:[addLog]//混入
        })
    </script>
})

mixins的调用顺序:混入的先执行,构造器中的后执行。http://jspang.com/2017/03/26/vue3/5/

混入方法和构造器的方法重名时,混入的方法无法展现,不起作用。

extends:

通过外部增加对象的形式,对构造器进行扩展。类似于混入

如果重名应该也是无效吧?

delimiters:

作用:改变差值的形式:(传统就是利用{{XXX}}插值)

delimiters:['${','}']

实例事件:

$mount挂载extend(等实践了再来补充)

在构造器外部写一个调用内部的方法,好处是通过这种写法在构造器外部调用构造器内部的数据。

app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.num--;
});
//外部调用内部事件
function reduce(){
    app.$emit('reduce');
}

$once执行一次的事件

app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.num--;
 
});

$off关闭事件

//关闭事件
function off(){
   app.$off('reduce');
}

slot:

slot时标签的内容扩展,也就是用slot就可以在自定义组件时传递给组建内容,组建接受内容并输出。

知乎大佬的解释十分清楚

slot的意思是插槽,想想你的电脑主板上的各种插槽,有插CPU的,有插显卡的,有插内存的,有插硬盘的,所以假设有个组件是computer,其模板是
<template>
<div>
  <slot name="CPU">这儿插你的CPU</slot>
  <slot name="GPU">这儿插你的显卡</slot>
  <slot name="Memory">这儿插你的内存</slot>
  <slot name="Hard-drive">这儿插你的硬盘</slot>
</div>
</template>
那么你要攒一个牛逼轰轰的电脑,就可以这么写:
<template>
<computer>
  <div slot="CPU">Intel Core i7</div>
  <div slot="GPU">GTX980Ti</div>
  <div slot="Memory">Kingston 32G</div>
  <div slot="Hard-drive">Samsung SSD 1T</divt>
</computer>
</template>
是不是很easy!

slot的使用需要两步:

1、在HTML的组件中用slot属性传递值。

2、在组件模板中用<slot></slot>标签接收值。

1
2
3
4
5
6
7
8
<template id="tmp">
    <div>
        <p>博客地址:<slot name="bolgUrl"></slot></p>
        <p>网名:<slot name="netName"></slot></p>
        <p>技术类型:<slot name="skill"></slot></p>
        
    </div>
</template>






推荐学习网站:

里面有vue各个属性的解释

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值