vue日常总结

一.vue是什么
vue简单小巧(压缩后大小仅有17kb),渐进式(可以一步一步,有阶段的使用,不必一开始就使用所有东西)的前端框架
提供了开发中常用功能,如:1.解耦视图与数据2.组件复用3.前端路由4.状态管理5.虚拟Dom
开发模式(m v vm):mvvm由mvc繁衍而来,当v(视图)层变化时,会自动更新到vm(视图模型),然后m(模型)层发生变化,反之亦然,v和vm之间通过双向绑定建立联系
二.使用安装vue

   1.通过
   2.通过脚手架vue-cli(项目中):
        1安装vue
        npm install vue
        2全局安装vue-cli
        vue install --global vue-cli
        3创建基于webpack模板的新项目
        vue init webpack my-project          //my-project :项目名称
        4进入项目
        cd my-project
        5下载依赖包
        npm install
        6运行项目
        npm run dev
        或
        npm start
        7项目打包
        npm run build

三.计算属性
computed
当模板中的表达式或者逻辑过长时,项目就会难以维护,比如

	{{text.split(','}.reverse().join(,)}}			//split()截取	reverse()取反	join()将数组转换成字符串

计算属性:

	{{reversetext}}

用法:计算属性可以完成各种复杂的逻辑,包括运算,函数调用,只要最终返回一个结果

每个计算属性中都包含一个getter和一个setter函数,getter用来读取,setter用来修改,绝大多数只用默认的getter很少用setter

计算属性小技巧:1计算属性可以依赖其他计算属性2计算属性不仅可以依赖当前的Vue实例的数据,还可以依赖其他实例的数据
计算属性缓存(与methods区别):你可能发现,调用methods里的方法也可以实现计算属性的逻辑,甚至methods还可以传值,使用起来更灵活,为什么还要使用计算属性呢,原因就是计算属性是基于他的依赖缓存的,一个计算属性所依赖的数据发生变化时,他才会重新获取值,而methods只要重新渲染,他就会被调用,因此函数也会被执行
四.vue内置指令
(1).v-bind(简写也可以叫语法糖为 : ):主要用于动态更新html元素上的属性
v-bind:class(绑定class,动态切换class)

对象语法:

给div绑定一个class,名为cheng,这个名为cheng的class依赖于data中数据congming,当congming为ture时,添加上class,渲染结果为:

当congming为false时,class名不显示,渲染结果为:

当然,动态添加class可以存在多个,如

注:写法与一个class名相同,true显示,false不显示
当:class的表达式过长或者逻辑复杂时,还可以绑定一个计算属性,或者data,methods

渲染结果:

数组语法

当需要应用多个class是,可以用数组语法

渲染结果:

还可以用三元表达式来根据条件切换

当cheng为true时,渲染结果为:

当cheng为false时,渲染结果为:

也可以在数组中使用对象

注:当然,与对象语法一样,数组语法也可以使用data,computed和methods三种方法
v-bind:style(给元素绑定内联样式,与绑定class类似)

    
程聪明

渲染结果:

程聪明

大多数情况下,直接写一串样式不便于维护,可以写在data或者computed里,

    
程聪明

渲染结果

程聪明

应用多个样式对象时,可以使用数组语法

程聪明

在实际业务中:style的数组语法不常用,因为往往可以写在一个对象里,较为常用的是计算属性
(2)v-cloak:不需要表达式,会在Vue实例结束编译时从绑定的HTML元素上移除,经常和css中的display:none;配合使用:

    {{cheng}}

当网速较慢,vue文件还没加载完成时,页面会显示{{cheng}}的字样,直到页面加载完成,所以这个过程屏幕是会闪动的,而v-cloak就是解决页面闪动问题的,但是一般在大型的项目中,html结构只有一个空的div元素,剩余的内容都是由路由挂载不同组件完成,所以不再需要
(3).v-once:不需要表达式的指令,作用是定义它的元素或组件值渲染一次,包括元素或组件的所有子节点.首次渲染后,不在随数据的变化重新渲染,将被视为静态内容:

    
{{cheng}}
    

        {{cheng}}
    

(4)v-if.v-else-if.v-else:条件渲染指令 ,与if.else.else if类似,根据表达式的值渲染Dom

 

    
程
    
聪
    
明

v-else-if需要紧跟v-if,v-else需要紧跟v-else-if,如果一次判断的是多个元素,可以在元素上使用条件指令,最终渲染的结果不会包含该元素,

(5)v-show:ye v-if用法基本一致,只不过v-show改变元素的css属性display.当表达式值为false时,元素隐藏,为true时元素显示

  
程聪明



注:v-show不能写在template上

v-show和v-if区别:v-if时真正的条件渲染,创建dom和删除dom,而v-show只是在元素上添加了css属性;v-if更适合于条件不常改变的场景,v-show适合频繁操作的场景
(6)v-for:遍历数组或者对象循环显示,表达式需要用in或者if结合使用
遍历数组:

    

        
{{item.name}}
    

渲染结果:

    

	    
程
	    
聪
	    
明
    

v-for可以选参数作为当前的索引:

    

        
{{index}}-{{item.name}}
    

渲染结果:

    

	    
0-程
	    
1-聪
	    
2-明
    

跟v-if一样,v-for也可以写在template标签上,进行多个元素渲染,也可以进行对象渲染:

    

        
{{item}}
    

渲染结果:

   

       

	       
程
	       
男
	       
100
       
   

遍历对象时可以有两个参数

    

        
{{index}}-{{key}}-{{item}}
    

渲染结果:

   

      

	       
0-name-程
	       
1-gender-男
	       
2-age-100
       
    

v-for还可以循环整数:

{{item}}

渲染结果

1 2 3 4 5 6 7 8 9 10

vue中一些数据变化,v-for也会立即更新.vue中数组变异的方法:

push()  	//向数组的末尾添加一个或多个元素，并返回新的长度
pop()	//删除并返回数组的最后一个元素
shift()	//把数组的第一个元素从其中删除，并返回第一个元素的值
unshift()	//向数组的开头添加一个或更多元素，并返回新的长度
splice()	//向/从数组中添加/删除项目，然后返回被删除的项目
sort()	//对数组的元素进行排序
reverse()	//颠倒数组中元素的顺序
filter()	//创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素(不会改变原数组)
concat()	//连接两个或多个数组(不会改变原数组)
slice()	//从已有的数组中返回选定的元素(不改变原数组)

(7).v-on(简写也可以叫语法糖为 @ ):绑定事件监听器,如v-on:click

    +1
    
{{cheng}}

监听事件可以写在methods中

    +1
    
{{cheng}}

(8)v-model:表单数据双向绑定

    
    
{{cheng}}

使用v-model后,表单显示的值只能依赖所绑定的数据,不在关心初始化时的value属性
五.组件
全局注册组件
component

 Vue.component('cheng',{
        //选项
    })

实例:

渲染结果:

程聪明

template的Dom元素必须被一个元素包含
局部注册组件
componets

vue模板在某种情况下会受html的限制,比如table中值允许写tr.td.th等表格元素,所以在表格中直接使用组件是无效的,在这种情况下,可以用is属性来挂载

注:在组件中使用data时,data必须写成函数形式,然后将数据return出去
持续更新…(本资源参考 <>,如有侵权,请联系删除)