这篇文章给大家聊聊关于算命网站源码分享，以及算命网站模板对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
作者|新鲜的橘子
责编|王晓曼
出品|CSDN博客
VUE实例的创建
该实例中的内容将和和下面的例子相对应：
varvm=newVue({el:”,data:{msg:”我的信息”,msg1:”<span>我是一个html</span>”,mytitle:’title’,list:[{id:1,name:’zhangsan’},{id:2,name:’lisi’},{id:3,name:’wangmazi’},],obj:{id:1,name:’orange’,age;18},flag:’true’，style1:{color:’pink’,’font-size’:’30px’},style2:{font-family:monospace;}},methods:{click{}}，filters:{filter1:function(data){//代码块}}})
基本指令1.V-Cloak
解决闪烁问题。闪烁问题原因使用插值表达式时若VUE还未加载完成则会直接将插值表达式当作文本内容显示。
<h1v-cloak>{{msg}}</h1>
2.V-Text
标签内部的文本会被mag变量的值所覆盖。
<h1v-text=”msg”></h1>
v-html当作html页面元素解析。
如果msg1的值是一个html标签字符串，则会将其解析为html元素。
<h1v-text>{{msg1}}</h1>
3.V-bind
绑定数据,可以简写成:
<inputtype=”button”value=”btn”v-bind:title=”mytitle”>
4.v-on
绑定事件可以简写成@
<inputtype=”button”value=”btn”v-on:click=”click”>
5.v-for
在组件中使用v-for循环或者在一些特殊情况中，如果v-for出现问题，则必须绑定唯一的key（值为字符串或者数字）
（1）迭代数组
<ul><liv-for=”(item,index)inlist”:key=”item.id”>index—-{{index}}–{{item.id}}–{{item.name}}</li><ul>
（2）迭代对象
<divv-for=”(value,key,index)inobj”>{{value}}—-{{key}}—-{{index}}</div>
（3）迭代数字
<pv-for=”iin10″>这是第{{i}}个p标签</p>
6.v-if
如果flag为false则dom中不会出现这个h1标签。
<h1v-if=”flag”>这是一个if控制的h1标签</h1>
7.v-show
如果flag为false则仅仅是将h1的display设置为none。
<h1v-show=”flag”>这是一个if控制的h1标签</h1>
如果页面中的dom元素需要频繁显示隐藏建议使用v-show指令。
8.v-model
实现数据的双向绑定常应用于表单中,在下面这个表单输入值,msg的数据发生改变同时p标签里面的内容也会同步渲染到页面中。
<inputtype=’text’v-model=’msg’><p>{{msg}}</p>
指令
1、自定义指令
VUE中的指令都已v-开头
2、自定义全局指令
第一个参数为指令的名称，第二个参数为对象，在对象里有一些相关的钩子函数，在不同的阶段执行不同的钩子函数。
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可定义一个在绑定时执行一次的初始画动作。
inserted:被绑定元素插入父节点时调用（父节点存在时即可调用，不必存在于document中）。。
update:所在组件的VNode更新时调用，但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可通过比较更新后的值来忽略不必要的模板更新
componentUpdated:所在组件的VNode及其孩子的VNode全部更新时调用。
unbind:只调用一次，指令于元素解绑时调用。
3、钩子函数的参数(el,binding,vnode,oldVnode)
钩子函数参数的解释：
Vue.directive(‘focus’,{bind:function(el,binding){},inserted:function{el.focus},update:function{}})
样式相关写在bind里面就行，于js行为相关的写在inserted里面防止其不生效，例如上面的获取焦点就写在了inserted中：
Vue.directive(‘color’,{bind:function(el,binding){el.style.color=binding.value},})
使用定义好的focus指令和color指令：
<inputtype=”text”v-focusv-color=”‘red'”>
自定义私有指令：
varvm2=newVue({el:”,data:{},directives:{‘fontWeight’:{bind:function(el,binding){el.style.fontWeight=binding.value}}}})
使用定义好的fontWeight指令：
<inputtype=”text”v-focusv-fontWeight=”‘500′”>
函数简写
大多数情况下可能只想在bind和update钩子函数上做重复的动作，不关心其他钩子函数可以简写为：
Vue.directive(‘color-swatch’,function(el,binding){el.style.backgroundColor=binding.value})
1、事件修饰符
.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身触发时触发回调
.once事件只触发一次
2、事件冒泡：触发子元素的事件时，父级元素相同事件也会依次向上触发-孙子-父亲-爷爷。3、事件捕获：在冒泡之前会有一个事件捕获过程和冒泡顺序相反-爷爷-父亲-孙子。
使用方式：
<inputtype=”button”value=”btn”v-on:click.once=”click”>
4、按键修饰符
.enter当按下enter键时才调用click方法，enter也可以用相应的字符编码代替。
只有少数的按键才可以写按键名称entertabdeleteescspaceupdownleftright。
<inputtype=”button”value=”btn”@keyup.enter=”click”>
当然也可以自定义键盘修饰符：
Vue.config.keyCodes.name=code//name为名称，code为按键编码
接着就可以使用这个自定义的按键修饰符了。
<inputtype=”button”value=”btn”@keyup.name=”click”>
在VUE中使用样式1、使用class样式
（1）数组
<h1:class=”[‘class1′,’class2’]”></h1><h1:class=”[‘class1′,’class2’,flag?class3:”]”></h1><!–三元表达式，如果flag为true则有class3–><h1:class=”[‘class1′,’class2’,{class3:flag}]”></h1><!–数组中也可以嵌套对象，对象键为类名，值为布尔值–>
（2）对象
<h1:class=”{class1:true,class2:true}”></h1><!–也可以是对象对象键为类名，值为布尔值–>
2、使用style样式
（1）直接在元素上设置
<h1:style=”{color:’pink’,’font-size’:’30px’}”>我是大橘子</h1>
（2）在data中设置，通过:style引用
<h1:style=”style1″>我是大橘子</h1>
（3）在:style通过数组引用多个样式对象
<h1:style=”[style1,style2]”>我是大橘子</h1>
过滤器1、过滤器的定义
全局过滤器的定义：
Vue.filter(‘filterName’,(data)=>{//代码块})
第一个参数为过滤器的名称，第二个参数为一个函数，函数的第一个参数为要处理的变量其他参数可随意指定。
2、私有过滤器的定义
在最上面的vm实例中的filters对象中定义了一个名称filter1的过滤器。
3、过滤器的调用
{{mag|filterName}}
如果全局和私有过滤器名称一样，则会优先调用私有过滤器。
调用时传递的第一个参数为定义时的第二个参数，因为第一个参数已经被占了。
管道符前面为传递的数据，管道符后面为过滤器的名字。
生命周期
生命周期中的钩子函数有8个每个的作用都在下面代码的注释中：
varvm2=newVue({el:”,data:{},//创建阶段beforeCreate{},//实例创建之前执行created{},beforeMount{},//模板已经在内存中完成，打包尚未渲染到页面中mounted{},//内存中的模板已经挂载到页面中//运行阶段beforeUpdate{},//数据被更新但尚未渲染到页面中,数据更新时才会调用updated{},//数据已经渲染到页面中//销毁阶段beforeDestory{},//datamethods过滤器都是可用的还未执行销毁过程destoryed{}//组件已经被销毁，所有的东西已不可用})
1、动画
过渡类动画：
<style>.v-enter,.v-leave-to{opacity:0;transform:translateX(200px);}.v-enter-active,.v-leave-active{transition:all0.5sease;}</style><div><inputtype=”button”@click=”flag=!flag”value=”动画”><transition><h1v-if=”flag”>我是h1</h1></transition></div>
使用v-的时候会为所有的元素动画元素都加上这个样式，如果要给特定的样式，只需要给transition标签加上name属性，然后将**v-改为name-**即可。
2、组件
（1）组件的定义
组件通俗来讲就是一个个小型，独立的可复用的东西，比如我们的一个页面是由html标签堆积起来的，这些标签就可以理解为组件，当然这只是一个通俗的说法，具体概念还请查阅VUE官网。
下图展示一个应用界面被抽象为一个组件树：
（2）全局组件
第一个参数为组件的名称，我在这里定义了一个comp4的组件“，第二个参数为一个对象。template模板内容只能有一个根元素(div)。
Vue.component(‘comph4′,{template:'<div><h4>这是一个h4标题</h4></div>’})
以上方法在输入模板内容时在编辑器内无任何智能提示,所以我将template模板内容放在外面。
template我给他传递一个ID选择器cmp4，并在外部通过template标签定义模板内容。
<templateid=”cmp4″><div><h4>这是一个h4标题</h4></div></template><script>Vue.component(‘comph4′,{template:’app1′,data:{},methods:{},components:{comph3:{template:’cmp4′,data:function{return{msg：’msg这是组件中data中的数据’}},methods:{}})
（2）组件的切换
eg：在VUE实例的data中定义一个变量通过同过点击不同的按钮给data变量赋不同的值，根据不同的值来选择显示哪个组件。
<divid=”app1″><inputtype=”button”value=”cmph3″@click=”iscom=’comph3′”><inputtype=”button”value=”cmph4″@click=”iscom=’comph4′”><component:is=”iscom”></component></div>varvm=newVue({el:’app1′,data:{msg:’我是父组件中的msg’,fromSon:},methods:{show(data){//父组件的show方法接收一个参数this.fromeSon=data;//将从子组件接收过来的data赋值给父组件的fromSon}}compents:{comph4:{template:'<div><h4>我是一个h4—{{fromParent}}</h4><inputtype=”button”value=”调用父组件中的方法”@click=”myclick“></div>’，props:[‘fromParent’],data:function{return{data:{name:’orange’,age:18}}},methods:{myclick{this.$emit(‘fun’,this.data)//将子组件中的data传递给父组件}}}}})
版权声明：本文为CSDN博主「新鲜的橘子」的原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45753500/article/details/106226421
?刘强东卖光碟，周鸿祎“电脑算命”，马云卖鲜花，盘点IT大佬摆过的地摊
?从地摊看云计算：规模产业历程大揭秘
?头条和百度“大打出手”时，微信搜索去哪儿了？
?怒肝8个月源码，我成为了Spring开源贡献者
?干货|基于SRS直播平台的监控系统之实现思路与过程
?挖矿仍然有利可图吗？
关于算命网站源码分享，算命网站模板的介绍到此结束，希望对大家有所帮助。