vue(二)—指令详细使用及其区别&实例属性

绝地灬酷狼 2022-01-27 23:17 187阅读 0赞

1、\{ \{\}\}、v-text和v-html(绑定数据)、v-bind(绑定属性)、v-on(绑定方法)、v-model(数据双向绑定)

*  **v-text和v-html两者的区别是v-text会将标签语义化，v-html不会将标签语义化**
 *  **v-on:可以简写为@**
 *  **v-bind:可以简写为：**
 *  **\{ \{ \}\} 为模板插值法，用于输出对象属性和函数返回值。**
 *  **数据双向绑定是指在当改变vue实例中的数据时对应的模板中的数据也会改变，同时模板中的数据被修改时，对应的vue示例中的数据也会被实时改变**

示例如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]  
上面代码的显示结果如下：  
![在这里插入图片描述][20190522122639487.PNG]  
2、vue实例中的watch侦听属性和computed计算属性

*  **watch属性是用来侦听vue实例中属性值发生变化时，watch里面定义的方法就会被触发**
 *  **computed计算属性在处理一些复杂逻辑时是很有用的，它是用来计算vue中的一些属性运算,只有当computed所依赖的数据发生变化时，computed就会触发并进行运算，否则它就是缓存着上一次计算的属性值。**  
    用法示例如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]  
    显示结果如下：  
    ![在这里插入图片描述][20190522163353391.PNG]  
    3、v-if v-else，v-else-if指令和v-show指令
 *  **v-if和v-show这两个指令的值是true或者false,用来显示或着隐藏元素，true为显示，false为隐藏**
 *  **两者区别是：v-if隐藏元素是将要隐藏的元素标签在页面中去除；而v-show是给要隐藏的元素标签添加了display：none属性，但元素标签还在页面中**
 *  **v-if指令和·v-else指令是对应的，当v-if的值是false时，显示的就是v-else的内容**
 *  **v-else-if是可以链式的多次使用**

v-if和v-show的用法如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20190524171640606.PNG]  
![在这里插入图片描述][20190524171706546.PNG]  
v-if和v-else的用法如下![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 4]  
显示结果:  
![在这里插入图片描述][20190524172049532.PNG]  
![在这里插入图片描述][20190524172015576.PNG]  
4、v-for指令  
用法如下：  
下面代码实现的是每在input框输入一个数据并提交后都会添加到一个数组中，再通过v-for遍历这个数组通过< li>标签显示在下面，并且每次提交后input框都会被清空![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 5]  
vue基础知识点:  
[一、vue安装&实例创建&挂载点&模板][vue]  
[二、指令详细使用及其区别&实例属性][Link 1]  
[三、组件与组件的拆分][Link 2]  
[四、Vue组件之 d i s p a t c h 和 dispatch和 dispatch和broadcast][Vue_ d i s p a t c h _ dispatch_ dispatch_broadcast]  
[五、vue组件之祖孙传后代provide和inject][vue_provide_inject]  
[六、Vue组件之详细理解并使用props和$emit()  
][Vue_props_emit_]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20220128/4e3814ebc44649dabbc8c8253eccc955.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20220128/2dd5e47dcced48bb9183483317a23efb.png
[20190522122639487.PNG]: /images/20220128/d5b53cc1f63b47b68b203c7b14fb724d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]: /images/20220128/8f0609e18d3a47d79bdbe7ed46b5f220.png
[20190522163353391.PNG]: /images/20220128/8c806afd0ce14d7388d48143be73311e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]: /images/20220128/d2f39aa31b2b4493a0866618a8d9ba26.png
[20190524171640606.PNG]: /images/20220128/c86adbe2b66c4ec4b1fd9ed4b5e41820.png
[20190524171706546.PNG]: /images/20220128/c665ee4dadcc4b9abca2bda2c9542322.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 4]: /images/20220128/1e83a6d43f92489fb5ae9240b5e9e4df.png
[20190524172049532.PNG]: /images/20220128/58210e8189024b29bc506bf82192b14f.png
[20190524172015576.PNG]: /images/20220128/ea40cf7f207b49cea8035e8586c70a30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 5]: /images/20220128/469f1da3048449ed9b0449301d433f29.png
[vue]: https://blog.csdn.net/Sunday97/article/details/90413669?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008429819724839855179%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008429819724839855179&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-2-90413669.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Link 1]: https://blog.csdn.net/Sunday97/article/details/90447521?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-3-90447521.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Link 2]: https://blog.csdn.net/Sunday97/article/details/90578330?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-1-90578330.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Vue_ d i s p a t c h _ dispatch_ dispatch_broadcast]: https://blog.csdn.net/Sunday97/article/details/91443685?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-6-91443685.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[vue_provide_inject]: https://blog.csdn.net/Sunday97/article/details/91358599?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-7-91358599.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187
[Vue_props_emit_]: https://blog.csdn.net/Sunday97/article/details/91356575?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160008433519724839224940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160008433519724839224940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-8-91356575.pc_v2_rank_blog_default&utm_term=vue&spm=1018.2118.3001.4187