vue框架学习总结

认识快捷方式:和@

在vue中很多方法和函数,但是这些方法都是v-开头的,由于有很多方法经常被调用,因此会出现省略形式
比如:和@
:代表着v-bind:–数据绑定

<a v-bind:href="url">----- <a :href="url">
若此时没有用v-bind,那么vue并不会知道url是一个变量,而是把它当做一个字符串对待.

@代表着v-on:—代表着数据监视,同时也更多的用在点击事件上面

//handleClick是一个方法,在Vue的对象中的一个methods的json对象中
v-on:click="handleClick" ----- @click="handleClick"
methods: {
handleClick () {
alert(' 处理点击')
}
}

//全部代码
new Vue(
{
el: '#app',
data: {// data 的所有属性都会成功 vm 对象的属性 , 而模板页面中可以直接访问
msg: 'NBA I Love This Game!',
url: 'http://www.baidu.com'
},
methods: {
handleClick () {
alert(' 处理点击')
}
}
})

常用指令

• 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 对象通过$els 属性访问这个元素对象
• v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }