Vue学习记录

new Vue({

      el:"#id",    //绑定元素

      data:{        // 数据

      },

      methods:{   //方法集

      }

});

1、针对标签内容  直接 {{  lab  }}  ,如果需要调用方法  {{ function() }}

2、针对属性可以用，属性绑定：  v-bind:href="website"  注意此处没有 {{  }}双括号

3、针对标签， v-html="websiteTag" 此处也没有双   {{  }｝注意此处没有 {{  }}双括号

4、针对事件，v-on:click="age++"   针对简单的已存在的数值属性，可以直接使用表达式，age++,  age-- ;    但是复杂的方法就需要重新定义了  并使用 v-on:click="function"。 这里的function可以带括号也可以不带括号，但是如果有参数就必须要带括号和参数了。v-on: 可以变成 @

 5、事件修饰符  stop(阻止事件冒泡)    once(一次)    prevent(阻止默认事件) 等等不一一列举。键值修饰符：例如 tab  enter  等等不一一列举  特殊情况：双按键  例如 alt+enter   v-on:click.alt.enter   单按alt不管用，单用enter也不行，一起按才执行。

6、双向数据绑定（输入输出绑定）：一定是跟input、  select、  textarea等等有关,换句话说一定是跟输入有关。    这里介绍一个新的语法  ref="attribute"  ，我们在input里使用<input ref="name" />     this.$refs.name.value  ，另一种方式 v-model="name"

7、计算属性computed： VUE中el指向的元素会被vue复制成一个模版，Vue实际上只操作这个模版，如果发现模版和页面产生了变化，则立刻把模版覆盖到页面中，此时页面中如果有被调用的methods方法，方法也会被重新调用。 而如果页面上有引用到computed属性，只要模版中computed与页面没有变化，则不会被重新调用。

8、动态绑定CSS样式： V-bind:class="{red:true,blue:false}"  ;我们要想做成动态的就在data中定义一个 class 比如默认值是false;

我们就可以在页面上 v-on:click="class = !class";   调用计算属性直接返回样式对象。包含一组class

9、v-if指令 :    v-if="true"      v-show="true"等于 diplay:none

10、v-for :     {{characters[0]}}  {{characters[1]}} {{characters[2]}}

<li  v-for="char  in  characters">    {{character}}  </li>

<li  v-for="(user,index) in uers">{{index+1}}. {{user.name}} - {{user.age}} </li>  拿index

<template> 可以替代div 来渲染，指挥循环内部的内容

<template v-for="(user,index) in users">

<div v-for="(val,key) in user">  </div>

</template>   不仅可以遍历数组 还可以遍历对象。   key的使用： 运行速度会快，而且会报红，

v-for="(item,index) in getMenuItems" :key="index"

11、初始化多个Vue实例对象

var one = new Vue({});   var two = new Vue({});

在two实例中也可以修改 one中的数据

在外部也可以更改 one 或者 two中的内容。

12、Vue组件：

Vue.component("xsx",{

        template:"<p> hello word</p>"}，

        data:function(){

                return{

                        name:"xsx"

               }

        },

       methods:{

        }

)

在页面中就可以直接 调用。  {{ name}}   ，放在组件中的数据，比放在外部的数据 可以防止重复调用。

 

转载于:https://my.oschina.net/u/3018126/blog/3066945