vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

CoCoManYY

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量172

点赞数 1

分类专栏： html javascript

本文链接：https://blog.csdn.net/m_oman/article/details/80288822

版权

javascript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

没实践之前总是只知道一点皮毛，似懂非懂，实践之后自己对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' 
 , 

 
 } 
 ,

 
              
 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属性传递值。

 
         1 
       
         2 
       
         3 
       
         5 
       
        <jspang> 
       
        <span  
        slot 
        = 
        "bolgUrl" 
        > 
        {{jspangData.bolgUrl}} 
        </span> 
             
        <span  
        slot 
        = 
        "netName" 
        > 
        {{jspangData.netName}} 
        </span> 
             
        <span  
        slot 
        = 
        "skill" 
        > 
        {{jspangData.skill}} 
        </span> 
             
        </jspang>

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

 
      <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各个属性的解释

CoCoManYY

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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：判断是否加载，可以减轻服务器的压力，在需要的时候加载...
复制链接

扫一扫

专栏目录