【良心推荐】不能错过的Vue开发学习路线 - 知乎 (zhihu.com)
一、杂七杂八的内容
1.1 框架的对比
Vue:更注重使用的便捷性,渐进式编程
React:强调代码的灵活性
Angular:注重包容性
1.2 DOM——文档对象模型
DOM将文档表示为节点和对象,这样,编程语言就可以与页面交互。
1.3 attribute和property的区别
attribute是HTML标签上的特性,它的值只能是字符串
property是DOM元素中的属性,是JavaScript里的对象
二、Vue实例、模板、挂载点之间的关系
挂载点el:需要操作的元素,可根据id去定位
模板template:挂载点内部的内容
Vue实例:只会处理挂载点下的内容
一个Vue应用会被挂载到一个DOM元素,然后对其进行响应式的完全控制
<body>
<div id="app"></div>
<script type="text/javascript">
new Vue({
el:"#app",
template:'<h1>你好,{{msg}}</h1>',
data:{
msg:"hello vue!"
}
})
</script>
</body>
三、语法
3.1插值
用双大括号{{}}
<span>Title:{{title}}</span>
3.2 指令
v-bind
将这个元素节点的某个attribute与Vue实例的某个property保持一致
1.3 attribute和property的区别
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒种查看此处动态绑定的提示信息
</span>
</div>
<script type="text/javascript">
new Vue({
el:"#app-2",
data:{
message:"页面加载于"+new Date().toLocaleString()
}
})
</script>