2018-09-10

今天我学习了vue.js这是我第一次接触vue这个东西，今天学了半天感觉不算难，下面谈谈自己的一点心得。

Vue.js是一套构建用户界面的渐进式框架，创始人是华人尤雨溪。

创建vue.js

<div class="dc">

{{msg}}  调用vue msg

<div>

<script src="vue.js"></script>  引入vue

<script>

new Vue{(

       el:".dc",   选择器 el的意思就是element

       data:{

           msg:"hellow world"

   }

)}

循环数组对象

v-for 循环可以遍历值和下标

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for=“(value,index) in 对象名”

双向数据

v-model=“”

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听元素的点击事件：

语法：V-on:click=“事件回调函数的名称”

定义事件的回调函数，在vue的实例化对象的methods属性中定义

Methods他的值是一个对象

对象是属性名称表示事件的回调函数名称

对象的属性值是一个函数，就是事件的回调函数

他的this指向的是vue实例化对象，因此通过它我们可以获取或者设置vue实例化对象上属性

它默认有个参数是事件对象，这个事件对象可以访问该事件的相关信息$event传递参数可以访问到事件对象

当我们在使用事件时候，可以传递一些参数，此时在vue的事件回调函数中它的参数与事件使用时候传入的参数是一致的

下面是一个点击事件

绑定事件 v-on:事件名=“函数(方法)”

简写@:事件名="函数(方法)"

<button v-on:click="alt"></button>{

                  alert(vm.msg)   vm变量