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

admin 2022年10月1日13:16:34评论19 views字数 5230阅读17分26秒阅读模式

请原谅我是个标题党,拖更了好久,今天团队的兄弟说有个大佬五分钟学会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>

事件操作:

  1. 使用 v-on:xxx 或 @xxx 绑定事件,其中 xxx 是事件名;

  2. 事件的回调需要配置在 methods 对象中,最终会在 vm 上

  3. methods 中配置的函数,不要用箭头函数!否则 this 就不是 vm 了

  4. methods 中配置的函数,都是被 Vue 所管理的函数,this 的指向是 vm 或 组件实例对象;

  5. @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>
事件修饰符
  1. .stop 阻止事件继续传播

  2. .prevent 阻止标签默认行为

  3. .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理

  4. .self 只当在 event.target 是当前元素自身时触发处理函数

  5. .once 事件将只会触发一次

  6. .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:
  1. v-if指令是会根据表达式值的真假,切换元素的显示和隐藏,其实是在操作dom元素。

  2. v-ifjs里的if差不多,也是会有v-else-ifv-elsejs里的if判断是用于在js语法里面的判断,v-ifvue中是对于代码块的判断

<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指令有以下三种利用方式
  1. 利用v-for="(item,i) in list"循环普通数组;

  2. 利用v-for="(user,i) in list"循环数组对象;

  3. 利用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>
搭配Element UI
访问Element UI的官网,找见组件页,访问页面中的箭头所指的所需组件,然后鼠标悬浮到另一个箭头所指位置,会出现显示代码:

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


复制图中的代码:

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

丢到一个你的vue代码里面,完成,运行效果:

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

注意:官网的组件有一堆,我只是拿radio做个案例!!!!
有问题别问我,梦里敲的,敲的东西我也不知道是啥

原文始发于微信公众号(天幕安全团队):五分钟学会使用vue+element ui写前端

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年10月1日13:16:34
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   五分钟学会使用vue+element ui写前端https://cn-sec.com/archives/1306314.html

发表评论

匿名网友 填写信息