1.在Vue实例中,如果想要获取data上的数据或则调用methods中的方法,通过this.data上的属性名或this.methods上的方法名来进行获取!
2.凡是定义全局的操作,都没有s;凡是定义私有的操作都需要s
指令
v-cloak属性:(设置样式display:none)
解决插值表达式{{ }}闪烁的问题,只会替换自身的占位符,不会清空元素原本的内容
v-text='data中的属性名':默认不会出现闪烁,会覆盖元素中原本的内容
v-html='data中的属性名':不会出现闪烁,会覆盖元素中原本的内容,可识别HTML标签
v-bind:用于绑定属性(v-bind:title="data中的属性名 + '合法的js语法' ")简写符:
v-on:事件类型='变量名'(v-on:click='show')简写符@
<style>
[v-cloak]{
display: none;
}
</style>
<div class="app">
<p v-cloak>{{mes}}显示出来了</p>
<p v-text="mes" v-cloak>被覆盖了,不会被显示</p>
<p v-html="mes2">加载被显示了</p>
<input type="button" :title="mes3+'我是合法的js语法'">
<input type="button" @click="show">
</div>
<!--这里需要先导入vue的包-->
<script>
var vm = new Vue({
el:'.app',
data:{
mes:'前端最火框架Vue',
mes2:'<h1>大标题</h1>',
mes3:'这是绑定的title属性'
},
methods:{
show(){
alert('点击按钮触发了show方法')
}
}
})
</script>
事件修饰符
@click.stop=" " : 阻止冒泡
@click.prevent=" " :阻止默认事件
.capture=" " :使用事件捕获机制
@click.self=" " :操作当前元素时,才会触发事件处理函数
@click.once=" " :只触发一次事件处理函数
使用v-model实现表单元素中的数据双向绑定(v-bind只能实现单向数据绑定)
<div class="app">
<input type="text" v-model="mes">
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{
mes:'双向数据绑定'
}
})
</script>
使用v-for循环遍历
v-for="(每一项的元素item,索引i) in data数据上的属性名" :key='item.id'
或
v-for="count in 10" :索引从1开始循环遍历10次<p v-for='count in 10'>{{ count }}</p>
注意:key属性只能使用number或string类型来代替,在使用时,必须通过v-bind形式绑定
<div class="app">
<ul>
<li v-for="(item,i) in list" :key='item.id'>{{ item.name }}</li>
</ul>
<p v-for='count in 10'>{{ count }}</p>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{
list:[
{ id:1, name:'五菱宏光' },
{ id:2, name:'悍马' },
{ id:3, name:'宝马' },
{ id:4, name:'奔驰' }
]
}
})
</script>
v-if 和 v-show
v-if=" 布尔值 " :每次都会重新创建或删除元素
v-show=" 布尔值 " :切换了元素的display:none样式
<div class="app">
<input type="button" @click="display" value="toggle">
<p v-if="flag">显示或者隐藏</p>
<p v-show="flag">显示或者隐藏</p>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{
flag:true
},
methods:{
display(){
this.flag = !this.flag
}
}
})
</script>
过滤器的使用(filter)
过滤器两个条件:过滤器名称和处理函数(可以有多个过滤器)
Vue.filter('过滤器的名称',function(原始数据,操作数据--可以有多个){
return 操作结果
})
<div class="app">
<!--
原始要展示的内容(mes):你好,我好,她好,大家好,才是真的好
过滤器过滤后展示的内容(mesFilter):你坏,我坏,她坏,大家坏,才是真的坏
-->
<p>{{ mes | mesFilter('坏') }}</p>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
/*全局过滤器*/
Vue.filter('mesFilter',function (mes,str) {
/*通过传参,全局修改好字为坏字,str参数可以有多个,用逗号分开*/
return mes.replace(/好/g,str);
});
var vm = new Vue({
el:'.app',
data:{
mes:"你好,我好,她好,大家好,才是真的好"
},
/*私有过滤器*/
// filters: {
// mesFilter: function (mes, str) {
// }
// }
})
</script>
按键修饰符
Vue中提供了9个按键修饰符如下:
1 .enter
2 .tab
3 .delete (捕获“删除”和“退格”键)
4 .esc
5 .space
6 .up
7 .down
8 .left
9 .right
@keyup.enter=" 方法名 " :按enter键松开后执行事件处理函数
自定义按键修饰符:Vue.config.keyCode.键盘值= 对应的keyCode值;(Vue.config.keyCode.f2= 113)
就可以使用f2了。。。(以此类推)
<input type="text" class="app" @keyup.enter="didi">
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
methods: {
didi(){
console.log("文本框中按enter执行了")
}
},
})
</script>
自定义指令(directive)
定义指令名称时前面不需要v-前缀,调用时必须在指令名称中加上v-前缀,调用是需要用引号把值包起来
Vue.directive('指令名称',{函数})
Vue.directive('focus',{
bind:function (el,binding) { //基于样式类型的操作使用bindhans函数
binding.name:拿到自定义指令名称
binding.value:拿到自定义指令的值(计算后的值)
binding.expression:拿到自定义指令的原内容的值
},
inserted:function (el) { //基于js类型的操作使用inserted函数
},
updated:function(el){ //当vNode更新是执行
}
})
<div class="app">
<input type="text" class="form-control" v-focus v-color="'green'">
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
/*自定义全局指令(获取焦点)*/
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
/*自定义全局指令(设置颜色)*/
Vue.directive('color', {
bind: function (el, binding) {
el.style.color = binding.value;
}
});
var vm = new Vue({
el:'.app',
/*自定义私有全局指令*/
// directives:{
// "指令名称":{
// bind(){},
// inserted(){},
// updated(){}
// }
// }
})
通过ref获取DOM元素和组件中的data、methods
1.在标签中设置ref属性:<h1 ref="h" >这是h1标签</h1>
2.通过this.$refs.ref中的值获取到这个元素(this.$refs.h)
<div class="app">
<input type="button" value="输出下面h3标签内容" @click="out">
<h3 ref="h3">马云马化腾李彦宏张一鸣刘强东雷军</h3>
<com ref="com"></com>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{},
methods:{
out(){
console.log(this.$refs.h3.innerHTML);
console.log(this.$refs.com.mes);
this.$refs.com.show();
}
},
components:{
com:{
template:'<h1>组件中的模板内容</h1>',
data(){
return {
mes:'组件中的数据'
}
},
methods:{
show(){
console.log('调用了show方法')
}
}
}
}
})
</script>
使用watch属性,监听data中指定数据的变化
在Vue实例中,watch:{
data属性名:function(新数据newVal , 旧数据oldVal){ }
}
<!--实现前两个文本内容拼接成第三个文本框的内容-->
<div class="app">
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="Name">
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
firstName: '',
lastName: '',
Name: ''
},
/*使用watch属性监听data中指定数据的变化,是一个对象,对象中存放data属性名指定一个函数,函数有两个参数分别是新数据和旧数据*/
watch: {
firstName: function (newVal, oldVal) {
this.Name = newVal +'-'+ this.lastName;
},
lastName(newVal){
this.Name = this.firstName +'-'+ newVal;
}
}
})
</script>
可以用来监听路由地址栏的改变
使用computed属性用于计算
任何data上的数据发生了变化,就会重新计算这个属性的值
computed:{ data上的属性名或v-model:function(){ return 处理结果 } }
<!--实现前两个文本内容拼接成第三个文本框的内容-->
<div class="app">
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="Name">
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
firstName: '',
lastName: ''
},
methods: {},
/*使用computed计算属性:用于计算,是一个属性不是方法,
任何data上的数据发生了变化,就会重新计算函数中这个属性的值(需要return出去),
会缓存这个属性的值,方便下次使用*/
computed: {
Name: function () {
return this.firstName + '-' + this.lastName
}
}
})
</script>
使用render属性渲染组件
render:function(createElements){ return createElements(组件对象) }
注意:return 后的结果会替换el指定的容器
<div class="app">
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var login = {
template:'<h1>登录页面</h1>'
}
var vm = new Vue({
el:'.app',
render:function(createElements){ //createElements是一个方法,调用这个方法,能够把自定的模板渲染为HTML结构
return createElements(login); //return的结果会替换el指定的那个容器
}
})
</script>