Vue基础+ElementUI框架

一、导入Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

二、Vue基本语法

<div id="op">
        <span v-bind:title="msg">鼠标绑定事件,鼠标放上去会显示A</span>
    </div>
    <script>
        const vm = new Vue({
            el: "#op",
            data: {
                msg: 'A',
            }
        }); 
    </script>

if判断
<div id="op">
        <h1 v-if ="msg==='A'">A</h1>
        <h1 v-else-if ="msg==='B'">B</h1>
        <h1 v-else>C</h1>
    </div>
    <script>
        const vm = new Vue({
            el: "#op",
            data: {
                msg: 'A',
            }
        }); 
    </script>

for循环
 <div id="op">
        <ul>
           <li v-for = "item in items">
               {{items.message}}
           </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: "#op",
            data: {
                items: [
                    { message: 'A' },
                    { message: 'B' },
                    { message: 'C' },
                ]
            }
        }); 
    </script>

绑定事件

 <div id="op">
        <button v-on:click="sa"> me</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#op",
            data: {
                message: "出来"
            },
            methods: {
                sa: function(){
                    alert(this.message)
                }
            }
        }); 
    </script>

v-model双向绑定
<div id="op">
        <textarea v-model="message"></textarea>{{message}}
        <p>输入：</p><input type="text" v-model="message">{{message}}
    </div>
    <script>
        var vm = new Vue({
            el: "#op",
            data: {
                message: "123"
            },
        }); 
    </script>
    表单双向绑定
    <div id="op">
        <input type="radio"name="sex" value="男"v-model="atp">男
        <input type="radio"name="sex" value="男"v-model="atp">女
        <p>选中了:{{atp}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#op",
            data: {
                atp: ''
            },
        }); 
    </script>
    下拉框双向绑定
    <div id="op">
        <select v-model="atp">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>v:{{atp}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: "#op",
            data: {
                atp: ''
            },
        }); 
    </script>

组件

<div id="op">
        <!-- 组件：传递给组件中的值：props -->
    <hahah v-for="item in atp" v-bind:t="item"></hahah>
    </div>
    <script>
        //定于一个Vue组件component
        Vue.component("hahah",{
            props: ['t'],
            template: '<li>{{t}}</li>'
        }) ;
        var vm = new Vue({
            el: "#op",
            data: {
                atp: ["前端","后端","服务端"]
            },
        }); 
    </script>

Axios异步通信
导入Axios在线包
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

slot插槽事件

<div id="op">
     <todo-title slot="todo-title" :title="title"></todo-title>
     <todo-items slot="todo-items" v-for="item in todoItems":item="item"></todo-items>
    </div>
    <script>
        Vue.component("todo",{
              template:'<div>\<slot></slot>\
                            <ul>\
                                <slot></slot>\
                            </ul>\
                        </div>'
        });
        Vue.component("todo-title",{
            props: ['title'],
            template:'<div>{{title}}</div>'
        });
        Vue.component("todo-items",{
            props: ['item'],
            template:'<li>{{item}}</li>'
        });
        var vm = new Vue({
            el: "#op",
            data : {
                title:"hhhh",
                todoItems : ['第一个','第二个','第三个']
            }
        }); 
    </script>
</body>

自定义事件
 <div id="op">
     <todo-title slot="todo-title" :title="title"></todo-title>
     <todo-items slot="todo-items" v-for="item in todoItems":item="item" 
     v-bind:index="index" v-on:remove="removeItems(index)":key="index"></todo-items>
     
    </div>
    <script>
        Vue.component("todo",{
              template:'<div>\<slot></slot>\
                            <ul>\
                                <slot></slot>\
                            </ul>\
                        </div>'
        });
        Vue.component("todo-title",{
            props: ['title'],
            template:'<div>{{title}}</div>',
            
        });
        Vue.component("todo-items",{
            props: ['item','index'],
            //只能绑定当前组件的方法
            template:'<li>{{index}}--{{item}}<button @click="remove">删除</button></li>',
            methods: {
                remove: function(index){
                    //this.$emit自定义事件分发
                    this.$emit('remove',index);
                }
            }
        });
        var vm = new Vue({
            el: "#op",
            data : {
                title:"hhhh",
                todoItems : ['第一个','第二个','第三个']
            },
            methods: {
                removeItems:function(index){
                    console.log("删除了"+this.todoItems[index])
                    this.todoItems.splice(index,1);
                }
            }
        }); 
    </script>

Webpack打包

首先建一个项目文件夹，然后在项目文件夹中建两个js文件
第一个

exports.sh = function(){
    document.write("<h1>123</h1>");
}

第二个这个是运行的入口，来调用第一个中的方法

var hello =require("./hod");
hello.sh();

然后在项目文件夹外面建一个打包文件webpack.config.js：名字不能变，否则在打包的过程中会报错

module.exports = {  //webpack.config.js中的代码
    entry:'./mode/main.js',//文件入口，指订Web用哪个文件做为项目入口
    output:{//输出，指订Webpack把处理完成的文件放置到指订的路径
        filename: "./js/bundle.js"
    }
}

建好以后去调试，在VS Code终端输入webpack进行包，打包成功会出来dist文件夹里面的js文件就是被打包好的，然后再建个HTML文件进行调用打包的js

<script src="dist/js/bundle.js"></script>

Vue创建工程文件

路由配置

首先建一个工程文件然后配置router如下：

然后在工程文件下新建一个文件夹components，在文件夹下面新建vue网页作为跳转页输入内容
去index.js文件里面配置路由

import Vue from 'vue'
//导入router包
import VueRouter from 'vue-router'
    //vue文件名     文件夹名字和vue文件名
import Conts from '../components/Conts'
import Mian from '../components/Mian'
import he from '../components/he'

//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
    routes:[{
        //路由路径
        path:'/content',
        
        //跳转的组件
        component:Conts
    },
    {
        //路由路径
        path:'/main',
       
        //跳转的组件
        component:Mian
    },
    {
        //路由路径
        path:'/he',
       
        //跳转的组件
        component:he
    }]
});

在main.js下配置
import Vue from 'vue'
import App from './App'
//导入router包
import router from './router'//自动扫描里面的路由配置文件index.js
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//调用router
  components: { App },
  template: '<App/>'
})

最后一步去App.vue下去调用
<template>
  <div id="app">
    <h1>123</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-link to="/he">新增</router-link>//此标签和HTML中的标签相似
    <router-view></router-view>//显示内容
  </div>
</template>

<script>

启动终端输入 npm run dev  进行调试，，，最后运行效果图

调用ElementUI框架

建一个views文件夹用来存放Vue文件，建一个router文件夹放路由配置
配置路由界面
import Vue from 'vue'  
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'

Vue.use(Router);
//配置路由
export default new Router({
    routes:[
        {
            path :'/main',
            component:Main
        },
        {
            path :'/login',
            component:Login
        }
    ]
});

调用界面
import Vue from 'vue'
import App from './App'
//导入router包
import router from './router'
//导入ElementUI 框架
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(router);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)//声明ElementUI
})

使用
<template>
  <div id="app">
    <h1>123</h1>
    <router-link to="/login">首页</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  
}
</script>

<style>

</style>