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.csdn.net/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.csdn.net/Ms_future?type=blog">莫荒</>'
})

v-text:

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

用法:


<span v-text="link"/>
 
new Vue({
 
    data:'<a href="https://blog.csdn.net/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解决跨域问题_莫荒莫慌的博客-CSDN博客

路由

在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整体的学习在这里就告一段落!

相关阅读:
如何在Linux系统下安装Docker
科技与时尚共进化，优衣库以硬实力创造品牌长期价值
迅为IMX8M开发板设备树下的platform驱动实验程序编写
计算机毕业设计Java影音娱乐销售管理系统(系统+程序+mysql数据库+Lw文档）
docker启动mysql8目录挂载改动
C#开发的OpenRA游戏之金钱系统（5）
深入理解Kafka核心设计及原理（四）：主题管理
Flutter快速入门学习（一）
【C语言】【动态内存管理】malloc,free,calloc,realloc
Qemu镜像安全加密测试

原文地址：https://blog.csdn.net/Ms_future/article/details/125355458