vue使用总结

news/2024/7/10 0:49:41 标签: vue

一、vue中能提供数据的有:

1、data属性,如:data:{message: ''}中的message;

2、props中的元素,如props: ['title']中的title;

3、v-for中遍历出的元素,如v-for="todo in todos"中的todo;

注意:data和props中的数据在methods和computed中被引用时前面必须添加“this.”,在标签中不需要;同样的,在标签中使用methods和computed中的方法时也不需要添加"this.";

4、插槽slot:

二、根实例向子组件传递数据的方式:

1、props:

2、slot:

三、子组件向根实例传递数据的方式:

子组件的通过$emit('event_name', component_value)传递;

根实例中通过一个方法接收:function(data){......};

四、vue的methods和computed中的方法在{{}}和指令中其后面不添加“()”表示引用;

五、v-for可以循环组件;

六、"{{}}"和"v-html"输出data数据的相同和区别:

相同:data数据属性直接写入即可(htm标签属性如果想绑定data数据需在标签的属性前添加“v-bind”);

区别:如果data数据包含html标签,"v-html"可以将html标签解析,"{{}}"形式不行;

七、data数据的输出位置 :

1、标签中用“{{}}”输出;

2、标签属性中用“v-bind:”输出;

3、标签中直接用“v-html”输出;

4、标签中用“v-for”循环输出;

八、methods、computed、watch:

methods:一般的方法;

computed:对于任何复杂逻辑,你都应当使用计算属性;

watch:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的;

九、v-for 与 v-if:

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用。

而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。

十:组件:

组件是可复用的 Vue 实例,且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。

$emit:向父级组件触发一个事件;

通过事件向父级组件发送消息的两种方式:

十一、v-bind 的基本用途是动态更新 HTML 元素上的属性;

十二、函数内的this指向的是当前Vue实例本身;

十三、语法糖是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发。Vue.js的v-bind和v-on指令都提供了语法糖 ,也可以说是缩写,比如v-bind,可以省略v-bind,直接写一个冒号“:”,v-on可以直接用“@”来缩写。使用语法糖可以简化代码的书写。


http://www.niftyadmin.cn/n/887176.html

相关文章

以vue-cli 4.5.13为例介绍vue-cli卸载方式

直接通过命令卸载 npm uninstall -g vue-cli 提示&#xff1a; up to date in 0.05s 或者出现其它错误提示&#xff0c;这是很多开发者碰到的问题。 通过查看版本 vue -V 返回 vue/cli 4.5.13 此时通过 npm uninstall -g vue/cli 即可卸载。 如果还是无法卸载&#xff…

php oss图片鉴黄,Chevereto 调用百度图像审核 鉴黄

October十月大佬&#xff1a;看到论坛挺多人需求这个功能 就顺带研究了一下 之前有过类似经验 写起来挺快的首先 有个百度账号(废话……)登录百度AI控制台 https://console.bce.baidu.com/在内容审核中创建新应用记下APP_ID API_KEY SECRET_KEY百度 图像审核SDK https://ai.bai…

webpack系统配置

简言之&#xff0c;webpack 是一个模块打包器 (module bundler)&#xff0c;能够将任何资源如 JavaScript 文件、CSS 文件、图片等打包成一个或少数文件。 为什么要用Webpack? 首先&#xff0c;定义已经说明了 webpack 能将多个资源模块打包成一个或少数文件&#xff0c;这意…

尝试将matlab注册为ole服务器错误,Maxscript registeroleinterface似乎不工作

首先&#xff0c;感谢阅读本文并为我提供了一些帮助/反馈的人&#xff0c;因为我已经为此挣扎了几天。我是stackoverflow的新手&#xff0c;在问题中尽量详细。在但是&#xff0c;当我试图从另一个程序调用函数时(我用MATLAB和python脚本进行了尝试)&#xff0c;我得到了一个错…

vue各种实例集合

注意&#xff1a;以下所有示例基于vue 2.x、Vuex 2.x、 vm.$mount()-挂载&#xff1a; <body><div id"a"></div> </body> <script> var A Vue.extend({ template: <p>123</p> });/*// 自动挂载new A({el: #a});*/…

php 串行化数据,兆鹏和您学PHP5——PHP5中的数据串行化

今天我和大家分享我学习PHP5学习中的心得——数据(对象)的串行化&#xff0c;欢迎大家批评指正。(Why)为什么要数据串行化&#xff1a;也许我们在页面中&#xff0c;建立了一个数据结构对象&#xff0c;需要将该对象保存在文件系统或者通过网络传递给其他终端&#xff0c;那么我…

php百分比四舍五入两位,PHP保留两位小数 四舍五入方法

在php中要保留两位小数的方法有很多种办法&#xff0c;有如&#xff1a;sprintf,substr,number_format,round等等方法&#xff0c;下面我来给大家介绍介绍。方法一sprintf()函数 ,sprintf() 函数把格式化的字符串写写入一个变量中 代码如下复制代码$num 123213.666666;echo sp…

php 预定义常量表格,PHP的预定义常量

今天看鸟哥的yaf的一个demo&#xff0c;在入口文件中&#xff0c;作者有这么一个定义&#xff1a; define(DS, /);define(APP_PATH, dirname(__FILE__).DS....DS.application.DS); 作者的意思是吧DS定义为路径分隔符&#xff0c;我突然记得PHP有一个常量定义了路径分隔符&#…