1. vue 事件绑定
Vue 事件绑定，需要 v-on 指令，v-on: 可以简写成@；后面跟不带 on 的事件名
v-on: 事件名绑定一个函数名，这个函数名去 methods 里面找；
<div id="app"><button @click="fn">点我试试</button><button @click="fn(x, y)">点我试试2</button><button @click="fn($event, 3, 4)">点我试试3</button><div class="box" v-if="flag">A</div></div><script src="vue.js"></script><script>let vm = new Vue({el: '#app',data: {flag: true,x: '0001',y: '0002'},methods: {fn(e, a, b) {// 1. 在绑定事件时不传参，事件函数第一个参数是事件对象；// 2. 如果在绑定事件时传参了，传了啥，参数接收到的就是啥// 3. 如果既想用事件对象，又想传参，需要在绑定事件时，小括号里面第一个写 $event，后面再写真实的参数// console.log(e);// console.log(a);// console.log(b);// console.log(123);this.flag = !this.flag; // this.flag 访问flag},gn(x, y) {this.fn();}}})</script>
2. vue 事件修饰符
事件修饰符是为了方便 Vue 中的事件处理，特有的一种修饰符号；
用法：@事件名.修饰符
事件修饰符可以连用：@click.prevent.stop
常见的事件修饰符
.prevent 阻止元素的默认行为
.stop 阻止事件冒泡
.capture 事件在捕获阶段触发
.once 事件只会执行一次
.self 自身的事件触发时才执行事件函数
键盘事件修饰符
.enter 回车
.esc esc键
.delete 删除键
.space 空格
.tab tab键
.up 上键
.down 下
.left 左
.right 右
<div id="app"><a href="https://www.baidu.com" @click.prevent="fn">百度</a><div @click="parent">parent<div @click="child">child<div @click.stop="grandchild">grandson</div></div></div><div><input type="text" v-model="num" @keydown.up="add"></div></div><script src="vue.js"></script><script>let vm = new Vue({el: '#app',data: {num: 1},methods: {add () {this.num++; // 通过 this.num 来访问 data 里面的 num},fn() {console.log(1);},parent() {console.log('parent');},child() {console.log('child');},grandchild() {console.log('grandchild');}}});</script>
3. 简易 todolist
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>simple todolist</title></head><body><div id="app"><input type="text"id="todoInput"@keydown.enter="add"v-model="todo"><ul id="list"><li v-for="(item, index) in todoList" :key="index">{{item}}<button @click="remove(index)">删除</button></li></ul></div><script>/* let input = document.getElementById('todoInput');let list = document.getElementById('list');input.onkeydown = function (e) {if (e.keyCode === 13) {let str = `<li>${this.value} <button>删除</button></li>`;list.innerHTML += str;}};list.onclick = function (e) {if (e.target.nodeName.toUpperCase() === 'BUTTON') {list.removeChild(e.target.parentNode)}}*/</script><script src="vue.js"></script><script>let vm = new Vue({el: '#app',data: {todo: '',todoList: []},methods: {remove(index) {this.todoList.splice(index, 1);},add() {// this.todo 和 input 是双向数据绑定的，我们在 input 中输入内容，vue 会把 input 中// 的值保存到 this.todo 上this.todoList.push(this.todo);this.todo = ''; // 添加到 todoList 后，清空 input}}});</script></body></html>
Vue 是数据驱动，不需要我们操作 DOM；我们只需要操作数据，当 Vue 发现数据变化了，它会把页面中用到这个数据的所有地方按照数据的最新值重新渲染；视图(HTML)是数据的映射，所谓映射是一个改另一个跟着改；当数据发生变更后，视图也会跟着改
4. 过滤器
过滤器：是一种处理数据但是不会改变原数据的数据处理方式，一般用来格式化数据
| 叫做管道符，把它前面的值传递给过滤器函数的第一个参数；然后数据就会展示成过滤器函数的返回值；过滤器可以连续使用，后面的过滤器的参数，是上一个过滤器的处理结果，数据会展示成最后一个过滤器的结果；过滤器可以传参，参数是传给第二个形参的，第一个参数是管道符前面的值
<div id="app"><ul><li v-for="(item, index) in products" :key="index">商品{{item.name}}价格{{item.price | toDollar}}国行{{item.price | toRMB | toFixed(3)}}</li></ul></div><script src="vue.js"></script><script>// 全局过滤器：Vue.filter(过滤器, callback)// Vue.filter('toDollar', (val) => '$' + val);// Vue.filter('toRMB', (val) => val * 6.85344567);// Vue.filter('toFixed', val => '￥' + val.toFixed(2));let vm = new Vue({el: '#app',data: {products: [{name: 'Mac',price: 2000},{name: 'iphoneX',price: 1000}]},filters: { // 写在 filters 里面的过滤器是局部过滤器// toDollar: function (val) {},toDollar (val) {return'$' + val},toRMB(val) {return val * 6.85344567},toFixed(val, num = 2) {return '￥' + val.toFixed(num);}}})</script>
5. radio 和 v-model
多个 radio v-model 同一个属性，这些 radio 就是一组，每次只能有一个选中，v-model 的值是被选中的 radio 的 value
<div id="app">性别：<label>男：<input type="radio" v-model="sex" value="1"></label><label>女：<input type="radio" v-model="sex" value="2"></label><label>未知：<input type="radio" v-model="sex" value="3"></label><br>{{sex}}</div><script src="vue.js"></script><script>let vm = new Vue({el: '#app',data: {sex: 3}})</script>
6. checkbox
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><div><!--当 checkbox 只有一个的时候，vue 会把 val 默认转成布尔值，如果转完之后是 true，checkbox 就是选中状态，否则不选中--><!--当 checkbox 选中状态发生变化的时候会触发 onchange 事件；-->爱好：<label>吃饭：<input type="checkbox"v-model="val"@change="fn"value="1"></label></div>{{val}}<div><!--多个 checkbox 要 v-model 一个数组，当选中某一个 checkbox，这个 checkbox 的 value 会进到数组中，如果你取消某一个 checkbox，这个 checkbox 的 value 会自动从数组中移除掉-->爱好：<label>唱<input type="checkbox"v-model="hobby"@change="checkChange"value="1"></label><label>跳<input type="checkbox" v-model="hobby" value="2" @change="checkChange"></label><label>RAP<input type="checkbox" v-model="hobby" value="3" @change="checkChange"></label><label>篮球<input type="checkbox" v-model="hobby" value="4" @change="checkChange"></label></div>{{hobby}}</div><script src="vue.js"></script><script>let vm = new Vue({el: '#app',data: {val: 1,hobby: ['3', '4']},methods: {fn() {console.log(this.val);},checkChange() {console.log(this.hobby);}}})</script></body></html>
7. 下拉列表
select 下面的 option 都有一个 value 属性，select v-model 的值和 option 的 value 相同的时候，option 会被选中；当 option 切换的时候会触发 select 的 onchange 事件
<div id="app"><select v-model="lunch" @change="lunchChange"><option value="1">孟记粥铺</option><option value="2">张亮麻辣烫</option><option value="3">田老师</option></select>{{lunch}}<br><!--textarea 通过 v-model 和某个属性双向数据绑定--><button @click="clear">清空</button><button @click="bigText = ''">清空</button><textarea v-model="bigText" cols="30" rows="10"></textarea><p>{{bigText}}</p></div><script src="vue.js"></script><script>let vm = new Vue({el: '#app',data: {lunch: 2,bigText: '这是一段超长文本'},methods: {lunchChange() {console.log(this.lunch);},clear() {this.bigText = '';}}})</script>
8. vue-axios
<div id="app"><ul><li v-for="(item, index) in result" :key="index">{{item.name}}<ul><li v-for="(fruit, fIndex) in item.list":key="fIndex">{{fruit}}</li></ul></li></ul></div><script src="axios.js"></script><script src="vue.js"></script><script>let vm = new Vue({el: '#app',data: {result: []},filters: {},methods: {getData() {axios.get('list.json').then(({data}) => {// console.log(data);this.result = data; // 拿到服务端返回的数据后，直接修改result，然后 vue 就知道 result 发生了变更，vue 就会按照最新的值渲染页面；})}},created() {// created 是 Vue 生命周期的钩子函数；// Vue 里面绝大多数的 ajax 请求都是在这里发送的// 一般是把请求封装成一个方法放到 methods 里面，然后在 created 里面调用；this.getData(); // 要通过 this 访问 methods 里面的方法}})</script>
9. 使用 bootstrap
bootstrap 是 css 框架，依靠类名来控制元素的样式；bootstrap 内置了很多样式，都是有固定类名的，当你需要这个样式的时候，在元素上加一个类名就可以了；
- bootstrap 采用的栅格布局，会把屏幕的宽分为12份；
- 常用的类名：
2.1 .container 会让元素水平居中
2.2 .row 行，一行是12列
2.3 .col-lg-x 大屏幕
2.3 .col-md-x 中等屏幕
2.4 .col-sm-x 小屏幕
2.5 .col-xs-x 超小屏幕
若有收获，就点个赞吧
0 人点赞
