Vue的基本指令
Vue和Angular的用法差不多,语法和属性也差不多,Vue更像是国人的框架,所有的用法和习惯也都符号国人程序员的习惯,所以这也是Vue越来越热的原因,Vue就是简化了Angular一些复杂操作,用起来更加简单,便捷
Angular是用ng开头的指令,而Vue是用v开头的指令
下面是一段代码,看完之后 你就瞬间明白是什么意思了!如果你已经学过Angualr的话,Vue可以说是鼻涕往嘴里流呢! So easy too happy!
**示例代码 : **
<!--
指令:是特殊的带有前缀v-的特征.
扩展了html原有标签属性功能.
v-text:把模型当中的内容当做文件展示到页面当中.
v-html:把模型当中的内容当做普通 HTML 插入
v-show:根据表达式的值来显示或隐藏HTML元素 display:none
v-if:根据表达式的值在DOM中生成或移除一个元素
v-else:就是javaScript中else的意思,必须跟着v-if或v-show.充当else的功能.
v-for:基于源数据重复渲染元素.
v-model:数据双向绑定
v-pre:跳转编译.不去解析里面的内容.
v-cloak:防止闪烁
-->
<p v-cloak>{{test}}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
<p v-show="isShow">是否显示</p>
<p v-if="isShow">是否存在该标签</p>
<h1 v-else>No</h1>
<span v-pre>{{ msg }}</span>
<hr>
<!--可以通过template指定一个代码片段-->
<template v-if="true">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</template>
<!--数据的双向绑定-->
<input value="text" v-model="msg">
<hr>
遍历数组第一种:
<!--遍历数据 在遍历时,内置了一个$index 就是下标 第一种方式-->
<p v-for="value in course">{{value}}----{{$index}}</p>
<hr>
遍历数组第二种:
<p v-for="(key,value) in course">{{value}}----{{key}}</p>
<hr>
遍历对象第一种:
<p v-for="(key,value) in students">{{key}}--- {{value.name}}----{{value.age}}</p>
<hr>
遍历对象第二种:
<p v-for="stu in students">{{$index}}--- {{stu.name}}----{{stu.age}}</p>
<script src="./vue.js"></script>
<script>
new Vue({
el:'body',
data:{
test:'cloak',
msg:'xmg<h1>大标题</h1>',
isShow:true,
course:['html','css','js'],
students:[
{name:'zs',age:10},
{name:'li',age:20}
]
}
})
</script>
Vue的基本写法
- **示例代码 : **
<body>
// 这种绑定的方式 是不是看起来更加熟悉呢
<p id="app1">{{msg}}</p>
<p class="app2">{{msg}}</p>
<div class="app3">
<p>{{name}}</p>
<!--跟angular一样 这里可以写运算 也可以写判断{{age?'value':'value'}}
-->
<p>{{age + 10}}</p>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
/*创建一个vue对象,它就相当于我们之前学习angular的控制器,
* 其中el: 可以是标签,id选择器,类选择器
* data:就是模型.
* 可以使用插值语法把模型的内容绑定到标签所在的作用域当中.
* */
new Vue({
el: '#app1',
data: {
msg: 'xiba1',
}
});
new Vue({
el: '.app2',
data: {
msg: 'xiba2',
}
});
new Vue({
el: '.app3',
data: {
name: 'xiba3',
age: 10
}
});
}
</script>
Vue事件处理
- **示例代码 : **
<body id="app">
<p>{{name}}</p>
<!-- 注册事件 -->
<button v-on:click="click()">点击</button>
<!-- 注册事件简写 -->
<button @dblclick="dbclick()">双击</button>
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#app',
data:{
name:'xiba',
age:'20'
},
methods:{
click(){
console.log('点了一下');
},
dbclick(){
console.log('双击了');
}
}
});
}
</script>
Vue事件绑定
- 示例代码 : 这种代码应该是看一遍就懂的 如果是小白的话 建议先去看文档
<body id="app">
<!-- input里面的内容修改 下面的内容也会修改 -->
<input type="text" v-model="msg">
<p>{{msg}}</p>
<!-- 加上*好之后只解析一次 内容就不会被一直修改掉 -->
<p>{{*msg}}</p>
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
data:{
msg:'xiba'
}
}).$mount(app); // 这里的$mount等价与把el:'#app'写里面
}
</script>
Vue基本属性
- **示例代码 : **
.red{
color: darkgreen;
}
.fs20{
font-size:20px;
}
<body id="app">
<!--red为模型当中定义的属性名称 多个属性使用逗号隔开-->
<p :class="[red,fs]">这是一段文字</p>
<!--使用对象的形式 和angular相似 同样, 值也可能在模型定义-->
<p :class="{red:true,fs20:true}">这是一段文字</p>
<!--第三种使用使用模型对象形式-->
<p :class="class">这是一段文字</p>
<!--style第1种直接写属性-->
<h1 :style="{color:'gray'}">大标签</h1>
<!--通过定义模型属性[属性名] 如果有多个, 使用逗号隔开-->
<h1 :style="[style]">大标签</h1>
<!--第三种,通过属性对象形式-->
<h1 :style="style">大标签</h1>
<!--
可以在原标签属性上添加一个v-bind 或简写成 ":属性"
后面就可以直接跟上模型当中的属性.
-->
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
data:{
url:'images/post_3.png',
width:'100px',
red:'red',
fs:'fs20',
class:{
red:true,
fs20:false
},
style:{
color:'blue',
'font-size':'50px'
}
}
}).$mount(app);
}
</script>
Vue事件绑定
- **示例代码 : **
<body id="app">
<!-- 事件绑定 v-on指令 -->
<button v-on:click="show()">点击弹出</button>
<button v-on:click="hide('xibalu')">点击</button>
<!-- 事件绑定简写 -->
<button @click="show">再次点我</button>
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
// data里面写属性
data:{
msg:'xiba'
},
// methods里面写方法
methods:{
show(){
console.log(this.msg);
},
hide(arg){
console.log(arg);
}
}
}).$mount(app);
}
</script>
Vue内置过滤器
- **示例代码 : **
<body id="app">
<!--在vue当中使用过滤器和angular当中非常一样.通过管道符的写法-->
<p>{{name | uppercase}}</p>
<!--同样它也支持连写的形式-->
<p>{{name | uppercase | lowercase}}</p>
<!--转成货币 注意它的传形式与angular有些区别, 它不要: 直接在后面空格写上参数-->
<p>{{price | currency '&'}}</p>
<!--过滤数组 filterBy '过滤条件' -->
<input type="text" v-model="search">
<ul>
<li v-for="value in dataList | filterBy search">{{value}}</li>
</ul>
<!--过滤数组 limitBy '取得数量 偏移量' -->
<ul>
<li v-for="value in numList | limitBy 5 3">{{value}}</li>
</ul>
<!--排序 大于等于0为升序 小于为降序-->
<ul>
<li v-for="value in numList | orderBy -1">{{value}}</li>
</ul>
<!-- 键盘弹起时 延时1秒后再去执行对应的方法 -->
<input type="text" @keyup="show | debounce 1000">
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
data:{
name:'xibalu',
price:20.2,
dataList:['css','html','java'],
numList:[1,3,4,5,6,34,45,7,8]
},
methods:{
show(){
console.log('延时执行了');
}
}
}).$mount(app);
}
</script>
Vue自定义指令和标签
- **示例代码 : **
<body id="app">
<!-- 在使用指令时,前面加上v- -->
<p v-order>自定义指令1</p>
<!-- 在传递参数时要用''包裹 -->
<p v-color="'red'">自定义指令2</p>
<!-- 自定义出来的元素都是行内元素 -->
<kin>自定义元素</kin>
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
/*自定义指令
* 在使用指令时,前面加上v-
* v-指令名称
* */
Vue.directive('order', function () {
// 在自定义指令当中可以拿到指令所在的标签
this.el.style.background = 'green';
this.el.style.fontSize = '30px';
});
// 自定义指令可以传参数
Vue.directive('color', function (color) {
this.el.style.background = color;
});
// 自定义元素指令
Vue.elementDirective('kin',{
bind:function () {
this.el.style.background = '#ccc';
}
});
new Vue({}).$mount(app);
}
</script>
Vue自定义过滤器
- **示例代码 : **
<body id="app">
<p>{{e | defined 11 12}}</p>
<p>{{e | defined2 11 12}}</p>
<p>{{nowDate | dateTime}}</p>
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
// 自定义过滤器
Vue.filter('defined', function (input) {
return input < 10 ? '0' + input : '' + input;
});
// 可以传递参数
Vue.filter('defined2', function (input, a, b) {
// alert(a + '' + b);
return input < 10 ? '0' + input : '' + input;
});
// 获取年月日的过滤器
Vue.filter('dateTime', function () {
var date = new Date();
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
});
new Vue({
data: {
e: 9,
nowDate: new Date()
}
}).$mount(app);3
}
</script>
计算属性
- 这里要特别注意
get()和set()方法, 下面请看代码详解 - **示例代码 : **
<body>
<div>{{price}}</div>
<button @click="totalPrice">总价</button>
</body>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
data: {
price: 10,
num: 3
},
computed: {
total: {
/*
* 计算属性get方法
* this.属性名称，（this.total）如果该属性是计算属性，那么就会自动调用该属性的get方法
* this.属性名称 值就是get方法的返回、
* get方法，必须得要有返回值
* */
get(){
return this.price * 3;
},
/*
* 计算属性的set方法
* 当执行this.属性名称 = 值 (this.total = 10) 就会自动调用该属性的set方法。
* 并且把.=后面的执行，传递给set方法当作参数
* 不能在set方法内部执行该属性的 点等于
* set(val){ 不能这种形式出现， 会发生死循环。
this.total = 10;
}
* */
set(val){
this.price += val;
// this.val = 10; 死循环
}
}
},
methods: {
totalPrice(){
alert(this.total);
}
}
}).$mount('body');
vm.total = 10;
}
</script>
