1.对象语法:v-bind:style的对象语法十分直观——看着非常像CSS,但其实是一个JavaScript对象。CSS property 名可以用驼峰式或短横线分隔(记得用引号括起来)来命名:
data:{
activeColor:'red',
fontSize:30
}
1.v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回true值时候被渲染
1.因为v-if是一个指令,所以必须将它添加到一个元素上,但是如果想切换多个元素呢?此时可以把一个元素当做不可见的包裹元素,并在上面使用v-if,最终的渲染结果将不包含元素。
例子:
Paragraph1
Paragraph2
2.介绍一下v-else-if,顾名思义,充当v-if的"else-if"块,并且可以连续使用:
例子:
3.介绍一下v-show
v-show与v-if的不同点:v-show的元素始终会被渲染并保留在DOM中,v-show只是简单地切换元素的display CSS property
注意,v-show不支持元素,也不支持v-else
4.v-if和v-show的区别
v-if:只有后面为false,对应的元素以及子元素都不会被渲染,控制DOM元素的创建和销毁
v-show:始终会被渲染并保留在DOM中,频繁切换状态。
v-for使用数组,item代表数组中每一个元素,index表示数组元素的下标
1.v-for的作用,为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的key attribute:
实例:
1.Vue将被侦听的数组的变更方法进行了包裹,所以他们也将会触发视图更新,这些被包裹过的方法包括
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
1.Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop:阻止事件冒泡
问题来了,什么是事件冒泡呢,简单说就是执行了子元素的操作之后,父元素也自动执行,比如说
像这个,我们执行了里面的button之后,外面的div自动执行,这个就叫做事件冒泡。
阻止事件冒泡
.prevent:阻止默认行为
.capture
.self
.once
.passive
2.按键修饰符
在监听键盘事件时,我们经常需要检查特定的按键。Vue允许为v-on或者@在监听键盘事件时添加按键修饰符。
示例:只有在“key”时是“Enter”时调用vm.submit
Vue为最常用的键提供了别名:
.enter
.tab
.delete(捕获删除或退格键)
.esc
.space
.up
.down
.left
.right
1.你可以用v-model指令在表单、
1.".lazy"
在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步(除了上述输入法组织文字时),你可以添加lazy修饰符,从而转为在change事件之后进行同步:
2.".number"
.number将输入框的内容自动转换为数字类型
3.".trim"
自动过滤用户输入的首位空格
1.组件的组织:通常一个应用会以一棵嵌套的组件树的形式来组织。
1.怎么引入组件呢?
首先,在开头使用import比如
import Content from './components/Content.vue'
然后在export default中加入这个
components:{
Content
}
然后在template标签里面加上这个语句
1.这节讲export default{}里面的data为什么要是一个函数,且返回一个对象
1.Prop是你可以在组件上注册一些自定义attribute,为了给博文组件传递一个标题,我们可以用props选项将其包含在该组件可接受的prop列表中。
步骤:
1.首先,在Hello标签里面v-bound绑定
2.然后在Hello.vue里面使用props属性
1.通常你希望,每个prop都有指定的值类型。这时,你可以以对象形式列出prop,这些property的名称和值分别是prop各自的名称和类型:
props可以做类型的限制,还可以设置默认值
2.单项数据流
属于是一种数据保护机制,使得改变子组件数据时,父组件的数据不改变。
1.步骤就是:
首先:在子组件中,通过$emit来触发事件
比如
methods:{
sendParent:function(){
//this.$emit('自定义事件名称','发送事件的参数')
this.$emit('injectMsg',this.msg)
}
}
然后,在APP.vue里面的methods写
getChildMsg:function(value){
console.log(value);
this.message=value
}
然后在template里面的div中写