Vue学习-常用属性（一）

前言：

作为后端转前端程序员，一直都不会Vue 只会用jQuery，说来惭愧，最近项目写完了 抽空学习了Vue，大爱！把最近的学习总结一下 。

v-cloak ----解决页面刷新 显示插值

[v-cloak]{
	display: none;
}

<div id="app" v-cloak></div>

v-text ----插值的另一种写法

v-html----可加入标签

v-if---- 为true时显示，反之隐藏

v-show ----为true时显示，反之隐藏

v-if 与 v-show的区别：v-if是删除，添加的过程 比较消耗内存，而v-show 是隐藏和显示的过程.相当于jQuery 的 display：none/block

v-bind 缩写： ----动态绑定属性

用法： :class :style

v-on 缩写 @ ----绑定事件

<div id="app" @click="test">

用法： @click=“test” @keyup=“tests”
对应methods中写逻辑

methods:{
	test:()=>{
		console.log('点击了div');
	},
	tests:(e)=>{
		console.log(e);
	}
},

click中又提供 其他扩展方法
@click.stop 阻止冒泡事件
@click.prevent 阻止默认事件 （常用在a链接）
@click.once 只执行一次

v-model ----数据双向绑定

<input type="text" v-model="n1"/>

n1 始终 等于 input 输入框的value
常用在：购物车结算、计算器、无需刷新页面即可刷新数据

待更新…