首页 > 代码库 > 第一章 初识Vue
第一章 初识Vue
一 前提
引入vue.js:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
二 数据渲染方式
- {{}}
- v-bind
1 {{}}
可以通过这种简洁的模板语法来声明式的将数据渲染进 DOM：
<div id="app">{{msg}}</div>
var app = new Vue({
el:‘#app‘,
data: {
msg:‘resume vue‘
}
})
2 v-bind
v-bind称为指令，主要用于绑定DOM元素属性，指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。以下是v-bind的应用：
<div id="app2">
<span v-bind:title="msg">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el:‘#app2‘,
data: {
msg:‘页面加载于 ‘ + new Date()
}
})
三 条件与循环
v-if、v-for分别用于条件与循环。
1 v-if
<div id="app-3">
<p v-if="seen">你现在可以看到我了</p>
</div>
var app3 = new Vue({
el: ‘#app-3‘,
data: {
seen: false
}
})
此时当我们在浏览器console里输入app-3.seen=true，就可以发现在页面上的“你现在可以看到我了”
2 v-for
<div id="app4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
var app4 = new Vue({
el : "#app4",
data : {
todos:[
{text : ‘javascript‘},
{text : ‘vue‘},
{text : ‘angular‘},
{text : ‘react‘}
]
}
})
第一章 初识Vue
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。