01 - Vue的基本模板和基本控件
一. 简介
vue 是一套用于构建用户见面的渐进式框架
特点：
(1) 简洁 (2)轻量 （3)组件化 (4)快速
二. 基本模板
html代码:
<body>
<div id="app">
//可以直接获取到实例化data中的数据
{{msg}}
</div>
</body>
vue代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm= new Vue({
el:"#app",
data:{
message:"hello Vue!"
}
})
</script>
三.基本控件
3.1 v-bind
用于绑定属性的指令
可以简写成 （ :属性名 ）
html代码:
<div id="app">
<!-- message变量绑定在title属性上 Mytitle绑定在自定义data-tit属性上 -->
<span v-bind:title="message" v-bind:data-tit="Mytitle" >
停留几秒就可以知道你停留的时间了啊
</span>
</div>
vue代码:
var vm= new Vue({
el:"#app",
data:{
message:"我停留"+new Date().toDateString(),
Mytitle:"新标题"
}
})
3.2 v-on
用于绑定事件的指令
( 缩写 @事件='属性名' )
html代码:
<div id="app">
<p>{{message}}</p>
<input type="button" @click="returnShow" value="反转信息" />
</div>
vue代码:
var vm =new Vue({
el:"#app",
data:{
message:"hello,vue"
},
//methods属性定义了vue实例所有可用的方法
methods:{
returnShow:function(){
this.message=this.message.split('').reverse().join('')
}
}
})
3.3 v-if ， v-show
| v-if | v-show | |
|---|---|---|
| 相同点 | 都是用于控制切换一个元素是否显示的指令 | |
| 不同点 | 直接把标签删除 不推荐使用 | 在标签中添加 "display: none" 样式 |
html代码:
<div id="app">
<p v-if="seen"> <!-- 如果seen为flase 则删除标签 -->
你好
</p>
<p v-show="show"> <!-- 如果show为false 则在标签添加display: none属性 -->
不好
</p>
</div>
vue代码:
var vm=new Vue({
el:"#app",
data:{
seen:true,
show:false
}
})
3.4 v-for
用于绑定数组的数据来渲染整个项目列表的指令
html代码:
<div id="app">
<p v-for="(item,i) in items ">元素{{item}} , 索引{{i}}</p>
<!-- 注意:in 后面可以接 普通数组 对象数组 对象 数字 迭代数字的话count从1开始-->
<p v-for="count in 5">第 {{count}} 次了</p>
</div>
vue代码:
var vm=new Vue({
el:"#app",
data:{
items:[1,2,3,4,5]
}
})
3.5 v-model, v-text,v-html
| 内容 | 注意点 | |
|---|---|---|
| v-model | 用于 实现表单元素和Model中数据的双向数据绑定 的指令 | v-model只用用于表单元素 input select checkbox textarae |
| v-text | 用于只能显示Vue对象传递过来的数据 的指令 | |
| v-hmtl | 用于 可以向html页面插入标签 的指令 |
hello,vue!
hello,vue
', msg3:'你好，vue!' } }) ``` ### 3.6 自定义指令<input id="search" class="input-medium search-query" type="text" placeholder="自定义指令" v-focus v-color="'green'" />
3.6.1 自定义全局指令
directive() 通过Vue.directive() 可以自定义全局指令 其中有两个参数：| 名称 | 内容 | |
|---|---|---|
| 参数1 | 指令名称 | 在定义指令时 指令前面 不需要加v-前缀 而在调用的时候 指令前面要加上v-前缀进行调用 |
| 参数2 | 对象 | 有一些指令相关的函数 这些函数可以在特定的阶段，执行相关的操作 |
Vue.directive('focus',{
// 在每个函数中，第一个参数永远是el 表示被绑定了指令的那个元素 这个el元素就是一个dom对象
//bind: 指令第一次绑定到元素时调用 只执行一次
bind:function(el) {},
//元素只有插入DOM之后 才能获取焦点
//和js行为有关的操作 放在inserted中 防止js行为不生效
//inserted: 表示元素插入到DOM中 执行的函数 只执行一次
inserted:function(el) {},
//update: 当VNode更新时调用 可能会多次触发
update:function(el) {}
})
3.6.2 自定义全局样式指令
定义样式指令 可以通过自己定义css样式，来改变css样式
Vue.directive('color',{
//设置样式指令 只需要通过指令绑定元素 不管有没有插入到页面上面 这个元素肯定有一个内联样式
//和js样式相关的操作，放在bind
//第二个参数 binding
//name,
//value -计算后的值,
//expression-字符串形式的指令表达式
bind:function(el,binding){
//直接定义v-color 指令的样式
// el.style.color='red'
// console.log(binding.name)
// console.log(binding.value)
// console.log(binding.expression)
el.style.color=binding.value
}
})
3.6.3 自定义私有指令
定义私有指令，只对该实例有效
html代码:
<div id="app"></div>
<div id="app2">
<p v-color="'red'" >hell,私有指令!</p>
</div>
vue代码:
var vm =new Vue({
el:'#app',
data:{},
methods:{}
})
var vm2=new Vue({
el:'#app2',
data:{}
directive:{
'color':{
bind:function(el,binding){
el.style.color=binding.value
}
}
}
})
浙公网安备 33010602011771号