-
Vue2学习笔记(尚硅谷天禹老师)
目录
一、入门案例
Vue可以看作是一个数据管理大师，其目的通常是将其管理的数据展示到HTML页面上，或者收集HTML页面上的数据进行储存在自身或者传递给服务器。
Vue管理的数据大致可以分为：Ⅰ，对象数据：对象里面包含一些基本数据类型和嵌套着一些其他对象。Ⅱ，数组；Ⅲ，函数。我们需要了解Vue是如何管理对象、数组、函数这3种数据类型，包括：如何响应式这些数据、如何代理这些数据等。
下面的代码是一个入门案例。首先引入vue.js的完整版，引入vue.js之后，在window上就多出了一个Vue构造函数对象，使用new Vue()就可以创建一个Vue实例对象vm，在创建vm的时候，需要把希望给vm管理的数据通过data配置项交给vm，把希望给vm管理的函数通过methods配置项交给vm。
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>初识vuetitle>
- <script src="../js/vue.js">script>
- head>
- <body>
- <div id="root">
- <h1>Hello！{{name}}!h1>
- div>
- <script>
- Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
- new Vue({
- el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
- data:{ //data用于存储数据，数据共el所指定的容器去使用
- name:'么么哒'
- }
- })
- script>
- body>
- html>
vm实例在得到数据之后，首先会进行一系列的加工，然后把数据放到HTML页面上。所有需要告诉vm把数据放到哪个DOM节点。使用el配置项或者vm.$mount()就可以指定vm管理哪一个DOM节点(通常是div节点)。可以将一个字符串选择器或者一个DOM节点原始js对象交给el和$mount，例如：el:"#root"或者el:document.getElementByID("#root")。
在得到管理的模板之后，就可以将数据展示到模板当中了。使用模板语法中的插值语法将管理的数据name使用{{name}}展示到模板页面当中。{{}}里面必须是js表达式，这样才能够使用eval()函数进行运行识别，同时，{{}}里面可以直接使用vm管理的数据。
二、模板语法
1.插值语法：使用双大括号{{}}可以在模板中插入变量或表达式的值。例如：{{name}}。
2.指令语法：Vue 提供了一些指令，例如v-for、v-bind等。
他们的共同点就是：{{js表达式}}或者v-bind="js表达式"，作用就是将vm管理的数据呈现到HTML模板页面上。js表达式除了原始js表达式之外，还可以写vm自身管理的数据。
什么是js表达式？答案：执行之后能够得到具体值的语句。试想一下vm需要将数据展示到HTML页面当中，如果你不通过函数return数据、或者表达式计算出数据来，vm拿什么放到页面上面呢？当然undefined不会被vm放入到页面当中。
三、数据绑定
数据绑定的本质就是：1，vm将数据放到页面，称为单向绑定；2，一些表单节点可以采集数据，vm可以对他们进行收集，也可以把他们放到页面，称为双向绑定。思考：是否需要接触到DOM节点对象本身才能拿到这些数据呢？
因为存在表单类DOM节点，Vue不得已设计了两个指令来处理数据的绑定，对于表单类节点，例如、
