优酷网站怎么做的,百度指数是怎么计算的,建立什么样的网站赚钱,在线长链接转短链接一、Vue页面组成
目前的项目中#xff0c;Vue页面都是采用组件套娃的形式#xff0c;由一个一个的组件拼接而成整个页面。一个组件就是一个.vue文件。组件通常由template和script两部分组成#xff1a; template部分#xff1a;页面展示的具体元素内容#xff0c;比如文字…一、Vue页面组成
目前的项目中Vue页面都是采用组件套娃的形式由一个一个的组件拼接而成整个页面。一个组件就是一个.vue文件。组件通常由template和script两部分组成 template部分页面展示的具体元素内容比如文字、文本框、按钮、图片等。 script部分页面涉及的具体方法函数、交互等代码。
template内容举例如下 二、script内容
2.1 data()
定义页面上各个文本框的值实现数据双向绑定并自动装填进data 2.2 mounted()、methods
mounted里面主要定义在页面数据加载完成后执行的方法比如你的页面已经加载完了然后通过操作可以生成一个二维码图片页面上需要在某个区域展示这个二维码那么展示二维码这个方法的代码就写在mounted里面。
method里面主要定义对页面执行的所有操作操作对应的方法函数都写在method里面 2.3 created()
页面元素内容加载前需要执行的方法都放在created()下面。
比如你要获取当前的时间戳,然后把时间戳赋值给页面上的某个文本框作为该文本框的初始值,那么获取当前时间戳的方法调用就要写在created()下面 2.4 watch()
watch主要用于侦听vue实例响应数据的变化通常用于处理一些需要动态变化的值比如下图所示监听activityId值的变化并将变化后的值和merchantNo的值合并起来作为couponCode的值 此外watch只能监听一层因为我们是要处理在form下的数据一层是监听不到的所以需要使用deep:true做深度监听。immediate:true 表示初始化的时候就监听设为false则初始化不监听只有数据有变化时才监听。
2.5 computed()
computed主要用于复杂的计算并且由于有缓存机制性能开销比较小。使用方法如下图所示 其实简单的计算使用methods也能达到同样的效果。但由于computed有缓存机制只要数据层值不改变computed就不会重新去计算一次而methods里的函数在每次调用时都要执行因此复杂计算时建议使用computed 此外在调用时computed定义的成员像属性一样访问methods定义的成员必须以函数形式调用。比如上图所示调用computed直接用{{fullName}}而调用methods则必须以函数的方式调用{{Names()}}。
