Vue.js（v-text,v-html等一些基础操作）

v-text

根据官网的解释，v-text更新了元素的textContent，v-text 约等于插值

  
        捏捏捏

如果在中间添加内容，发现浏览器无显示。说明v-text权重高于插值。

v-html

更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

同样不会显示文字，与v-text不同的是，v-html可以解析标签；如果此处使用v-text 会显示span

v-bind(:)

用法：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
（v-bind的用处比较广泛，详情建议看一下官网的文档或者直接百度相关内容）

同理可绑定其他属性

官网例子就不敲了

v-show和v-if

v-show的原理 ----》jq里的 hide() display：none
v-if的原理---》jq里的 remove() DOM是否加载

代码很简单，循环空数组，通过input中的value Enter动态加入内容


      
        可见的v-show

      {{item.message}}

在中间加段内容，那么v-show与v-if一样都是通过布尔值判定，初始化arr为空所以此时为true

当输出内容回车之后，此时arr.length存在，则v-show此时是false

消失的同时可以看到下方DOM是有display：none的样式的，同理换成v-if，则是没有DOM
v-for与v-on前面讲了许多就不重复了

data

关于data，很多人的第一印象就是，这个东西很简单，不就是把数据写到data里，就可以用双括号绑定数据了吗？

官方文档：

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

以 _或 $开头的属性不会被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

export default {
  name: 'App',
  data(){
    return {
     name:'vue'
    }
  },
  mounted(){  //不懂这个无所谓
    console.log(this.$data)
  }

}

Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化，所以数据是通过get和set方法进行数据绑定的。

把name改成$name or _name，控制台可以输出值，但无法渲染到dom上，还会报错

  mounted(){
    console.log(this.$data.$name)
  }

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。（不多说，可以自己打印一下this自己看看）