vue.js,是一个个人项目,目前是国内使用比较广泛的。国内十家公司的vue只能有一种写法
基础api
-
v-model
作用是实现页面中表单元素和data数据的双向绑定。是一个语法糖,相当于绑定了表单元素的input事件和value值。当输入框的值变化的时候data中的数据跟着变化。实现的原理是Object.defineProperty
可以添加修饰符:number(转换为数字)、trim(去空格)
-
v-bind
作用是绑定标签的属性,可以简写为:
绑定样式的时候可以为样式写成对象的形式:属性名表示样式名,属性值为bool值,如果值为true表示这个样式生效,否则这个样式效果无效
-
v-html
是绑定一个富文本内容,相当于设置innerHTML属性
-
v-text
相当于设置innerText属性
-
v-on
作用是事件绑定,可以简写为@符号。在vue中绑定事件的时候只写事件名字就好
处理键盘事件的时候可以加修饰符,具体的可用修饰符可以参考官网事件处理 — Vue.js
最常用的一个按键修饰符是enter
-
v-for
循环遍历,展示数据。是以后用到的最多的一个指令
可以对数组,数字,字符串,对象这些数据做循环
<ul> <!-- list表示需要循环的数据 item表示循环到的每一项,index表示索引;其中item和index是形参,叫什么都可以; 循环的时候建议为每一项设置一个唯一的key,他的作用是做节点替换时候性能优化使用 --> <li v-for="(item, index) in list" :key="item.id">{ {index}}-{ {item}}</li> </ul>
-
v-if
是直接删除或者插入标签
-
v-show
是控制标签的display属性
在实际使用的时候v-show的性能更高一些,建议使用
-
filter
过滤器,作用是对数据做过滤显示
-
watch
监听数据的变化,数据改变之后会触发一些列其他的操作
watch的应用场景:一个数据改变之后引起的一些列其他连锁反应
-
computed
当依赖的数据改变之后重新计算一个结果。计算属性具有缓存功能,当依赖数据没有改变的时候不会重新计算
计算属性和方法调用的区别:
-
方法调用需要加括号,计算属性不用
-
方法调用每一次页面更新的时候都会执行
-
计算属性只有在依赖的数据改变的时候才会执行
有两种写法:
... computed: { val1() { return 'xxx' }, val2: { set(v) { }, get() { return ...... } } } ...
计算属性的应用场景:多个数据改变之后引起的一个计算结果
-
-
组件
组件是vue中很重要的一个东西,是vue项目的主要组成部分。组件可以理解为自定义标签
-
组件定义
组件定义的时候有常见的两种:局部组件和全局组件
-
局部组件
局部组件在使用的时候需要先进行注册,使用components属性进行注册
const hello = { template: ``//.... }
-
全局组件
可以直接使用不需要注册
Vue.component('xx', { template: '' })
-
-
组件嵌套
组件中可以调用另一个组件。组件之间时可以相互嵌套的,在使用之前也是需要先注册
-