Vuejs是个数据驱动的组件化框架
能大大提高开发效率,维护性
怎么入门
带着问题来学习
0 基本逻辑
1 组件怎么写,怎么注册,怎么使用
2 组件怎么获取数据,渲染数据,监听数据的变化
3 组件的事件怎么写
引入
<script src="https://unpkg.com/vue"></script>
基本逻辑
渲染数据
el 可以理解获得dom节点
data Vue 实例的数据对象
双花括号 输出数据
用过JQuery的朋友一定觉得比JQuery好用,这么轻易就输出数据了
html
<div id="app">
{{ message }}
</div>
js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
条件语句
v-*一般都是vue指令
v-if是条件判断,这个语句是说如果seen属性值为真的话,这个p的dom节点就显示,否则隐藏
html
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
js
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
循环语句(常用于列表数据输出)
html
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
js
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})