Vue学习笔记（一）

一、声明式渲染

声明式的将数据渲染进入DOM，通过名称app将VUe实例和div绑定起来，div中的message值跟随Vue实例中的数据message动态变化：即 Vue 控制 Dom

html:
<div id="app">
{{message}}
</div>

javascript:
var app=new Vue({
el:'#app',
data:{message:'Hello World!'}
})

测试：进入控制台，修改message的值，页面中显示的message也随之变化

二、条件与循环

1、v-if条件控制

语法：v-if={true|false}，在vue实例中给v-if后面的boolean变量赋值。这意味着Vue不仅可以动态绑定Dom的数值和特性，也可以动态的绑定结构。

html：
<div id=""app">
    <p v-if="seen">
    {{message}}
    </p>
</div> 

javascript:
var app=new Vue({
el:'#app',
    data:{
    message:'Hello World!',
    seen:true
    }
})

2、v-for循环

语法：v-for="todo in todos" 其中todo为Dom中对数组元素进行操作替代符号，todos为Vue实例中的数组数据。类似java代码中的加强for循环foreach(todo in todos)

html：
<div id=""app" >
    <ol>
    <li v-for="todo in messages">
      {{ todo.text }}
    </li>
  </ol>
</div> 

javascript:
var app=new Vue({
el:'#app',
    data:{
    messages:[
    {text:'Hello World!'},
    {text:'Hello China!'}
    ]   }
})


--当messages添加数据之后，Dom也会响应添加
app.messages.push({ text: '新文字' })

由于js的限制，Vue中的数据用以下方式变动时，Dom不能检测：
1、用数组下标直接赋值： app.messages[1]=newValue
2、修改数组的长度：app.messages.length=newLength
可以改用以下方式对数据进行改动：
Vue.set(vm.items,indesofItem,newValue)和vm.set(app.message,1,{text:'new Hello World'})

三、监听事件

1、点击事件 v-on:click

语法：v-on:click="changeMessage()" v-on可以简写成@，即：@:click
被点击时调用changeMessage()方法，该方法写在vue的methods中

javascript:
var app=new Vue({
el:'#app',
data:{
    messages:[
    {text:'Hello World!'},
    {text:'Hello China!'}
    ]
    },
methods:{
    changeMessage:function(){
        alert("点击事件")
        }
    }
})

类似于以前html代码中的onClick="changeMEssage()"，和javascript中的changeMEssage()方法

2、按键修饰符

1.@keyup.enter=“submit()” 回车
2.@keyup.tab=“submit()” Tab键
同理：
delete：退格和删除
esc：退格
backspace：删除
space；空格
up：上
down：下
left：左
right：右