vue使用入门

说明:

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

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

收录了各种免费的cdn:

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.5/vue.js"></script>

vue使用:

首先,vue有两个部分:

                1.html: <div id="app"></div>

                2.需要有一个Vue对象

                        new Vue({

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

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

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

                        })

差值表达式:

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

        用法:

<div id="app">

{{name}}//差值表达式
</div>

<script>

    new Vue({

        el:'#app'
        data:{

            name:'莫荒'
        
        }

})
</script>

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

数据绑定

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

        用法:

<input type="text" v-model="name"/>

new Vue({

    data:{

            name:'java'
        }
})

事件绑定

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

<input type="text" v-on:click="m1"/>//事件可以定义为click,input...

new Vue({

    methods:{

           m1:function(){

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

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

<input type="text" v-on:input="m1"/>//事件可以定义为click,input...

new Vue({

    methods:{

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

        v-on:还可以简写为@

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

属性绑定

        v-bind:

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

                用法:

<a v-bind:href="link"/>

new Vue({

      data:{

            link:"https://blog.youkuaiyun.com/Ms_future?type=blog"
}


})

        v-bind:可以简写为:

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

其他标签

        v-once:

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

        用法:

<p v-once>
    {{title}}

</p>

        v-html:

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

        用法:

<span v-html="link"/>

new Vue({

    data:'<a href="https://blog.youkuaiyun.com/Ms_future?type=blog">莫荒</>'
})

v-text:

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

        用法:

<span v-text="link"/>

new Vue({

    data:'<a href="https://blog.youkuaiyun.com/Ms_future?type=blog">莫荒</>'
})

vue改变内容

计算属性

        说明:

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

        用法:

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

new Vue({

    computed:{

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

        作用:

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

watch(监控属性)

        说明:

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

        用法:

<div id="app">
{{title}}
</div>

new Vue({

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

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

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

vue改变样式

        方式一:

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

<style>
    .red{
        background-color:red;
    }

</style>

<div id="app">
    <div :class="{red:temp}"></div>
    <button type="button" @click="temp=!temp">点我<buuton/>

</div>

new Vue({

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

        方式二:

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

<style>
    .red{
        background-color:red;
    }
    .myWidth{
        width:100px;
}

</style>

<div id="app">
    <div :class="myStyle"></div>
    <button type="button" @click="temp=!temp">点我<buuton/>

</div>

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

<div v-if="temp">hello</div>

<div v-else-if="!temp">hello1</div>

<div v-else="temp">world</div>

new Vue({


    data:{


        temp:flase
}

})

        v-show

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

循环语句

        v-for

<div>

<ul>

    <li v-for="a in args">{{a}}</li>
    =============================<br>
    <li v-for="(a,i) in args" :key="i">{{i}}---{{a}}</li>//i为数组下标

</ul>

</div>

new Vue({

    data:{

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

}

})

        如果遍历的是对象   

<div id="app">
    <ul>
        <li v-for="(v,k,i) in student" >{{i}}---{{k}}---{{v}}</li>
    </ul>
</div>

new Vue({

    el:'app',
    data:{

        student:{

            name:'莫荒',
            age:18
}

}
})

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

vue组件

        vue的一大特性:

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

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

        步骤:        

        1.注册组件:(全局)

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

        2.使用组件

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

        实现:

<div id="app">
    <m1></m1>//调用自定义的组件
</div>


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

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

})

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

<div id="app1">
<m2></m2>
</div>

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

        "m2":{
          template:"<div>{{title}}<button type="button" @click='btn'>戳我</button></div>",
        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都只有十一行      

<! DOCTYPE htm1>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>myvuedemo</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="/dist/build.js"></script>
    </body>
<html>

        实际的内容已经打包在/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组件

<template>
    <div>
        <h1> {{title}} </h1>
    </div>
</template>
<script>
    export default {
        name: "Header",
        data() {
            return {
                title:'莫荒'
            } 
        }    
    }   
</script>

<style scoped>

</style>

        2.然后在mian.js中注册     

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

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

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

<template>
    <div id="app">
        <MyHeader></MyHeader>
    </div>
<template>

<script>
    export default {
        name: ' app',
</script>

<style>

</style>

        组件的本地注册

                1.同上,首先new一个vue组件,这里省略

                2.在主页面(App.vue)注册组件并使用

<template>
    <div id="app">
        <MyHeader></MyHeader>
    </div>
</template>

<script>
import Header from './components/Header'

export default {
    name: 'app',
    data() {},
    components: {
        "MyHeader":Header
</script>

<style>

</style>

组件之间的参数传递

        1.父传子方式

               关键字段:props,内置其他组件传递的属性值

                props有两种写法
                       

1.props:['参数名'...]


2.props:{
type:String//参数类型
required:true,//是否为必要参数
 default:'XX'//默认值
 }

                定义子组件:

<template>
    <div>
        商品列表...
        {{MyTitle}}
    </div>
<template>
<script>
    export default {
        name: "Content. vue",
        props: ['MyTitle']//子组件中的参数定义
<script>

<style scoped>

<style>

         定义父组件:

<template>
    <div id="app">
        <MyHeader:MyTitle="msg"></MyHeader>//绑定到子组件并给参数赋值
    </div>
<template>

<script>
    import MHeader from './components/Header'
    export default {
        name: 'app'，data() {
            return{
                msg: 'hello vue!'
            }
                
}，

        2.子传父方式 

                定义子组件

<template>
    <div>
        {{MyTitle}}
        <buttontype="button" eclick="btnfn(' hello java')">点我</ button
    </div>
<template>

<script>
    export default {
        name: "Content.vue",
        props: {
            'MyTitle': {
                type : String,
                required: true,
                default:'XX'
            },
            'btnfn': {
                type : Function
        }
    }
}
</script>

        定义父组件 

<template>
    <div id="app">
        <MyContent :MyTitle="msg": btnfn="FCfn"></ MyContent>
    </div>
<template>

<script>
    import MHeader from './components/Header'export default {

    name: 'app',
    data() {
        return {
            msg:'hello vue! !'
            components: {
            MHeader": MHeader
    },
    methods: {
        FCfn : function(m){//hello java
            this.msg = m ;
    }
}

Axios

        Axios是一个开源的可以用在浏览器端和Node]S的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

•                 从浏览器中创建XMLHttpRequest                                                                                                                                               
•                 从node.js 创建http请求
•                 支持Promise API
•                 拦截请求和响应
•                 转换请求数据和响应数据
•                 取消请求
•                 自动转换JSON数据
•                 客户端支持防御XSRF(跨站请求伪造)

1.安装axios:控制台输入命令:cnpm install --save  axios vue-axios

2.在main.js中引入

...
import Vue from 'vue'import axiosfrom 'axios'
import VueAxios from 'vue-axios'
vue.use(VueAxios, axios)
...

  3.使用axios

         例如在app.vue中定义方法:

methods: {
    registfn : function() {
    this.axios(
        method:'get',
        url: '访问路径',
        then(function (response){
        console.log(response.data)
    }) ;

        或

created() {
//因为axios内部的then内的this是当前axios对象，而不是当前vue对象，因此把当前vue对象用vm来指明。这样this不会冲突
    var vm = this;
    this.axios({
        method: 'get',
        url:'地址'
})
.then(function(resp) {
});

      

  在ssm框架中编写请求,略,需要解决跨域问题:

        SSM解决跨域问题_莫荒莫慌的博客-优快云博客

路由

        在vue中的路由,能够帮助我们在一个vue组件中实现与其他组件的相互切换

        1.安装路由模块

                输入命令:npm install vue-router -s

        2.设计界面,略

        3.创建静态路由表 

                在src下创建routes.js

//导入设计界面
import Home from './components/Home.vue'
import User from './components/user/user.vue'

export const routes =[
    {path: '/Home',name:'Home',component:Home},//作用:访问/Home时,跳转到Home.vue
    {
        path: '/user',//路由路径
        name:'User',//路由名称
        component: User//组件名称
}
]

        4.在main.js中使用路由模块以及注册路由表  

import Vue from 'vue'
import App from './App. vue'
import VueRouter from 'vue-router' //1.引入路由模块
import {routes} from './routes' //2.引入静态路由表

Vue.use(VueRouter);//3.使用路由模块

//4.创建一个VueRouter模块的实例
const router = new VueRouter({
routes:routes
});

new Vue({
    el: '#app',
    router,//5.把router实例放入到vue实例中
    render: h => h(App)
})

          App.vue

<template>
    <div id="app">
        <router-view></router-view>//重要代码
    </div>
</template>
...

        5.创建路由链接和路由视图  

        关键代码:

...
<div>
    <router-link to="/Home">去首页</router-link>
</div>
...

路由的参数传递

        首先,需要修改路由表(routes.js)

...
    {path: '/Home/:id',component:Home},//在此前的基础上加上"/:id"即可
 ...

        然后,我们需要在相关联的组件中接收传递的参数

        关键代码:

...
<script>
    export default{
        data(){
            return {
                id :this.$route.params.id
            }
        }
    }
</script>
...

        我们就可以读取到参数并赋给属性 

        路由跳转的方式

                1.通过html中的路由链接进行跳转         

<router-link to="路由地址"></router-link>

                2.通过js实现路由跳转 

methods: {
    btnfn : function () {
        this. $router. push("url");}
}

vue组件样式的scoped属性

        如果vue组件中的style标签没有带上 scoped属性，那么这个style 的样式将会作用在整个页面中，加上 scoped，让样式只作用在当前组件中。.
 

 element

        Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

        官网:Element - The world's most popular Vue UI framework

        安装:

         引入:

        在main.js中导入

...
//引入ElementUI模块
import ElementUI form 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

现在就可以使用element的相关组件,各种组件可以去官网上翻阅

路由的重定向

        在静态路由表中添加如下代码:

    ...
    
    {
        path:'/Logout'//url
        redirect:'/Login'//重定向的位置
        
    },

...

        然后在组件方法中定义

...
methods:{
        logout:function(){
            this.$router.push("/Logout")
    }
}
...

        组件中调用

<router-link to="/Logout">退出</router-link>

vue-element-admin

        vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。

         路由和侧边栏:

                整个项目的侧边栏是通过路由表动态生成的,可以调整路由表中的内容来改变侧边栏的内容

vue整体的学习在这里就告一段落!