Vue基础使用

----基础指令和内容插值

Mustache插值语法 {{ 插值 }} 插值可以为变量 或者 表达式

v-once 只渲染一次

v-text 不识别html标签 相当于 innerText 会将指定变量的值作为标签内容显示 v-text会等vue实例完成初始化才会生效

v-html 识别html标签 相当于innerHTML

v-cloak 隐藏插值标签 在vue实例化完成后 v-cloak会自动删掉 [v-cloak] { display: none;} 可设置样式 防止在网络不好等因素下造成的{{}} 插值渲染不出来

 

v-bind:属性名  进行属性绑定 缩写 :属性名

绑定class属性并设置  

1.如果属性值为undefined或null 则class属性不会添加到标签上

2.如果属性值为true false 0 '' NaN 其他数字值 class属性会添加到标签上 但是没有属性值

3.其他如字符串的正常值 都会作为标签属性值渲染上

 

设置动态属性 :[attr] = "" 动态参数attr的初始值要么是一个具体的字符串属性名 要么是null 

 

 

v-if v-else v-else-if 进行条件判断渲染

v-if 如果值为false 则直接就不会渲染

v-show 如果值为false 会渲染 但是display:none

 

v-for 根据v-for放置的标签 循环渲染这个标签 

key为唯一标识 用来维持状态 不推荐用idx

(item, idx) in list 中顺序就是item,idx

除了可遍历数组外 也可以遍历对象的每个属性 顺序为(val, key, idx)

v-for 渲染的data property值为数组/对象
1.修改整个property的值 view层可以响应
2.直接修改property的数组值的某一项(例如直接新增) view层无法响应 
3.通过vue提供的包装过的侦听方法 对property数组进行操作 view可以响应

 

v-on:事件名  监听事件  缩写 @事件名

事件修饰符 .prevent 阻止默认事件 == e.preventDefault()

.stop 阻止冒泡 == e.stopPropagation()  例如 @click.prevent.stop="add"

----class动态绑定  style动态绑定

----computed 计算属性

用于将原始数据进行处理加工后展示

 

computed中的计算属性可以直接使用

info1, info 是直接给app挂载了一个同名属性

如果写成函数形式 就只有get()

如果写成对象代理 就可以有get set 代理

computed基于响应式依赖进行缓存 当依赖发生改变后计算属性才会改变

不要在computed里面做异步操作

----v-model

数据双向绑定

修饰符 v-model.lazy 懒加载 例如input输入框 由默认的input事件触发改为了change事件触发

v-model.number 将输入值转换为数字 如果转换不了 还是显示原始值

v-model.trim 清除首尾空白字符串

----watch 侦听器

可以侦听属性的变化 进行回调

属性名称(当前值, 之前值) {}

watch容许执行异步操作 针对属性被动触发 当属性改变的时候触发setter && 两次值不同

 

也可以写成对象形式

handler 属性改变时触发的回调函数

immediate 组件创建时刻是否执行

deep 深度监听 如果监听的属性是对象 不开启deep 那么对象子属性发生变化是不会触发watch的 开启deep才可以监听到 但由于监听的是对象 对对象的引用是同一个 所以新对象和旧对象是一个引用 属性值是一样的

----filters 针对数据的工具方法 没有this

使用方式  实参 | 函数名(参数2,参数3...) | 函数名(参数2,参数3...)....

可叠加函数 实参会作为第一个函数的第一个参数传入 如果有多个参数 可从第二个参数进行传递 而后如果叠加函数 那么前一个函数的返回值会作为后一个函数的第一个参数传入