vue.js介绍（笔记）

声明式渲染

文本插值

  <div id="app">
    {{msg}}
  </div>

 var app=new Vue({
    el:'#app',
    data:{
      msg:'Hello'
    }
  })

v-bind 指令

注：v-bind：title 将这个元素节点的title特性和Vue实例的msg属性保持一致,title显示的值就是msg的属性值

<div id="app-2">  
<span v-bind:title="message">  
鼠标悬停几秒钟查看此处动态绑定的提示信息！  
</span>  
</div>

var app2 = new Vue({  
el: '#app-2',  
data: {  
message: '页面加载于 ' + new Date().toLocaleString()  
}  
})

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。

在没有指定区域的基本使用时，返回使用默认的语言环境和默认选项格式化的字符串。

条件与循环

v-if

<div id="app-3">  
<p v-if="seen">现在你看到我了</p>  
</div>

var app3 = new Vue({  
el: '#app-3',  
data: {  
seen: true  
}  
})

v-for

<div id="app-4">  
// 有序列表
<ol>  
<li v-for="todo in todos">  
{{ todo.text }}  
</li>  
</ol>  
</div>

var app4 = new Vue({  
el: '#app-4',  
data: {  
todos: [  
{ text: 'Vue' },  
{ text: 'React' },  
{ text: 'Angular' }  
]  
}  
})

处理用户输入

v-on

<div id="app-5">  
<p>{{ msg }}</p>  
<button v-on:click="reverseMsg">反转消息</button>  
</div>

var app5 = new Vue({  
el: '#app-5',  
data: {  
msg: 'Hello'  
},  
methods: {  
reverseMsg: function () {  
// 先变成数组--翻转数组--转化为字符串
this.msg = this.msg.split('').reverse().join('')  
}  
}  
})

v-model

实现表单输入和应用状态之间的双向绑定

<div id="app-6">  
<p>{{ msg }}</p>  
<input v-model="msg">  
</div>

var app6 = new Vue({  
el: '#app-6',  
data: {  
msg: 'Hello'  
}  
})

组件化应用创建

在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例

注册组件

// 定义名为 todo-item 的新组件  
Vue.component('todo-item', {  
props: ['todo'],
template: '<li>{{todo.text}}</li>'  
})  
  
var app7 = new Vue({  
el: '#app-7',  
data: {  
     list: [  
     { id: 0, text: 'VUE' },  
     { id: 1, text: 'REACT' },  
     { id: 2, text: 'ANGULAR' }  
     ]  
}  
})

构建另一个组件模版

<ol>  
<!-- 创建一个 todo-item 组件的实例 -->  
<todo-item>
  v-for="item in List"  
  v-bind:todo="item"  
  v-bind:key="item.id"
</todo-item>  
</ol>