关于Vue的简单使用

这是我参与更文挑战的第16天，活动详情查看：更文挑战

前段时间总结了关于Vue项目的创建和启动，接下来总结一下关于Vue的简单使用。

一、vue数据

1、div中{{msg}}表示动态绑定数据；

2、<script>标签中定义数据；

则页面会动态获取数据并渲染出来。

二、vue常用指令

• v-if指令

条件渲染指令，它根据表达式的真假来删除和插入元素

基本语法：
v-if="expression"

expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。

• v-show指令

v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染

• v-else指令

v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容

• v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似

v-for="item in list"

其中list是一个数组，item是当前遍历的数组元素

v-for="(item,index) in list"

其中index是当前循环的索引，下标从0开始

• v-bind指令

v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名

v-bind可用:替代

v-bind:class="isLogo?'':'product'" = :class="isLogo?'':'product'"

• v-on指令

v-on用于监听DOM事件, 用法和v-bind类似，例如给button添加点击事件?

<button v-on:click="show">
复制代码

同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改上面这行代码：

<button @click="show">
复制代码

三、vue数据绑定

1、绑定属性：

<template>
    <div id="app">
        <img src=""/>
        <br>
        <!--绑定属性-->
        <img v-bind:src="https://juejin.cn/post/url"/>
    </div>
</template>

<script>
export default{

    data() {
        return{
            url:'#'
        }
    }
}
</script>

复制代码

绑定方式：{{msg}} 或者 <div v-text:"msg"></div>

2、双向数据绑定：

Vue.js其实是一种MVVM的框架。

什么是MVVM，M就是Model，V就是View。

所以MVVM就代表着 model改变会影响视图view,view视图改变反过来影响model。

比如下面这个表单的双向绑定例子：

<!--双向绑定数据：表单-->
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
复制代码

效果：

当input框内的数据改变时，外面的数据也会发生改变。也就是所谓的双向绑定。

四、vue事件

首先定义方法：

<button v-on:click="run1()">执行方法的第一种方法<button>
<button @click="run2()">执行方法的第二种方法<button>
复制代码

然后书写方法：

run1(){
alert('第一种写法');
},
run2(){
alert('第二种写法');
}
复制代码

比如我们写一个按钮请求数据的方法：

    <!--请求数据-->
    <hr>
    <button @click="requestData()">请求数据</button>
    <ul>
        <li v-for="(item,key) in list">
            {{key}} <br>
            {{item}}
        </li>
    </ul>
复制代码

    run1(){
        alert('第一种写法');
    },
    run2(){
        alert('第二种写法');
    }
复制代码

效果就是当我们请求数据的按钮的时候，页面就会加载出来我们list里面的数据。

五、vue中组件的生命周期函数

生命周期函数就是组件挂载以及组件更新组件销毁的时候触发的一系列的方法。

比如我们创建一个组件：

<template>
    <!-- 生命周期函数 -->
    <div >
        <h2>生命周期函数--{{msg}}</h2>
        <button @click="beforeCreate()">run</button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
            msg:'msg'
            }
        },
        methods:{
            setMsg(){
            this.msg="我是改变后的数据"
            }
        },
        // 生命钩子函数
        beforeCreate(){
            console.log('实例创建之前');
        },
        created(){
            console.log('实例创建完成');
        },
        beforeMount(){
            console.log('模板编译之前');
        },
        mounted(){
            console.log('模板编译完成'); //请求数据，操作dom，放在这个里面
        }
    }
</script>
复制代码

然后在App.vue中引入、挂载、使用，最终效果如下：

六、父组件给子组件传值

在vue当中，是可以通过父组件给子组件传值的，步骤如下：
1、父组件调用子组件的时候，绑定动态属性

    <v-header :title="title"></v-header>
复制代码

2、在子组件里面通过props接收父组件传过来的数据
在header.vue中：

<script>
    export default {
        data(){
            return{
            msg:'msg'
            }
        },
        methods:{},
        props:['title'，msg] //接收父组件的title
    }
</script>
复制代码

七、父组件主动获取子组件的数据和方法

除了让父组件传值给子组件，父组件也可以主动获取子组件的数据。

第一步，调用子组件的时候定义一个ref

    <v-header ref="header"></v-header>
复制代码

第二步。在父组件里面通过
this.$refs.header.属性来调用

getChildData(){
    alert(this.$refs.header.msg);
}
复制代码

效果?

八、 子组件主动获取父组件的数据和方法

子组件想要主动获取父组件的数据，只需要通过this.$parent.数据/方法

getParentData(){
    alert(this.$parent.msg)
}
复制代码

九、vue非父子组件传值

首先可以使用一个空的Vue实例作为事件总线，

1、新建一个js文件，然后引入vue,实例化vue,最后暴露出这个实例

//引入一个空的vue实例
import Vue from 'vue';

var VueEvent=new Vue()

export default VueEvent
复制代码

2、在要广播的地方引入刚才定义的实例

<script>
    //引入vue实例
    import VueEvent from '../model/VueEvent.js';
<script/>
复制代码

3、通过VueEmit.$emit('名称','数据')

methods:{
    emitHome(){
        VueEvent.$emit('to-home',this.msg)
    }
}
复制代码

4、在接收数据的地方通过$on接收广播的数据
VueEmit.$on('名称'，function(){})

mounted(){
    VueEvent.$on('to-news',function(data){
        console.log(data)
    })
}
复制代码

十、vue中的路由

首先是vue当中的路由配置

1、安装

npm install vue-router --save     
cnpm install vue-router --save
复制代码

2、引入并Vue.use(VueRouter) (main,js)

import VueRouter from 'vue-router'

Vue.use(VueRouter)
复制代码

3、配置路由

1）创建组件 引入组件
（2）定义路由

    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
复制代码

（3）实例化VueRouter

    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })
复制代码

（4）挂载

   new Vue({
       el:'#app',
       router,
       render:h=>h(App)
   })
复制代码

（5）要在根组件的模板里面放置

    <!-- 路由匹配到的组件将渲染在这里   放在App.vue里面 -->
    <router-view></router-view>
复制代码

4、导航路由的转换

    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
复制代码

5、重定向 默认跳转路由

    { path: '*', redirect: '/home' }
复制代码

十一、ElementUI的使用以及webpack.config.js配置

1、elementUI官网

2、安装

    cnpm i element-ui  --save
复制代码

3、引入element UI的css和相关插件

     import ElementUI from ' element-ui ' ;
     import ' element-ui.lib.theme-chalk/index.css' ;
     Vue.use( ElementUI ) 
复制代码

4、配置file_loader

    {
       test: /\ . (eot\svg\ttf\woff\woff2) ( \?\S*) ?$/,
       loader: ' file-loader'
    }
复制代码

5、看文档使用即可。

除了直接引入整个elementUI，我们还可以按需引入，就可以减小项目体积。

1、借助 babel-plugin-component
安装?

npm install babel-plugin-component -D
复制代码

2、找到.babelrc配置文件

{
    "presets": [
        ["env", { "modules": false }],
        "stage-3"
    ]
}
复制代码

修改成

{
    "presets": [["env", { "modules": false }]],
    "plugins": [
        [
            "component",
            {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}
复制代码

3、使用
引入某个我们需要的elmentUI组件：

import { Button, Select } from 'element-ui';
复制代码

然后使用：

Vue.use(Button)
Vue.use(Select)
复制代码

简单的总结到这里，还需更深入的了解才能融会贯通这些知识~~