Vue学习 （一）跟着官方文档入门

DOM元素的控制

• 直接控制
  在vue之前，原生js通过document对象控制html元素，像jQuery简化了这个操作，但是不管怎样都是一回事：使用某个选择器通过id、class来从DOM树中选择想要操作的元素，再进行页面上的更改。

• 间接控制
  而vue的做法是，将页面元素和变量绑定在一起，页面就会随着变量的变化而变化.这个绑定的动作在vue里的用词是挂载。(这里的变量实际上应该是vue对象，但是说变量更加直观一点)

例子

官方第一个例子给了一个基本的挂载模板，将id为“app”的html元素绑定到了app这个vue对象上。el类似于选择器的作用，data就是可以用来操作的数据了。

那么现在目标框内的内容显示的是Hello Vue!，现在直接通过浏览器控制台改变要怎么做呢？

• 按传统方法，应该通过document对象获取id为’app’的元素，然后innerText来更新:
  
  页面就会发生变化
  
• 而按照vue的方法，此时js里面已经有一个变量app
  
  可以看到这个app是一个Vue对象，它挂载在id为’app’的元素上，在id为’app’的<div>标签里的内容跟随了了app对象里的成员变量message。所以直接修改变量app的message元素就可以更改’app’div里面的文本内容：
  
  有意思的是，修改失败了。说明操作document之后破坏了vue的挂载关系，那么刷新一下页面，再试试看。
  
  这样就是成功的。

渲染方式

先厘清一下概念

• 绑定
  首先，vue对象和DOM元素建立联系的过程叫做的绑定。
  vue实例(对象)中el属性:代表Vue的作用范围 ，在Vue的作用范围内就可以使用Vue的语法。el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器 （注意: el属性值不能指定body或html标签
  
  vue对象的data部分和绑定无关，因为这要用另一术语来描述：数据渲染。
• 渲染
  渲染就是页面上的数据展示，在这里就是用app对象的数据（data）控制页面元素’app’的展示内容,这里用的是双层花括号的方法，将app对象的数据成员message放到了’app’元素的文本展示区。

对于上面的例子来说，是vue对象单向挂载到了’app’元素上，因为通过document改变’app’的内容不会影响到app的message值。

数据渲染的指令

如 v-bind attribute 这样的语句被称为指令。
指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以取出操作，这个过程有下面几种指令：

1. v-text
   通过{{变量名}}在Vue作用范围内取出数据，可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等。这种双重花括号的绑定方式，是v-text的简化版本。

   v-text的一般使用是这样：

    <div v-text="msg"></div >
   

   v-text的作用类似于原生js中的innerText，是单向绑定，即数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

2. v-html
   v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

   <div id="app">
       <p v-html="html"></p>
   </div>
   

   let app = new Vue({
           el: "#app",
           data: {
               html: "<b style='color:red'>v-html</b>"
           }
       });
   

3. v-model

   v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。

   <div id="app">
     <input v-model="message " />
   </div>
   var app = new Vue({
      el : '#app',
      data : {
       message : 'hello world'    
    }
   })
   

4. v-bind
   官网对该指令的解释是“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”
   意思其实就是，用v-bind可以将data中的数据和元素中的属性绑定在一起。
   
   这里就是将message绑定到了span标签的’title’元素。

---

弄清楚挂载和数据渲染的概念之后，v-for、v-if等都只是数据渲染的不同姿势而已，需要的时候参照一下官网的例子即可。下一个值得关注的知识点是组件。

组件

概念

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

官方一句话这样定义组件，说白了就是自定义的一个html标签.

例子

template配置的内容就是自定义标签里的内容。

数据传递

prop

对于上面的组件构建，文档里说：

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。

这句话的意思是说，单单按上面的方法构建组件还不够，因为这样创建一个组件在每个用到这个组件的地方都是同样的数据，得搞一个操作，让每个组件使用的时候可以传入不同的数据。

所以给出了组件定义的改良：

其实就是多了一个prop的配置，关于prop，官方解释为：

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

通俗来讲，就是可以给自定义的html标签配上参数，就像"<div id=‘xxx’ class=‘xxx’ />"里的id、class这种参数一样。组件上配置了props里有哪些参数，使用对应标签时就可以带上这些参数。
对于上面这个组件来说，template里面使用了title这个参数传入的数据，用h3的标题格式来展示。
使用：

prop与data结合：

就是通过v-for、v-bind的操作将data里的数据赋给组件定义的参数（‘todo’）

---

好了，弄明白个大略，剩下的细节慢慢细究