vue笔记（二）
2018-01-01 22:40
375 查看
生存周期（具体内容看生存周期章节）
1.0版
1、created //实例被创建
2、beforeCompile //编译之前
3、compiled //编译之后
4、ready //准备完毕 （一般刷新页面更新数据放在这个位置）
5、beforeDestroy //销毁之前
6、destroyed //销毁后
防止页面闪烁【v-cloak】
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指
4000
令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
计算属性computed
完整的计算属性：
计算属性里面一般处理一些业务逻辑的代码，最后值要return出去
vue的实例方法
var vm = new Vue({});
vm.$mount(“#box”) //手动挂载元素
vm.$el -> 得到绑定的元素
vm.$data -> 得到实例中的data
vm.$options -> 获取自定义属性
例：new Vue({
show:function(){},
data{}
})
vm.$destroy -> 销毁对象
vm.$log -> 查看数据现在的状态
track-by=“$index”允许向数组中插入重复数据
例：
可以提高循环的性能
////////////////////////////
自定义过滤器
使用 ： {msg | toDouble}
如果带参数如 {{ msg | toDouble 2 3 }}
这些参数会一次传入函数 msg 2 3
双向过滤器
过滤html标签的正则
str.replace(/<[^<]+>/g,”)
自定义指令
！！指令一定要定义在Vue实例之前
Vue.directive(‘abc’,function(input){
this.el// 指令放置的元素，原生dom元素
})
调用 v-abc =”input”
拖拽实例
自定义元素
使用
也可以在style中写入样式
abc{display:block}
自定义键盘信息Vue.directive(‘on’).keyCodes.ctrl=17;
将17赋值ctrl，正常情况下支持键码事件，如 ： @keydown.17=””
但是不支持@keydown.ctrl=”” ,可以用这个方法定义
vue动画
实例代码
配合animate.css
实例
组件 ：一个大的对象
定义组件
1、
实例（全局组件）
局部组件 （某个Vue实例内部的组件）
其他写组件的方式
下面是三种写组件方法的实例
模板（还是components的用法,只是template用id关联）
模板的实例
动态组件
1.0版
1、created //实例被创建
2、beforeCompile //编译之前
3、compiled //编译之后
4、ready //准备完毕 （一般刷新页面更新数据放在这个位置）
5、beforeDestroy //销毁之前
6、destroyed //销毁后
<script src="./vue-1.0.28.js"></script>
<script src="./js/vue-resource.min.js"></script>
<style>
.gray{
background:#ccc;
}
</style>
</head>
<body>
<div id="box">
{{center}}
</div>
<script>
var c =new Vue({
el:"#box",
data:{
center:"center",
msg:"",
newdata:[],
nowIndex:-1
},
methods:{
},
beforeCompile:function(){
alert("编译之前");
},
compiled:function(){
alert("编译后")
},
created:function(){
alert("实例被创建")
},
ready:function(){
alert('准备完毕')
}
})
</script>防止页面闪烁【v-cloak】
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指
4000
令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none; //写在style标签中
}
<div v-cloak>
{{ message }}
</div>计算属性computed
computed:{
b:function(){//默认调用的是get方法
return this.a+1;//b的值取决于return
}
}完整的计算属性：
computed:{
b:
{
get:function(){
//默认方法
}
set:function(){}//不能给自身设置值
}
}计算属性里面一般处理一些业务逻辑的代码，最后值要return出去
<script src="./vue-1.0.28.js"></script>
<script src="./js/vue-resource.min.js"></script>
<style>
.gray{
background:#ccc;
}
</style>
</head>
<body>
<div id="box">
nowIndex => {{nowIndex}}
msg => {{msg}}
</div>
<script>
var c =new Vue({
el:"#box",
data:{
center:"center",
msg:"",
newdata:[],
nowIndex:-1
},
computed:{
msg:{
get:function(){
return this.nowIndex+1;
},
set:function(val){
console.log(this.msg)//不能给自身设置值
console.log(val)
// this.nowIndex=val;
// this.msg=val;
}
}
}
})
window.onclick = function(){
// console.log(c)
// c.msg=9;
// console.log(c.msg)
c.nowIndex=3;
}
</script>vue的实例方法
var vm = new Vue({});
vm.$mount(“#box”) //手动挂载元素
vm.$el -> 得到绑定的元素
vm.$data -> 得到实例中的data
vm.$options -> 获取自定义属性
例：new Vue({
show:function(){},
data{}
})
vm.$destroy -> 销毁对象
vm.$log -> 查看数据现在的状态
track-by=“$index”允许向数组中插入重复数据
例：
<li v-for="val in arr" track-by="$index">
可以提高循环的性能
////////////////////////////
自定义过滤器
Vue.filter('toDouble',function(input){
return input<10?"0"+input:input;
})使用 ： {msg | toDouble}
如果带参数如 {{ msg | toDouble 2 3 }}
这些参数会一次传入函数 msg 2 3
双向过滤器
Vue.filter('abc',{
read:function(input){return },
write:function(val){ return val }
})过滤html标签的正则
str.replace(/<[^<]+>/g,”)
自定义指令
！！指令一定要定义在Vue实例之前
Vue.directive(‘abc’,function(input){
this.el// 指令放置的元素，原生dom元素
})
调用 v-abc =”input”
<body>
<div id="box">
<input type="number" v-model="nowIndex">
<ul>
<li v-for="val in newdata |orderBy parseInt(nowIndex)" v-red="nowIndex">{{val}}</li>
</ul>
</div>
<script>
Vue.directive('red',function(input){
this.el.style.background="red"
console.log(this)
console.log(input)
})
var c =new Vue({
el:"#box",
data:{
center:"",
msg:"",
newdata:['apple','ddd','banana','orange','pear'],
nowIndex:-1
}
})
</script>拖拽实例
<script src="vue.js"></script>
<script>
Vue.directive('drag',function(){
var oDiv=this.el;
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
};
</script>
</head>
<body>
<div id="box">
<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
</div>
</body>自定义元素
Vue.elementDirective('abc',{
bind:function(){
this.el.style.background="red";
}
})使用
<abc></abc>
也可以在style中写入样式
abc{display:block}
<style>
abc{
width:100px;
background: gray;
height:100px;
display: block;
}
</style>
<script src="vue.js"></script>
<script>
Vue.elementDirective('abc',{
bind:function(){
this.el.style.background='red';
}
});
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
};
</script>
</head>
<body>
<div id="box">
<abc>sssssss</abc>
</div>
</body>自定义键盘信息Vue.directive(‘on’).keyCodes.ctrl=17;
将17赋值ctrl，正常情况下支持键码事件，如 ： @keydown.17=””
但是不支持@keydown.ctrl=”” ,可以用这个方法定义
数据监听$watch
$watch(name,fncallback) //浅度监视
//例
$watch('a',function(){alert(1)})
$watch(name,fncallback,{deep:true})//深度监视，能监视对象内的变化vue动画
<style>
.fade-transition{
transition:all 2s;
}
.fade-enter{//写入显示前的状态
opacity:0;
transform:translate(100px,0);
}
.fade-leave{//消失后的状态
opacity:0;
transform:translate(200,0)
}
<html>
<div id="box">
<div v-show:"a" transition="fade"></div>
<button @click="show">anniu</button>
</div>
methods:{
show(){
this.a=!a;
}
}实例代码
<script src="./bower_components/vue/dist/vue.min.js"></script>
<style>
.fade-transition{
transition :all 2s;
}
.fade-enter{
opacity:0;
transform:translate(1100px,0);
}
.fade-leave{
opacity: 0;
transform: translate(90px,0);
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="dian" @click="show">
<div v-show="a" transition='fade' :style='{background:"red",width:"200px",height:"200px"}'></div>
</div>
<script>
new Vue({
el:"#box",
data:{
a:true
},
methods:{
show(){
this.a=!this.a;
}
}
})
</script>配合animate.css
<div class="animated" v-show="a" transition="my-zoom"></div>
new Vue({
transition:{
'my-zoom':{
enterClass:"zoomInLeft",
leaveClass:"zoomOutRight"
}
}
})实例
<link rel="stylesheet" href="./css/animate.min.css">
<script src="./bower_components/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="dian" @click="show">
<div v-show="a" class="animated" transition="my-bounce" :style='{margin:"auto",background:"red",width:"200px",height:"200px"}'></div>
</div>
<script>
new Vue({
el:"#box",
data:{
a:true
},
methods:{
show(){
this.a=!this.a;
console.log(this.a)
}
},
transitions:{
'my-bounce':{
enterClass:"zoomInLeft",
leaveClass:"zoomOutRight"
}
}
})
</script>组件 ：一个大的对象
定义组件
1、
var comA=Vue.extend({
template:"<h1>我是模板哦</h1>"
})
Vue.component('aa',comA)
//调用方法
<aa></aa>
**组件里的data数据必须是函数形式，并且return出去，其他方法无变化
//例
Vue.extend({
data(){
return{
msg:111
}
},
template:"<h1>{{msg}}</h1>"
})实例（全局组件）
<script src="./bower_components/vue/dist/vue.min.js"></script>
</head>
<body>
<div class="box">
<aa></aa>
</div>
<script>
var Aa = Vue.extend({
data(){return{msg:'111'}},
template:'<h3>{{msg}}</h3>'
})
Vue.component("aa",Aa)
new Vue({
el:".box",
data:{
msg:222
}
})
</script>局部组件 （某个Vue实例内部的组件）
<script src="./bower_components/vue/dist/vue.min.js"></script>
</head>
<body>
<div class="box">
<my-aa></my-aa>
</div>
<script>
var Aa = Vue.extend({
data(){
return {
msg:"我是h3"
}
},
template:'<h3>{{msg}} h3</h3>'
})
new Vue({
el:".box",
components:{
"my-aa":Aa
}
})
</script>其他写组件的方式
Vue.component('aa',{
template:'<h3>全局组件</h3>'
})
//或者写在实例的内部
new Vue({
components:{
'aa':{
template:'<h1>我是局部组件'
}
}
})下面是三种写组件方法的实例
<script src="./bower_components/vue/dist/vue.min.js"></script>
</head>
<body>
<div class="box">
<aa></aa>
<bb></bb>
</div>
<script>
// 方法二
Vue.component('aa',{
template:"<h1>我是全局组件{{msg}}",
data(){
return{
msg:'11111111111quanju'
}
}
})
//方法一
// var Aa = Vue.extend({
// data(){
// return {
// msg:"我是h3"
// }
// },
// template:'<h3>{{msg}} h3</h3>'
// })
new Vue({
el:".box",
components:{//方法3
// "my-aa":Aa //方法一
"bb":{
template:"<h2>我是局部组件{{msg}}",
data(){
return {
msg:'1111111111jubu'
}
}
}
}
})
</script>模板（还是components的用法,只是template用id关联）
new Vue({
components:{
'aa':{
template:'#aaa'
}
}
})
//方法一：
<script type="x-template" id="aaa">
</h1>我是组件的模板一
</>
//方法二
<template id="aaa">
<h1>这是第二钟写模板的方法
</>模板的实例
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>
实例二
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
<ul>
<li>1111</li>
<li>222</li>
<li>3333</li>
<li>1111</li>
</ul>
</script>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>动态组件
<script src="./vue-1.0.28.js"></script>
</head>
<body>
<div id="box">
<button @click="a='aa'">aa</button>
<button @click="a='bb'">bb</button>
<component :is="a"></component>
</div>
<script>
var c =new Vue({
el:"#box",
data:{
a:"aa",
},
components:{
'aa':{template:"<h1>我是aa组件"},
'bb':{template:"<h1>我是bb组件"}
}
})
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue.js学习笔记，一、安装部署
- VUE学习笔记三：基础语法之循环语句
- 简单的vuex 的使用案例笔记
- vue 学习笔记 part-2->指令v-for
- vue.js 源代码学习笔记 ----- instance index
- vue的笔记
- vue 学习笔记
- Vue.js 2.x笔记：表单绑定（3）
- Vue.js学习笔记：组件
- Vue.js 2.x笔记：服务请求axios（8）
- Vue 2.0学习笔记：Vue组件内容分发（slot）
- Vue.js笔记-数字拼图小游戏
- vue 学习笔记
- VUE 入门笔记
- vue笔记--计算属性
- Vue笔记3 vue-cli单页面应用与路由设置
- vue.js学习笔记--遇到的那些问题
- vue 面试笔记
- vue2.3.0笔记
- vue学习笔记三：常见的表单绑定