Vue前端学习

96 阅读1分钟

【良心推荐】不能错过的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>