vuejs 的使用
<div class='box'>
<p>{{msg}}</p>
<p>{{name}}</p>
</div>
//创建一个控制器
new Vue({
//选择器，控制器要去控制哪个标签，给哪个标签当中提供数据
el:'.box'.
//数据模型，给 el 选择出来的内容提供数据
data:{
msg:'hello world',
name:'xmg'
}
//另一种绑定方法
}).$mount('.box');
vuejs 的一些指令
- 不闪烁的数据绑定
<p v-text='msg'></p> - 如果数据中有 html 标签，则会被解析
<p v-html = 'msg'></p> - 显示标签
<p v-show='true'>123</p>如果另一个标签与此标签相反的显示隐藏则用<p v-else>456</p> -
<p v-pre>{{msg}}</p>不会解析直接原样输出 -
<li v-for="(key,value) in course">{{key}}--{{value}}</li>遍历 - 上述遍历是vue.js1.0，在 vue.js 2.0 中
<li v-for="(value,key) in course">{{value}}--{{key}}</li>第二个参数变为下标，第一个参数为值 -
<p v-if='true'>123</p>标签存在与否，相反的用 v-else 属性 - vuejs 中没有
templateUrl，所以模版都写在<template></template>标签中 -
<input type='text' v-model='name'>双向绑定
// new Vue() 会返回当前的控制器，使用返回值的控制器可以直接调用里面的属性
var vue = new Vue({
data:{
name:'',
age:10
}
}).$mount('#box');
Vue.js 的事件
vuejs 中的事件指令都写在控制器下的methods:{} 中
<div id="box">
<p>{{age}}</p>
<button v-on:mouseenter="modify(5)">修改年龄</button>
<button @click="age=20">修改年龄</button> <!--可以直接在后面操作模型的属性-->
<button @click="modify(20)">修改年龄</button> <!--可以直接在后面操作模型的属性-->
</div>
<script>
var vue = new Vue({ //new Vue() 会返回当前的控制器，使用返回的控制器可以直接调用里面的属性。
data:{
age:10,
},
methods:{
modify:function (agr) {
this.age = agr;
}
}
}).$mount('#box'); //$mount(选择器)
</script>
<div @click = 'show'>
<button @keydow='modify($event)'>点击</button>
//给指令键注册事件
<input type="text" @keydow.xmg="down($event)">
</div>
<script>
Vue.directive('on').keyCodes.xmg = 17;
new Vue({
data:{
age:10
},
methods:{
modify:function(e){
this.age = 20;
//阻止事件冒泡
e.cancelBubble = true ;
}.
down:function(e){
alert('down----' + e.keyCode);
}
}
}).$mount('#box');
</script>
vue.js 过滤器
<div id="app">
<p>{{name | uppercase | lowercase}}</p>
<p>{{price | currency '￥'}}</p> <!-- 传参通过空格来传参-->
<ul>
<li v-for="value in curse | filterBy 'css'">{{value}}</li>
</ul>
<ul>
<li v-for="value in curse | limitBy 2">{{value}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
name:'hello',
price : 10,
curse:['css','js','html']
}
});
</script>
- 绑定控制器时，不建议绑定到 body\html 上，在 vue2.0当中这么做会报错；在 vue2.0 里，所有的内置过滤器都被删除了，以压缩框架体积，但是可以自定义过滤器
Vue.filter('xmgCurrency',function(input,a){
return a + input;
})
自定义指令
- Vue.directive 定义的指令都是以属性形式的 'Attribute'
Vue.directive('red',function(){
//在自定义指令当中可以拿到指令标签
this.el.style.background = 'red';
})
- 自定义指令可以传参数
Vue.directive('color',function(color){
this.el.style.background = color;
})
- 自定义元素指令
Vue.elementDirective('xmg-red',{
bind:function(){
this.el.style.background = 'red';
}
})
<p>{{name}}</p>
<p v-red>123456</p>
<p v-color=" 'green' ">77777</p>
<xmg-red>777788888</xmg-red>
计算属性 get 方法和 set 方法的调用形式
- 点语法调用的是 get 方法
- 点等于调用的是 set 方法
new Vue({
el:'#app',
data:{
num:3,
price : 10,
},
methods:{
count(){
this.total; //会自动调用get方法
this.total = 10; //会自动调用set方法把10传给set方法
}
},
computed:{ //当中声明都是计算属性
//在每一个计算属性当中有两个方法，get方法与set方法
//get与set方法是自己调用的方法。
//get方法调用时机：当使用 this.total时会调用get方法 return的值，就是定义属性的值。
//想要获取属性时，会自动调用get方法
/*----------------------------*/
//set方法调用时机
//给该属性赋值是会自动调用set方法 this.total = 100; 会自动调用set 并且会把赋的值传给set的参数。
//在set方法当中，不能再使用.属性=value this.tataol = 100;
total:{
get(){
console.log('调用了get方法'+value);
return this.price * this.num + 1;
},
set(value){
this.total = 20;
}
},
age:{
get(){
console.log('调用了get方法'+value);
return this.price * this.num + 1;
},
set(value){
this.total = 20;
}
}
}
});
生命周期 钩子函数
在 vue2.0 钩子函数有所变化
var vue = new Vue({
el:'#app',
data:{
name:'hello',
price : 10,
curse:['css','js','html']
},
methods:{
destroyVue:function () {
alert(1);
vue.$destroy();
this.$destroy();
}
},
created:function(){ //钩子函数：在某个特定时期会自动调用相应的方法。
alert('实例已经创建'); //生命周期：从生到死的过程。
},
beforeCompile:function(){
alert('编译之前');
},
compiled:function(){
alert('编译之后');
},
ready:function(){
alert('准备插入到文档中');
},
beforeDestroy:function(){
alert('销毁之前');
},
destroyed:function(){
alert('销毁之后');
}
});
全局组件
组件本质就是模版
//创建了一个模版
var ext = Vue.extend({
template:'<h1>我是组件</h1>'
});
//全局组件：在任何一个控制器当中都可以使用此组件
Vue.component('xmg',ext);
局部组件
- 局部组件：只能在自己声明的控制器中使用，可以定义多个
var ext = Vue.extend({
template:'<h1>我是组件</h1>'
});
new Vue({
el:'.box1',
data:{
msg:'xmg'
},
components:{
xmg:ext,
gxq:{
template:'<h1>我是 gxq</h1>'
}
}
})
组件绑定数据
- 当创建一个组件时，就是一个隔离作用域，里外数据不互通
/*创建了一个模板*/
var ext = Vue.extend({
template:'<h1>我是组件</h1>'
});
/*局部组件：只能在自己声明的控制器当中来使用 ,可以定义多个*/
new Vue({
el:'.box1',
data:{
msg:'xmg'
},
components:{ //当创建一个组件是，就是一个隔离作用域。
xmg:ext,
gxq:{
data:function () {
return {
msg:'myMsg',
name:'name123'
}
},
methods:{
show(){
alert('show');
}
},
template:'<h1>我是gxq组件{{msg}}----{{name}}</h1><button @click="show">点击</button>'
}
}
});
组件的模版
new Vue({
el:'#app',
components:{
xmg:{
template:'#temp1' //不能使用templateUrl 来引用模板文件
//Vue考虑到性能性能原因。
//因为浏览器不能访问文件。angular当中使用url来访问一个文件，
// 它是发送了一个Ajax请求,拿到请求结果，插入到文档当中。
}
}
})
动态组件
<div id="app">
<button @click="change">切换</button>
<!--在属性前面加上":" 会解析后面的内容 到控制器当中查找有没有这个属性-->
<component v-bind:is="name"></component>
<component is="xmg"></component> <!--不去解析里面的值-->
</div>
new Vue({
el:'#app',
data:{
name:'xmg'
},
methods:{
change(){
this.name = 'xmg2';
}
},
components:{
xmg:{
template:'<h1>xmg组件</h1>'
},
xmg2:{
template:'<h1>xmg2组件</h1>'
}
}
})
- es6.0 的函数写法
methods:{
change(){
this.name = 'xmg2';
}
}
父子组件
<div id="app">
<fathercom></fathercom>
</div>
<template id="temp1">
<h1>xmg组件{{name}}</h1>
<input type="text" v-model="name">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<hr>
<!--传递的数据双向绑定-->
<childcom :msg.sync="name"></childcom>
</template>
new Vue({
el:'#app',
components:{
fathercom:{
template:'#temp1',
data:function(){
return {
name:'xmg'
}
},
components:{
//声明子组件，声明的子组件只能在父组件的模版中
children:{
template:'<h1>我是子组件{{msg}}</h1> <input type="text" v-model="msg">',
//在使用组件时，外部可以传递一个值进来
//<childcom :msg="name"></childcom>
//父数据的变化会影响子数据变化
//子数据变化不会影响父数据变化
//传递数据的时候如果加上 .sync 表示双向绑定，互相影响
// <childcom :msg.sync="name"></childcom>
props:['msg']
}
}
}
}
});
网友评论