【review】vue 语法

vue语法

基于html模板语法

<div class="err-info-div">{{accountErrInfo}}</div>

属性动态绑定和修饰符

.sync   同步修饰符
带有 .sync 修饰符的 v-bind 不能和表达式一起使用
用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用
把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器

<el-dialog :close-on-click-modal="false" :title="dialogTitle" 
               :visible.sync="modelStatus" width="780px" @close="closeModel"></el-dialog>

 

 

• :class  数组语法
• :class  对象语法
• :class  字符变量语法
• 带有连接符的变量声明用引号包起来

<div :class="[err-info-div1,err-info-div2]">{{accountErrInfo}}</div>
<div :class=" 'text-danger': hasError">{{accountErrInfo}}</div>
<div :class="errstyle">{{accountErrInfo}}</div>

:style 同 class

js表达式

computed: {
	nCsfsText(){
		return ( this.operForm.nCsfs == 1)?"电催":"上门"
	},
},

指令 (Directives) 是带有 v- 前缀的特殊特性

: 对于特性名来说都是合法字符  语法缩写 v-bind
@ 对于特性名来说都是合法字符  语法缩写 v-on
v-if  条件渲染
v-else-if  条件渲染
v-else  条件渲染
key 管理可复用的元素  渲染顺序也和他有关
v-show  条件渲染   display:none; 争对 block tag
v-if  惰性 如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show  有初始渲染开销，常频繁地切换，则使用 v-show 较好；
v-for   列表渲染  数组遍历
v-for   列表渲染  对象遍历

 

vue 数组监测

vue 数组监测-变异数组
会改变调用了这些方法的原始数组。它们不会改变原始数组，返回一个新数组

Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法
用一个含有相同元素的数组去替换原来的数组

arr.filter(function(){})
arr.concat(function(){})
arr.slice(function(){})
arr.splice(function(){})
arr.push();
arr.pop();
arr.unshift();
arr.shift(); // 移除
arr.sort();
arr.reverse();

 

vue 响应数据和非响应数据

data 里面声明的数据对象

{
	data() {
		return {
			downAuth:commonMethod.getDownAuth(),
			currXtdm:commonMethod.getCurrXtdm(),
			jgjb:commonMethod.getUserJgjb(),
			user:JSON.parse(window.sessionStorage.user),
			queryFormInit:{
				nSzdm:'',
				nSxdm:'',
				qYggh:'',
				cYgmc:'',
				cJdgPzbz:''
			},
			queryForm:Object.assign({},this.queryFormInit),
			tableData: [],
			hideAfter: 1000,
		}
	},
}

如使用 Object.assign() 或 _.extend()。
在这种情况下，你应该用两个对象的属性创建一个新的对象。

Object.assign({},this.getParams(),roleInfo)

vue 事件处理和事件修饰符

 

v-on 指令监听 DOM 事件
vue 事件修饰符 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
Vue 提供了绝大多数常用的按键码的别名

event.preventDefault()  例如a 标签默认跳转事件
event.stopPropagation()  例如 click 事件的冒泡处理
.passive 修饰符尤其能够提升移动端的性能  被动触发
.enter  键盘修饰符有  enter 代理登录
.exact  精确修饰符

<input @keyup.enter="submit"> 
<button @click.ctrl.exact="onCtrlClick">A</button>

 

表单的双向绑定和修饰符

v-model   表单双向绑定  忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 元素使用 checked 属性和 change 事件；
select>option 元素使用 value属性 属性和 change 事件；

v-model的修饰符 .lazy   change  事件同步
v-model的修饰符 .number  number 验证
v-model的修饰符 .trim  trim 去除空白

<input v-model.trim="username" >
<input v-model.lazy="msg" >
<input v-model.number="age" >