【双向绑定 v-model】
v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定属性上
数据驱动,双向绑定,能同时使用也能修改: 改Model会影响View,改View会影响Model
<input type="text" v-model="绑定的对象名" />
【闪现 v-cloak】
在标签中增加指令:v-cloak
增加style标签,[v-cloak]属性选择器,设置先不展示display:none;
实现在页面未渲染完成时先隐藏标签,渲染完成后在展示,这样就解决了闪烁问题
<style>
[v-cloak]{
display: none;
}
</style>
【单击事件 v-on:click】
v-on指令用来给HTML元素添加Vue事件,
用:指定事件的触发方式v-on:可以简写成一个@click=" (对象)函数内容"自增就后面加++
@click为v-on:click的缩写
<!--1.v-on指令给html元素添加Vue事件,用:指定事件触发方式-->
<button v-on:click="函数名()">单机</button>
<button v-on:dblclick="函数名()">双击</button>
【绑定 v-bind】
当属性的值是变量而不是字符串时,通过v-bind进行标识,vue会自动处理
全称: v-bind:href
简称: :href 冒号开头就说明后面跟的是变量
<a :href="url">点我跳转3</a> <!-- 简写 -->
【Vue 组件】
–1,概述
当想要扩展HTML的功能时,使用vue定义一些组件.
1,全局组件: Vue.component(组件名, 组件的功能)
2,局部组件: 在Vue对象里, 再加一个属性components
3,使用组件: 在数据渲染区 , 直接把组件名当做HTML的标签名用
区别? 全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用.
【使用】
//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签
//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果
<全局组件>
Vue.component('Hellocom',{//组件名
template : '<h1>你好 Vue组件</h1>' //组件的显示效果
})
<局部组件>
el:'#d1' ,
// 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
components: {
'person':{//组件名
template : '<h1>你好 person组件</h1>' //组件的显示效果
【组件使用:全局组件和局部组件】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 组件Component</title>
<!-- 1.导入vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 2.数据渲染区 -->
<div id="app">
<!-- 5.使用组件 -->
<Hellocom></Hellocom>
</div>
<div id="d1">
<Hellocom></Hellocom>
<person></person>
</div>
<script>
//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签
//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果
Vue.component('Hellocom',{
template : '<h1>你好 Vue组件</h1>' //组件的显示效果
})
//3. 创建Vue对象
new Vue({
el:'#app'
})
new Vue({
el:'#d1' ,
// 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
components: {
'person':{//组件名
template : '<h1>你好 person组件</h1>' //组件的显示效果
}
}
})
</script>
</body>
</html>