vue笔记（二）

末蓝、 2022-06-02 03:13 264阅读 0赞

生存周期（具体内容看生存周期章节） 1.0版 1、created //实例被创建 2、beforeCompile //编译之前 3、compiled //编译之后 4、ready //准备完毕 （一般刷新页面更新数据放在这个位置） 5、beforeDestroy //销毁之前 6、destroyed //销毁后

  1. <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 } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  1. [v-cloak] { display: none; //写在style标签中 } <div v-cloak> { { message }} </div>

计算属性computed

  1. computed:{
  2.       b:function(){ //默认调用的是get方法
  3.                 return this.a+1;//b的值取决于return
  4.     }
  5. }

完整的计算属性：

  1. computed:{
  2.             b:
  3.                 {
  4.             get:function(){ 
  5.                     //默认方法
  6.         }
  7.         set:function(){ }//不能给自身设置值
  8.     }
  9. }

计算属性里面一般处理一些业务逻辑的代码，最后值要return出去

  1. <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">
可以提高循环的性能

自定义过滤器

  1. Vue.filter('toDouble',function(input){ 
  2.     return input<10?"0"+input:input;
  3. })

使用 ： {msg | toDouble}
如果带参数如 { { msg | toDouble 2 3 }}
这些参数会一次传入函数 msg 2 3

双向过滤器

  1. Vue.filter('abc',{
  2.         read:function(input){ return },
  3.         write:function(val){  return val }
  4. })

过滤html标签的正则
str.replace(/<[^<]+>/g,”)
自定义指令
！！指令一定要定义在Vue实例之前
Vue.directive(‘abc’,function(input){
this.el// 指令放置的元素，原生dom元素
})

调用 v-abc =”input”

  1. <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>

拖拽实例

  1. <script src="vue.js"></script>
  2.     <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>
  3. </head>
  4. <body>
  5.     <div id="box">
  6.         <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
  7.         <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
  8.     </div>
  10. </body>

自定义元素

  1. Vue.elementDirective('abc',{
  2.     bind:function(){ 
  3.         this.el.style.background="red";
  4.     }
  5. })

使用 <abc></abc>
也可以在style中写入样式
abc{display:block}

  1. <style> abc{ width:100px; background: gray; height:100px; display: block; } </style>
  2.     <script src="vue.js"></script>
  3.     <script> Vue.elementDirective('abc',{ bind:function(){ this.el.style.background='red'; } }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ a:'blue' } }); }; </script>
  4. </head>
  5. <body>
  6.     <div id="box">
  7.         <abc>sssssss</abc>
  8.     </div>
  10. </body>

自定义键盘信息Vue.directive(‘on’).keyCodes.ctrl=17;
将17赋值ctrl，正常情况下支持键码事件，如 ： @keydown.17=””
但是不支持@keydown.ctrl=”” ,可以用这个方法定义

  1. 数据监听$watch
  2. $watch(name,fncallback)  //浅度监视
  3. //例
  4. $watch('a',function(){ alert(1)})
  5. $watch(name,fncallback,{deep:true})//深度监视，能监视对象内的变化

vue动画

  1. <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; } }

实例代码

  1. <script src="./bower_components/vue/dist/vue.min.js"></script>
  2.     <style> .fade-transition{ transition :all 2s; } .fade-enter{ opacity:0; transform:translate(1100px,0); } .fade-leave{ opacity: 0; transform: translate(90px,0); } </style>
  3. </head>
  4. <body>
  5.     <div id="box">
  6.         <input type="button" value="dian" @click="show">
  7.         <div v-show="a" transition='fade' :style='{background:"red",width:"200px",height:"200px"}'></div>
  8.     </div>
  9.     <script> new Vue({ el:"#box", data:{ a:true }, methods:{ show(){ this.a=!this.a; } } }) </script>

配合animate.css

  1. <div class="animated" v-show="a" transition="my-zoom"></div>
  2. new Vue({
  3.     transition:{
  4.         'my-zoom':{
  5.             enterClass:"zoomInLeft",
  6.             leaveClass:"zoomOutRight"
  7.         }
  8.     }
  9. })

实例

  1. <link rel="stylesheet" href="./css/animate.min.css">
  2.     <script src="./bower_components/vue/dist/vue.min.js"></script>
  3. </head>
  4. <body>
  5.     <div id="box">
  6.         <input type="button" value="dian" @click="show">
  7.         <div v-show="a" class="animated" transition="my-bounce" :style='{margin:"auto",background:"red",width:"200px",height:"200px"}'></div>
  8.     </div>
  9.     <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、

  1. var comA=Vue.extend({
  2.     template:"<h1>我是模板哦</h1>"
  3. })
  4. Vue.component('aa',comA)
  5. //调用方法
  6. <aa></aa>
  7. **组件里的data数据必须是函数形式，并且return出去，其他方法无变化
  8. //例
  9. Vue.extend({
  10.     data(){
  11.         return{
  12.             msg:111
  13.         }
  14.     },
  15.     template:"<h1>{ {msg}}</h1>"
  16. })

实例（全局组件）

  1. <script src="./bower_components/vue/dist/vue.min.js"></script>
  2. </head>
  3. <body>
  4.     <div class="box">
  5.         <aa></aa>
  6.     </div>
  7.     <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实例内部的组件）

  1. <script src="./bower_components/vue/dist/vue.min.js"></script>
  2. </head>
  3. <body>
  4.     <div class="box">
  5.         <my-aa></my-aa>
  6.     </div>
  7.     <script> var Aa = Vue.extend({ data(){ return { msg:"我是h3" } }, template:'<h3>{ {msg}} h3</h3>' }) new Vue({ el:".box", components:{ "my-aa":Aa } }) </script>

其他写组件的方式

  1. Vue.component('aa',{
  2.     template:'<h3>全局组件</h3>'
  3. })
  4. //或者写在实例的内部
  5. new Vue({
  6.     components:{
  7.         'aa':{
  8.             template:'<h1>我是局部组件'
  9.         }
  10.     }
  11. })

下面是三种写组件方法的实例

  1. <script src="./bower_components/vue/dist/vue.min.js"></script>
  2. </head>
  3. <body>
  4.     <div class="box">
  5.         <aa></aa>
  6.         <bb></bb>
  7.     </div>
  8.     <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关联）

  1. new Vue({
  2.     components:{
  3.         'aa':{
  4.             template:'#aaa'
  5.         }
  6.     }
  7. })
  8. //方法一：
  9. <script type="x-template" id="aaa">
  10.     </h1>我是组件的模板一
  11. </>
  12. //方法二
  13. <template id="aaa">
  14.     <h1>这是第二钟写模板的方法
  15. </>

模板的实例

  1. <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>

动态组件

  1. <script src="./vue-1.0.28.js"></script>
  2. </head>
  3. <body>
  4.     <div id="box">
  5.         <button @click="a='aa'">aa</button>
  6.         <button @click="a='bb'">bb</button>
  7.         <component :is="a"></component>
  8.     </div>
  9.     <script> var c =new Vue({ el:"#box", data:{ a:"aa", }, components:{ 'aa':{template:"<h1>我是aa组件"}, 'bb':{template:"<h1>我是bb组件"} } }) </script>

发表评论

表情：
评论列表 （有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue笔记（二）

    生存周期（具体内容看生存周期章节） 1.0版 1、created //实例被创建 2、beforeCompile //编译之前 3、compiled //编译之后 4、read

    末蓝、末蓝、/ 0 赞/ 265 阅读