-
methods;{}//内写函数,例如函数名:function(){}
v-model数据绑定
查看全部 -
属性绑定 v-bind:+属性 例如:v-bind:title="title" v-bind:缩写为:
双向绑定 v-model input标签既可以改变内容,也可以显示内容
例如:v-model=""
查看全部 -
{{ }}差值表达式 v-text里的值是一个变量,他要显示的的值是变量的值(会发生转义)
v-html:不会转义,如:<h1>123</h1> v-html会显示123,v-text会显示<h1>123</h1>
绑定事件:v-on 例如:v-on:click="",同时需要在methods下面添加相应的事件,v-on: 简写为@
查看全部 -
挂载点:vue只会去处理挂载点上的数据
模板:挂载点内部的内容即为模板内容,可以将模板放在vue实例里的template来编写
实例:指定挂载点和模板就行
查看全部 -
export default {
data: function(){
return{
}
}
}
查看全部 -
v-bind :
v-on @
查看全部 -
模板是挂载点里面的内容,也就是vue实例里面的template的内容。
查看全部 -
scoped 作用域在自己的组件中,不会影响父组件
<style scoped>
</style>
查看全部 -
v-if判断
v-show显示
v-for列表循环
循环格式:
1,无需用到键名
<li v-for="item of 数据数组" :key="数据数组">键值</li>
2,需键名操作(默认数字键名,键名为列表下标)
<li v-for="(item,index) of 数据数组" :key="index">键值</li>
查看全部 -
computed数据计算/字符串重组
watch:j监听事件
查看全部 -
v-model
查看全部 -
<div v-if或者v-show="show"> Hello </div>
<button @click="fn">Button</button>
<ul> <li v-for="item of list">{{item}}</li>
</ul>
data: {
show : true
list : [1, 2, 3]
},
methods: {
fn : function(){
this.show = !this.show;
}
} v-if 和 v-show 两者的区别:
v-show 透过 css 里面 display:none 来设置元素隐藏,并未从DOM中删除
v-if 把元素从DOM中删除掉,后面再重新添加
查看全部 -
new Vue({
el: "", (template: "",)
data: {
content: "",
count: 0
}, computed: { fullName : function(){ return this. firstName +""+this.lastName }} 计算属性 ,
watch: { fullName: function() {this. count ++}}, 侦听器
})
v-text="" v-html="" {{ }}
v-on:click="函数名" 简写 --> @click="函数名"
v-bind:(属性) = "" 简写 --> :(属性) = "" 属性绑定
v-model = "" 实现页面和数据的双向绑定
查看全部 -
局部样式(scoped)
<style scoped>
//只在当前组件中有效
</style>
查看全部 -
this的指向
【this】:this.$data 或 this.$computed
查看全部
举报