请原谅我是个标题党，拖更了好久，今天团队的兄弟说有个大佬五分钟学会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 告诉浏览器你不想阻止事件的默认行为
<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>
-
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="(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>
<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>
<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实例从创建到销毁的全过程，也就是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>
<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>
复制图中的代码：
原文始发于微信公众号（天幕安全团队）：五分钟学会使用vue+element ui写前端
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论