vue补充

Posted susutong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue补充相关的知识,希望对你有一定的参考价值。

之前对vue只是有了一个大概的了解,项目中好多东西也没用上,所以,有空就对vue进行知识补充,记录一下零零碎碎

1:v-for

   v-for用来做循环渲染,最简单的就是

    <li v-for="site in sites"> {{ site.name }} </li> 

 但是我们有时候也要用到当前值的索引值或者键

可以提供第二个参数为键名,如下

<ul>
    <li v-for="(value, key) in object">  //切记,第一个参数是值,第二个参数是键名
    {{ key }} : {{ value }}
    </li>
</ul>

 可以提供第三个参数为索引

<ul>
    <li v-for="(value, key, index) in object">  //切记。第一个参宿是值。第二个参数是键,第三个参数是索引
     {{ index }}. {{ key }} : {{ value }}
    </li>
</ul>

 

2 计算属性

  计算属性在处理一些复杂逻辑时是很有用的。

  例如:要反转一个字符串,我们可以这么写

<div id="app">
  {{ message.split(‘‘).reverse().join(‘‘) }}
</div>

 虽然这样写也可以实现目的,但是这样使代码看起来让人难以理解,但是使用computed计算属性就轻松多了

 1 <div id="app">
 2   <p>原始字符串: {{ message }}</p>
 3   <p>计算后反转字符串: {{ reversedMessage }}</p>
 4 </div>
 6 <script>
 7 var vm = new Vue({
 8   el: ‘#app‘,
 9   data: {
10     message: ‘Runoob!‘
11   },
12   computed: {
14     reversedMessage: function () {
16       return this.message.split(‘‘).reverse().join(‘‘)
17     }
18   }
19 })

computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值

 

3.监听属性

 监听属性在项目中经常用到,但是用的也不全面,这里只补充自己没用到过

 watch : {
    count:function(newValue,oldValue){   //第一个参数是count的新值,第二个参数是旧值
    document.getElementById ("info").innerhtml = "修改前值为: " + oldValue + ",修改后值为: " + newValue; } }

4.class的绑定

   自己经常忘了动态绑定是怎么写,然后又在网上找,很麻烦,在这里一并记录下来

1 <div id="app">
2   <div v-bind:class="{ active: isActive }"></div>   //如果isActive为真,就绑定active类名。否则,就不绑定
   <div class="static" v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"> </div>  //多个之间用逗号隔开
3 </div>


 

5  v-bind和v-model

1:v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值="表达式"

2:v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id  === :id  

3:v-model用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。

 

 

 

  





以上是关于vue补充的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板