莫荒莫慌

vue使用入门

说明:

入门学习,不建议使用vue脚手架,导入外部cdn即可

可以收藏此网站:BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

收录了各种免费的cdn:

vue使用:

首先,vue有两个部分:

1.html:

2.需要有一个Vue对象

new Vue({

el://作用:标注该对象绑定在哪个div上

date:{}//作用:提供数据,存放的是键值对形式

methods:{}//作用:定义方法

})

差值表达式:

说明:用在html的被vue绑定的元素中,通过差值表达式来获取vue对象中的属性和方法

用法:



{{name}}//差值表达式

补充:表达式不能用在html标签中作为属性

数据绑定

v-model:可以通过v-model属性与vue对象进行绑定

用法:



new Vue({

    data:{

            name:'java'
        }
})

事件绑定

v-on:通过具体的事件名,来绑定vue中定义的函数

//事件可以定义为click,input...

new Vue({

    methods:{

           m1:function(){

            console.log("莫荒")
        }
})

在绑定的函数中,可以使用event内置参数对象.该对象表示当前事件,可以通过event.target.value获取当前事件对象值

//事件可以定义为click,input...

new Vue({

    methods:{

           m1:function(event){
            console.log(event.target.value)
        }
})

v-on:还可以简写为@

例如上述的v-on:input可以写为@input

属性绑定

v-bind:

作用:如果需要在html标签的属性内容中引用vue的属性,可以使用该标签

用法:



new Vue({

      data:{

            link:"https://blog.csdn.net/Ms_future?type=blog"
}


})

v-bind:可以简写为:

例如上述的b-bind:href可以写为:href

其他标签

v-once:

作用:此标签中的差值表达式只获取一次数据,之后不会再发生变化

用法:


    {{title}}

v-html:

作用:将vue中的属性值作为html的元素来使用

用法:



new Vue({

    data:'莫荒'
})

v-text:

作用:将vue中的属性值作为纯文本

用法:



new Vue({

    data:'莫荒'
})

vue改变内容

计算属性

说明:

简单的说,计算属性就是一个能够将计算结果缓存起来的属性(将行为转化为了静态的属性)

用法:


{{m1}}//调用的是一个属性,如果是:m1(),会报错,并且每次调用该属性值不会变化


new Vue({

    computed:{

    m1:function(){
        return new Date();
    }
}
})

作用:

一些常用的函数,可以缓存起来,在调用时直接使用缓存中的过程,以此来提高效率

watch(监控属性)

说明:

watch用于监控参数的变化,并调用函数.有newVal,oldVal两个参数

用法:


{{title}}


new Vue({

    el:'app',
    data:{
    title:'hello'

},
    watch:{
    
        title:function(newValue,oldUvalue){

            console.log(newValue);
            console.log(oldValue);
        }
        
    }
})

vue改变样式

方式一:

通过给html元素的class属性绑定vue中的属性值,得到样式的动态绑定




    
    

new Vue({

    el:'app',
    data:{
        temp:true
}
})

方式二:

通过computed返回一个对象,对象里放着多个键值对




    
    

new Vue({

    el:'app',
    data:{
        temp:true
},
    computed:{

        myStyle:function(){

            return{

            red:this.temp,
            myWidth:this.temp
}
}

}
})

虚拟dom diff算法

vue高效的核心,就是虚拟的dom和diff算法,vue不通过修改dom树来达到修改的效果,而是直接在页面上修改元素,此时这个元素就是一个虚拟dom

而修改虚拟dom就是通过diff算法,计算出虚拟的dom修改后和修改前的区别,然后再虚拟dom的基础上进行修改,也因此提高了效率

分支语句

v-if

hello

hello1

world

new Vue({


    data:{


        temp:flase
}

})

v-show

用法和v-if一致,但是v-show改变的是元素的样式,而v-if是直接让元素消失和直接添加元素,效率上v-show更高

循环语句

v-for





    {{a}}
    =============================

    {{i}}---{{a}}//i为数组下标





new Vue({

    data:{

        args:[1,2,3,4,5,6]

}

})

如果遍历的是对象


    
        {{i}}---{{k}}---{{v}}
    


new Vue({

    el:'app',
    data:{

        student:{

            name:'莫荒',
            age:18
}

}
})

读取对象数据的顺序是:value key index

vue组件

vue的一大特性:

组件化,也就是可以将vue对象作为一个组件,被反复的使用

想要实现组件化,需要在页面中注册组件:关于注册组件的方式有两种,分别是:全局注册本地注册

步骤:

1.注册组件:(全局)

调用Vue的静态方法:Vue.component("组件名",{vue对象})

2.使用组件

在被 vue绑定了的html元素才能使用组件

实现:


    //调用自定义的组件



Vue.component("m1",{
    //template是将内容展示到页面的,但注意只能有一个根元素
    template:"{{title}}",
    data:function(){//注意data与之前的vue对象不同,使用的是方法,不是单纯的花括号
        return{
            title:"hello vue"
        }
        
    },
    methods:{
        btn:function(){
            alert("hello");
            
        }
    }
});

new vue({//一定是要绑定了html元素,才能使用到定义的组件
    el:'app'

})

3.本地注册(局部注册)





new Vue({
    el:'app1',
    components:{

        "m2":{
          template:"{{title}}",
        data:function(){//注意data与之前的vue对象不同,使用的是方法,不是单纯的花括号
        return{
            title:"hello vue"
        }
        
    },
    methods:{
        btn:function(){
            alert("hello");
            
        }
    }
    
        
}

}
     

})

本地注册和全局注册的区别:

本地注册只能在el指定绑定了的html元素中调用

全局注册可以在任一绑定了的html元素中调用

vue的生命周期

一个vue对象会经历初始化,创建,绑定,更新,销毁等阶段,不同的阶段,都会有对应的生命周期钩子函数被调用

new Vue({

    el:"app",
    beforeCreate:function(){},//创建实例之前执行的钩子事件
    created:function(){},//创建实例后执行的钩子事件
    beforeMount:function(){},//将编译完成的html挂载到对应虚拟dom时触发的钩子,此时页面并没有内容
    mounted:function(){},编译好的html挂载到页面完成后执行的事件钩子,此钩子函数中一般会做一些ajax请求获取数据进行数据初始化,mounted在整个实例中只执行一次
    beforeUpdate:function(){},//更新之前的钩子
    updated:function(){},//更新之后的钩子
    beforeDestroy:function(){},//实例销毁之前执行的钩子
    destroyed:function(){}//实例销毁完成执行的钩子

})

至此vue的基本语法和基本概念的学习就结束了

vue-cli:脚手架工具

vue-cli里存放了很多常用的项目骨架,直接拿来用就可以搭建出一个拥有比较成熟的项目结构的项目

安装node.js

想要使用vue-cli,首先需要安装node.js下载 | Node.js 中文网,无脑安装,安装后可以在cmd中输入node -v查看版本

node.js可以为前端运行提供环境

安装vue-cli

在cmd中输入命令:npm install vue-cli -g

安装完成后可以输入命令vue -V查看版本

如果你的是这样的报错:
'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。

那么就是没有在电脑中配置环境

输入命令找到npm 的配置路径npm config list

复制prefix路径,然后在系统环境变量中添加该路径即可

问题解决

cmd中输入vue list命令可以查看官方已经提供的模板

自定义一个目录,跳转到该目录下载模板,输入vue init webpack-simple myvuedemo01命令下载模板

下载完成后一路回车即可

可以看到目录多了一个文件

cmd进入该文件输入命令npm install安装相关依赖,也可输入cnpm install 安装镜像会快些

如果有node-gyp相关的报错,那就输入命令 npm install -g node-gyp安装node-gyp

再次安装相关依赖

安装完成后就可以启动服务了!

输入命令npm run dev即可启动服务

webpack-simple项目结构

1.index.html文件

无论前端页面内容有多复杂,index.html都只有十一行



    
        
        myvuedemo

实际的内容已经打包在/dist/build.js中

2.main.js文件

main.js文件是整个vue项目的入口js

import Vue from 'vue'
import App from './App. vue'//导入了App.vue组件
new Vue ( {
el: '#app'，//让当前vue对象绑定页面上的id是app的那个div
render: h => h(App)//让App.vue的内容展现在该div中
})

3.App.vue文件

App.vue这种以.vue为扩展名的文件,实际上就是一个vue对象,也称为Vue组件

由三大部分组成:

项目中Vue组件的使用

组件的全局注册

1.首先new一个vue组件

2.然后在mian.js中注册

...
import Header from './components/Header.vue'

Vue.component('MyHeader':Header);
...

3.最后就可以在主页面(App.vue)中调用注册的组件