Vue总结

Vue之Hello word

    
    
    
    



    

        {
    {msg}}
    

Vue之TodoList

v-model:双向数据绑定

v-for:循环

• item:循环的每一项
• index:索引
• list:循环的数据

    
    
    
    



    

        
        提交
        

            
{
    {item}}
        
    

MVP

• M:数据层
• V:视图层
• P:逻辑层
  

MVVM

• M:数据层
• V:视图层
• VM:逻辑层
  

组件

组件：网站区域的某一部分。

全局组件实现todolist

全局组件：Vue.component()

• v-for:循环指令
• v-bind:属性绑定

父子组件传值的方式

• 父组件通过v-bind将属性传值给子组件
• 子组件通过props接收父组件传过来的属性值

    
    
    
    


    


        

        提交
        


         
        
    

局部组件实现todolist

局部组件：let TodoList ={} 组件需要注册在实例中

    
    
    
    


    


        

        提交
        


            
        
    

组件之间的传值

子组件向父组件传值，使用this.$emit(event),父组件正好监听子组件传过来的事件。

父组件向子组件传值使用v-bind绑定属性，并用props接收值

组件之间的传值之todolist

    
    
    
    



    
    
    
    提交
    

        
        
    

Vue实例

    
    


    

       

           {
    {msg}}
       
        
    

Vue的生命周期

Vue的生命周期也就是Vue实例在某一个时间点自动执行的函数

    
    
    



    

        
{
    {msg}}
    

Vue中的模板语法

模板语法

• { {}}：插值表达式
• v-html:更新html的值
• v-text:更新文本的值

    
    
    



    

        
{
    {msg}}
        

        

    

计算属性 方法 监听器的区别

    
    


    

        {
    {fullName}}
        {
    {fullName}}

    

    
    
    
    



    

        Hello Word
    

Vue之绑定样式

class之对象形式

如 v-bind:class="{active:isActive}"

    
    
    


    

        
Hello word
    

class之数组形式

如 v-bind:class=’[active]’

    
    
    
    



    

        Hello Word
    

style之对象形式

例如：v-bind:style=‘ObjStyle’

    
    
    



    

        Hello Word
    

style之数组形式

例如：v-bind:style=’[ObjStyle]’

    
    
    



    

        Hello Word
    

Vue中的条件渲染

• v-if与v-show的共同点：可以使页面内容显示或隐藏
• v-if与v-esle-if及v-show可以搭配使用
• v-if的值设置为flase，不仅页面内容消失，Dom也会消失
• v-show的值设置为false，页面内容会消失，但Dom不会消失

v-if

    
    
    



    

        
This is A
        
This is B
        
This is C
    

v-show

    
    
    



    

        
Hello Vue
    

v-if之表单注意事项

使用Vue中的条件渲染v-if来操控表单时，表单一定要用key值进行区分

    
    
    



    

        

            姓名：
        

        

            邮箱：
        
    

v-for循环数组

v-for循环对象

v-for="(item,key,index) in ObjStyle"

• item:属性值
• key:属性
• index:索引

    
    


    

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

Vue如何改变数组

javascript变异方法

• push():数组的末尾添加新的元素
• unshift():数组的开头添加新的元素
• pop():删除数组的最后一项元素
• shift():删除数组的第一项元素
• sort():数组元素进行排序
• reserve():数组元素进行反转排序
• splic():增添或删除数组的元素

增加数组元素

改变数组元素

直接改变引用地址

Vue.set()及vm.$set()来实现改变数组

Vue如何改变对象

通过属性改变值

通过引用地址改变值

Vue.set()及vm.$set()来改变对象

Vue组件的细节

Vue组件之is属性

is属性是为了解决HTML5标签中存在的问题。例如is=‘组件名称’

Vue组件之data()

data()之所以是函数形式，主要是为了让每个子组件都拥有完整的数据存储的地方

Vue组件之ref属性

通过ref属性 可以获取组件里面的值

    
    
    




    

        
        
        
{
    {total}}
    

Vue组件父子组件的传递值

• 父组件通过属性绑定的方式将值传给子组件
• 子组件通过事件触发的方式将值传递给父组件

Vue单向流：父组件可以传递给子组件任何值，但子组件不允许改变父组件的传递过来的值

    
    
    



    

        
        
        
{
    {total}}
    

Vue组件参数校检

父组件向子组件传递一些参数，子组件有权对这些参数进行一个校验，便叫做组件参数校验

Vue组件参数校检之进阶

注意：接受的参数类型的值可以为对象，可以根据不同的条件进行筛选

• type:类型
• required:必选项
• default:其它项
• validator:自定义配置项

props特性

props特性

当父组件使用子组件时，通过属性向子组件传值的时候，当子组件里声明了对父组件里面传过来的值的一个接收

特点：

子组件所带的属性传递是不会出现在DOM标签上的

父组件通过属性传值之后，子组件会通过template中的插值表达式或者通过this.content去取得该属性中的内容。

非props特性

解释：父组件向子组件传递了一个属性，但是子组件并没有声明接受子组件传递过来的属性内容，

特点：

子组件没有接收父组件传递过来的属性，子组件没法使用这个content，就会报错，

会显示在子组件最外层DOM标签的HTML属性里面

Vue组件绑定原生事件

@event.native='事件函数’即可让父组件绑定原生事件

Vue非父子组件传值

解决方案

• Vuex
• 订阅模式----总线机制
  

Vue.prototype.bus = new Vue() Vue的实例绑定bus属性

Vue插槽

Vue中插槽的基本用法

插槽是子组件中的提供给父组件使用的一个占位符，用表示，父组件在这个占位符中填充任何模板

    
    


    

        
            
Hello  Vue
        
    

Vue具名插槽的用法

具名插槽：简单而言，便是给插槽定义名字

    
    


    


        

            Header
            Footer
        
    

Vue作用域插槽

作用域插槽的样式由父组件决定，内容却由子组件控制4

Vue动态组件与v-one

v-once:只渲染元素和组件一次

    
    


    

        
        切换
    

Vue中的css动画原理

隐藏到显示

显示到隐藏

设置动画用transition包裹起来。可添加name属性。Vue自动给标签在某个时间点上添加类名。

没有name值，css默认前缀名为"v"

隐藏到展示

开始有fade-enter,fade-enter-active,(第0帧未动)——第1帧fade-enter 去除，新增fade-enter-to,周期最后fade-enter-to,fade-enter-active去除。

展示到隐藏

开始有fade-leave,fade-leave-active——第1帧fade-leave去掉，新增fade-leave-to,z最后周期fade-leave-to,fade-leave-active去掉

    
    
    
    
    


    

        
            
Hello Word
        
        切换
    

Vue自定义动画

注意

• .v-enter-active与.v-leave-active可以被自定义名字
• @keyframes去定义动画

    
    
    
    
    



    

        
        
                
Hello Word
        
        切换
    

Vue使用animated.css库

使用步骤

• 使用npm install animae.css --save下载库文件
• 将animate.css引入html5文档中
• transition中包含enter-active-class及leave-active-class的值中必须有类名animate__animated
• animate__animated后面跟着的是特效名字

    
    
    


    

        
            
Hello Word
        
        提交
    

Vue动画与transition共存

Vue中的动画实质是@keyfarms定义的动画，可以与transition共存,动画事件也可以自定义

  
  
  
  



  
    
Hello Word
  
  提交

Vue中的js动画与veloity.js

• Vue的js动画指的是js动画 便是动画钩子函数

入场动画函数

• @before-enter
• @enter
• @after-enter

出场动画函数

• @before-leave
• @leave
• @after-leave

    
    


    

        
            
Word
        
        切换
    

Vue中的Velocity.js库

Velocity属于Vue js动画库

    
    


    

        
          
Hello word
        
      Bth
    

Vue中多个元素与组件的过渡

Vue多个元素的过渡

• in-out:先显示后隐藏
• out-in:先隐藏后显示

    
    
    
    
  


  

      
        
Hello Word
        
Hello Vue
      
    Bth
  

Vue之多个组件的过渡

  
  
  
  
  



  
    
    
  
  Bth

Vue之动态组件的过渡

    
    
    
    
    



    
        
    
    Bth

Vue中的列表过渡

Vue中的列表过渡 使用 组件

  
  
  



  
    

      {
    {item.title}}
    

  
  Add

Vue之动画封装

Vue可以把动画封装成组件

  
  
  
  




  
    
Hello word
  
  
    
Hello Vue
  
  Bth

Vue单文件组件

单文件就是以 *.vue结尾的文件。最终通过webpack也会编译成 *.js在浏览器运行

内容

• template中只能有一个根节点
• script中 按照 export default {配置} 来写
• style中 可以设置scoped属性，让其只在template中生效

App.vue

Vue路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

:Vue路由地址所指向的内容

Vue多页应用及单页应用

多页应用

单页应用