Vue的使用（一）-基础

最新推荐文章于 2022-04-18 17:53:07 发布

今天才学java

最新推荐文章于 2022-04-18 17:53:07 发布

阅读量230

点赞数 1

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/qq_43644273/article/details/109735934

版权

Vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.引入VUE

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

2.创建vue对象

el : 指定根element(选择器)
data ; 初始化数据(页面可以访问)

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'<a href="http://www.baidu.com">I will back</a>',
imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=205441424,1768829584&fm=26&gp=0.jpg'
},
methods:{
test(){alert("hello!")}
}
});
</script>

3.双向数据绑定

v-model

4.显示数据

<p>{{xxx}}</p> 相当于textContent
<p>{{xxx.toUpperCase()}}</p>  xxx是js,可以用一些函数
<p v-text="xxx"></p> 相当于textContent,和{{}}差不多,把里面的内容转化为文本
<p v-html="xxx"></p> 相当于innerHTML,会把里面的内容转化为html

强制绑定:

<img v-bind:src="imgUrl"/>
<img :src="imgUrl"/>    v-bind可以省略

绑定事件监听:

<img v-on:click="test"/>
<img @click="test"/>   用@,v-on可以省略

计算属性computed
计算属性存在缓存,多次重复读取只执行一次getter计算
使用计算属性就可以不写data了

<input type="text" v-model="firstName"/>
<input type="text" v-model="lastName"/>
<input v-model="fullname"/>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
firstName:'A',
lastName:'B' 
},
computed:{
//初始化数据/相关data改变时,调用
fullName(){

 return this.firstName+' '+this.lastName; 
}
}
</script>

get/set计算属性

<input type="text" v-model="firstName"/>
<input type="text" v-model="lastName"/>
<input v-model="fullname"/>
<input v-model="fullname2"/>
<input v-model="fullname3"/>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
const vm =new Vue({
el:'#app',
data:{
firstName:'A',
lastName:'B' 
},
watch:{
firstName:fuction(value){//firstName发生变化时调用
//this就是vm对象,vue的实例
this.fullName=value+' '+this.lastName; 
},
computed:{
fullName3:{
//当读取当前属性时调用
   get(){
   return this.firstName+' '+this.lastName;
   },
   //监视当前属性的变化
   set(value){//value就是fullName3的最新属性值
   const names=value.split(' ');
   this.firstName=names[0];
   this.lastName=names[1];
   }
   }
}
})

</script>

监视watch

<input type="text" v-model="firstName"/>
<input type="text" v-model="lastName"/>
<input v-model="fullname"/>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
firstName:'A',
lastName:'B' 
},
watch:{
firstName:fuction(value){//firstName发生变化时调用
//this就是vm对象,vue的实例
this.fullName=value+' '+this.lastName; 
}
})
vm.$watch('lastName',fuction(value){
 this.fullName2=this.firstName + ' '+value;
})	
	

</script>

class绑定
:class=“xxx” xxx可以是字符串,对象,数组

style绑定
:style"{xxx}"

条件渲染

指令:
v-if , v-else ,v-show

比较v-if v-else和v-show:
需要频繁的切换使用v-show比较好,因为if,else为false是移除,v-show为false是隐藏


<p v-if="ok">ok为ture则显示</p>
<p v-else>ok为false则显示</p>

<p v-show="ok">ok为ture则显示</p>

列表渲染

v-for遍历数组

<div v-for="(item, index) in items"></div>  item为属性值, index为下标,从1开始
<div v-for="(val, key) in object"></div>  key为属性名,val为属性值
<div v-for="(val, name, index) in object"></div> val为属性值 name为属性名 index为下标

    <ul v-for="(p,index) in persons" :key="index">//推荐写上:key属性,值要是元素唯一的
       {{index}}}---{{p.name}}--{{p.age}}}
       <button @click="deletePerson(index)">删除</button>
        <button @click="updatePerson(index,{name:'cat',age:30})">更新</button>
    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
   var vm =new Vue({
       el:"#app",
       data:{
           firstName:'A',
           lastName:'B',
           fullname:'',
           fullname2:'',
           fullname3:'',
           persons:[{name:"tom",age:18},{name:"tom2",age:20},{name:"tom3",age:22},{name:"tom4",age:24}]
       },
       methods:{
           deletePerson(index){
               this.persons.splice(index,1);//splice可以实现增删改
           },
           updatePerson(index,newP){
               this.persons.splice(index,1,newP);
           }
       }
   });

列表搜索和排序

<div id="app">


    <br/>
    searchName:<input type="text" v-model="searchName"/>
    <ul v-for="(p,index) in filterPersons" :key="index">
       {{index}}}---{{p.name}}--{{p.age}}}
       <button @click="deletePerson(index)">删除</button>
        <button @click="updatePerson(index,{name:'cat',age:30})">更新</button>
    </ul>
    <button @click="setOrderType(1)">年龄升序</button>
    <button @click="setOrderType(2)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
   var vm =new Vue({
       el:"#app",
       data:{
           orderType:0, //0表示原本排序,1代表升序,2代表降序
           searchName:'',
           persons:[{name:"tom",age:18},{name:"tom2",age:20},{name:"tom3",age:22},{name:"tom4",age:24}]
       },
       methods:{
   
           setOrderType(type){
               this.orderType=type;
           }
       },
       computed:{
           filterPersons(){
               //取出相关数据
               const {searchName,persons,orderType} = this; //提前指定了this,  就不需要在后面使用this.searchName this.persons等了
               //最终需要显示的数组
               let fPerson;
              //对persons进行过滤
               fPerson=persons.filter(p => p.name.indexOf(searchName)>=0);
               //p => p.name.indexOf(searchName)>=0  ES6新特性相当于 function(p){return p.name.indexOf(searchName)>=0; }

               if(orderType!=0){
                   fPerson.sort(function (p1,p2) {
                       //1代表升序,2代表降序
                       if(orderType===2){
                           return p2.age - p1.age;// 如果<0,p2在p1前面
                       }else {
                           return p1.age - p2.age;// 如果<0,p1在p2前面
                       }
                   })
               }
              return fPerson;
           }

       }
   });

事件监听

绑定监听

<div id="app">
    <button @click="test1">test1</button>
    <button @click="test2('abc')">test2</button>
    <button @click="test3">test3</button>  <!--test3不写默认为test3($event)-->
    <button @click="test4(0,$event)">test4</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
   var vm =new Vue({
       el:"#app",
       data:{
           test1(){alert('test1')},
           test2(msg){alert(msg)},
           test3(event){alert(event.target.innerHTML)},
           test4(number,event){alert(number+'---'+event.target.innerHTML)},
      
       }
      
      );


</script>

事件修饰符和按键修饰符

    <div style="width: 200px;height: 100px;background-color: red" @click="test5">
        <div style="width: 100px;height: 50px;background-color: blue" @click.stop="test6"> 
        <!--stop阻止事件冒泡,也就是说执行test6后,不会执行test5-->
        </div>
    </div>
    <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
    <!--prevent阻止默认行为,也就是说执行test7后不会跳转到百度-->
    <br/>
   <input type="text" @keyup.enter="test8"> 
   <!--@keyup表示键盘上去时, enter表示enter键-->

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
   var vm =new Vue({
       el:"#app",
       data:{
           test5(){alert('test5')},
           test6(){alert('test6')},
           test7(){alert('test7')},
           test8(event){
               alert(event.target.value)}
       }
 
    
     );

表单数组的自动收集

VUE生命周期

1.new Vue () 创建一个实例
2.beforeCreate函数创建实例后，马上就会调用beforeCreate
3.Observe Data 观察监视属性值变化
4.Init Events 初始化事件
5.created 函数
6.判断是否有 el 这个属性：
有：自动挂载页面
没有：手动挂载页面
7.是否有配置’ template option ’ ?
有：
没有：解析el属性范围里面的语法
8.beforeMount函数
9.挂载，加载页面
10.mounted函数
到此第一阶段初始显示结束
第二阶段更新开始
11.页面变化之前调用：beforeUpdate
12.页面变化之后调用： updated
第三阶段 vm.$destory() is called
13.beforeDestory函数
14.destroyed函数

过滤器，日期格式化

<div id="app">
原始：<p>{{date}}</p>
完整：<p>{{date | dateString}}</p>
年月日：<p>{{date | dateString('YYYY-MM-DD')}}</p>
时分秒：<p>{{date | dateString('HH:mm:ss')}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<!--导入moment 时间格式化的包-->
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.10.0/moment.js"></script>
<script>
 <!--自定义过滤器-->
   Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){ //形参设置默认值
    return moment(value).format(format  )
   });
   
   var vm =new Vue({
       el:"#app",
       data:{
         data:new Date()
       }
 
    
     );
 </script>

剩下的一些指令

ref 为某个元素注册一个唯一标识符，vue对象通过$refs属性访问这个元素对象
v-cloak 使用它防止闪现表达式(就是数据还没加载完，显示的是表达式本身)，与css配合：[v-cloak]{display : none}

<style>
[v-cloak]{display : none}   <!--[xx]为CSS属性选择器-->
</style>
<div id="app">
  <p ref="content">abc</p>
  <button @click="hint">提示</button >
   <p v-cloak>{{model}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
   var vm =new Vue({
       el:"#app",
       data:{
         model:13
       },
       methods:{
        hint(){
         alert(this.$refs.content.textContent) //可能有多个ref所以是refs
        }
       }    
     );
 </script>

自定义指令


<div id="app">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
//定义全局指令
//el:指令属性所在标签对象
//binding 包含指令相关信息数据对象
Vue.directive('upper-text',fucnction(el,binding){
 el.textContent = binding.value.toUpperCase();
})

   var vm =new Vue({
       el:"#app",
       data:{
        msg1:'I Love You'
       },
       //定义局部指令 :只在当前VUE实例管理的范围中有效
       deriectives:{
          'lower-text' : function(el,binding){
           el.textContent = binding.value.toLowerCase();
          }
        }
       }    
     );
 </script>

axios

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
info:{
 name:null,
 address:null
 }
}
},
mounted(){
axios.get('URL').then(response => {this.info=response.data});
}

});

</script>

Vue的组件化编码

插槽slot

进行复用

<slot> </slot>

<script>
Vue.component("todo",{
template:'<div>\
	 <slot name="todo-title"></slot>
	 <ul>\
	   <slot name="">
'
})	

</script>

今天才学java

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录