当前位置：首页 > news >正文

网站怎么做自营销/求网址

news 2025/7/26 9:43:41

网站怎么做自营销,求网址,如何做点击赚钱的网站,品牌建设政策生存周期（具体内容看生存周期章节） 1.0版 1、created //实例被创建 2、beforeCompile //编译之前 3、compiled //编译之后 4、ready //准备完毕 （一般刷新页面更新数据放在这个位置） 5、beforeDestroy //销毁之前 6、destroyed //…

生存周期（具体内容看生存周期章节） 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 } 一起用时，这个指令可以隐藏未编译的 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>