Vue.js学习笔记-声明式渲染

假期闲来无事,本来想学一下操作系统和计算机网络,奈何理论性太强,假期懒散学不下去,就跟着官方文档和一些学习资料学期了Vue.js

代码和大部分内容为原创,学习路线为"千峰教育"王老师提供的学习笔记,在此表示感谢!

同时希望我的学习笔记能够便于大家理解.

两个重要组成部分

• 视图
• 脚本

声明式渲染

引入

<script type="text/javascript" src="js/vue.js"></script>

页面中绑定vue元素

<div id="app">
    {{ message }}
    {{ name }}
    {{ a }}
</div>

JS中创建Vue对象,设计对象内容

第一种绑定的方式

var app = new Vue({
    el: '#app', // 绑定ID
    data: {
        message: 'Hello Vue!',
        name : "小智"
    },
    data:data
})

第二种绑定的方式

<div id="app2">
    {{ b }}
</div>

//第二种给属性赋值
var data = { b : 3 }
var app = new Vue({
    el: '#app2', // 绑定ID
    data:data
})
data.b = "Hello Vue.jsjsjsjsjs"//赋新的值

响应式的方式,可以直接通过修改data的b属性的值,达到和修改app(Vue对象)的属性b的值一样的效果

第三种绑定的方式

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

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

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

Vue应用

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档中浏览完整的选项列表。

通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

el: element的简称，也就是Vue实例挂载的元素节点，值可以是CSS选择符，或实际HTML元素，或返回HTML元素的函数。

其他知识点陆续上传中,敬请期待…