VUE学习笔记五
< 返回列表时间: 2020-06-03来源:OSCHINA
<button @click =" test3 ( $event )" > test3 </button>
$event代表当前事件对象,这个事件对象是默认传的,可以不传也行。 附上事件默认行为 <a href ="http://www.baidu.com" @click.prevent =" test4 " > 百度一下 </a> 阻止事件冒泡 <div style =" width : 100 px ; height : 100 px ; background : blue" @click.stop =" test6 " ></div>
将一个html属性值变成表达式,可以用强制绑定,在属性前面加一个冒号即可
:src="imageUrl"

<h2> 1. 双大括号表达式 </h2> <p> {{ content }} </p> <p> {{ content . toUpperCase ()}} </p> <!--<p>{{{msg}}}</p>--> <h2> 2. 指令一 : 强制数据绑定 </h2> <a href ="url" > 访问指定站点 </a><br> <a v-bind :href =" url " > 访问指定站点 2 </a><br> <a :href =" url " > 访问指定站点 2 </a><br> <h2> 3. 指令二 : 绑定事件监听 </h2> <button v-on :click =" test " > 点我 </button> <button @click =" test " > 点我 </button>
Vue实例的方法以$符号开头,比如下面的写法
vm.$swtich(){}
停止事件冒泡,当事件外层还有事件可,可以停止外层事件
@Click.stop
阻止事件的默认行为
@Click.prevent
键盘按键修饰符
@Click.enter
表单数据的自动收集,使用v-model
生命周期常用的两个方法
mounted(),初始化阶段,这个方法只执行一次,比如改善Ajax方法,执行定时期
更新阶段的方法执行N次,可以是0次
BeforDestory(),死亡阶段只执行一次
自定义过滤器,比如可以对页面上的时间日期进行特定的格式化
比如2020-02-02 // 定义过滤器 Vue . filter ( 'dateString' , function (value , format= 'YYYY-MM-DD HH:mm:ss' ) { return moment(value). format (format) ; })
这个网址是日期格式化的API,比较好用
https://www.bootcdn.cn/moment.js/ 常用内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-if : 如果为 true, 当前标签才会输出到页面 v-else: 如果为 false, 当前标签才会输出到页面 v-show : 通过控制 display 样式来控制显示 / 隐藏 v-for : 遍历数组 / 对象 v-on : 绑定事件监听 , 一般简写为 @ v-bind : 强制绑定解析表达式 , 可以省略 v-bind v-model : 双向数据绑定 ref : 为某个元素注册一个唯一标识 , vue 对象通过 $refs 属性访问这个元素对象 v-cloak : 使用它防止闪现表达式 , 与 css 配合 : [v-cloak] { display: none } 1. 注册全局指令 Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase() }) 2. 注册局部指令 directives : { 'my-directive' : { bind (el, binding) { el.innerHTML = binding.value.toupperCase() } } } 3. 使用指令 v-my-directive='xxx' --> <!-- 需求 : 自定义 2 个指令 1. 功能类型于 v-text, 但转换为全大写 2. 功能类型于 v-text, 但转换为全小写 -->


热门排行