五分钟学会使用vue+element ui写前端

天幕安全团队 2022-09-20

785

请原谅我是个标题党，拖更了好久，今天团队的兄弟说有个大佬五分钟学会vue，我想着水个文吧。先说好，本文并不是说使用的多高级，但是对于搞安全的人来说，写个前端啥的也基本上够用了，我也不敲概念啥的了百度上一堆，下面开始正题

vue和jq区别：

jQuery 是使用选择器选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的。而Vue 则是通过 Vue 对象将数据和 View 完全分离开来了对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定，这就是传说中的 MVVM

案例：

  <div id="app">
          <!-- {{}} 插值表达式，绑定vue中的data数据 -->
          {{message}}
    </div>
    <script src="vue.min.js"></script>


    <script>
         创建一个vue对象
        new Vue({
            el: '#app',//绑定vue作用的范围
            data: {//定义页面中显示的模型数据
                message: 'Hello Vue!'
            }
        })
</script>

单向绑定：

当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新，一旦数据变化，就去更新页面(只有data-->DOM，没有DOM-->data)

<div id="app">
        <!-- v-bind指令
            单向数据绑定
            这个指令一般用在标签属性里面，获取值
        -->
        <h1 v-bind:title="message">
            {{content}}
        </h1>


        <!--简写方式-->
        <h2 :title="message">
                {{content}}
            </h2>


    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
</script>

双向绑定：

把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了

  <div id="app">
        <input type="text" v-bind:value="searchMap.keyWord"/>
        <!--双向绑定-->
        <input type="text" v-model="searchMap.keyWord"/>


        <p>{{searchMap.keyWord}}</p>


    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: 'test'
                }
            }
        })
</script>

事件操作：

使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名；
事件的回调需要配置在 methods 对象中，最终会在 vm 上
methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了
methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或组件实例对象；
@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

<div id="app">
        <!--vue绑定事件-->
        <button v-on:click="search()">查询</button>


        <!--vue绑定事件简写-->
        <button @click="search()">查询1</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: 'test'
                },
                查询结果
                result: {}
            },
            methods:{//定义多个方法
                search() {
                    console.log('search....')
                },
                f1() {
                    console.log('f1...')
                }
            }
        })
</script>

事件修饰符

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<div id="app">
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.username"/>
            <button type="submit">保存</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit() {
                    if (this.user.username) {
                        console.log('提交表单')
                    } else {
                        alert('请输入用户名')
                    }
                }
            }
        })
</script>

vue指令v-if：

v-if
指令是会根据表达式值的真假，切换元素的显示和隐藏，其实是在操作dom
元素。
v-if
和js
里的if
差不多，也是会有v-else-if
和v-else
，js
里的if
判断是用于在js
语法里面的判断，v-if
在vue
中是对于代码块的判断

<div id="app">
        <input type="checkbox" v-model="ok"/>是否同意
        <!--条件指令 v-if  v-else -->
        <h1 v-if="ok">01</h1>
        <h1 v-else>02</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
</script>

v-for指令：

v-for指令有以下三种利用方式

利用v-for="(item,i) in list"
循环普通数组；
利用v-for="(user,i) in list"
循环数组对象；
利用v-for="(val,key,i) in user"
循环对象

<div id="app">
        <ul>
            <li v-for="n in 10"> {{n}} </li>
        </ul>
        <ol>
            <li v-for="(n,index) in userList">{{n}} -- {{index+1}}</li>
        </ol>


        <hr/>
        <table border="1">
            <tr v-for="user,index in userList">
                <td>{{index}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>


            </tr>
        </table>


    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                        {  username: 'a', age: 10 },
                        {  username: 'b', age: 20 },
                        {  username: 'c', age: 30 }
                    ]
            }
        })
</script>

vue组件：

组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。每个组件都是Vue的实例对象。我们实例化的Vue对象就是一个组件，而且是所有组件的根组件

 <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            定义vue使用的组件
            components: {
                组件的名字
                'Navbar': {
                    组件的内容
                    template: '<ul><li>首页</li><li>学员管理</li></ul>'
                }
            }
        })
</script>

vue组件全局组件：

<div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/Navbar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {


            }
        })
</script>

vue生命周期：

Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口

 <div id="app">
           hello 
</div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
            },
            created() {
                debugger
                //在页面渲染之前执行
                console.log('created....')
            },
            mounted() {
                debugger
                //在页面渲染之后执行
                console.log('mounted....')
            }
        })
</script>

vue路由：

 <div id="app">
            <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                <router-link to="/teacher">讲师管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
    </div>


    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>


    <script>
            // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }


    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]


    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })


    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })
</script>