vue基础复习

vue实例

我们可以将data域写在外面，然后将他再放入vue实例上，但如果你将data域 写在vue实例下面，此时vue实例已经加载完毕了，所以就不会管用，会报错。不过和也是多此一举，没什么用。
使用 Object.freeze(data)，只会渲染一次，就不会改变了，感觉和用v-once一样。
最主要的是使用vue实例里面的值，是这样使用的：

    <script type="text/javascript">
      var data = { message: 444 }

      var app = new Vue({
        el: '#app',
        data: data
      })
      console.log(app.$data === data)
      console.log(app.$data.message === data.message)
      console.log(app.message === data.message)
    </script>

ps：三个等号和两个等号的区别
NaN类型
然后就是生命周期钩子函数，还有就是关于页面的渲染问题，是用template还是用render函数还是用outer html。

vue模板语法

就是绑定值，绑定html文本，绑定属性，或者在大胡子花括号里用js表达式都行。
除了正常指令外，还可以指令还可以动态绑定，也就是v-on:[data数据]，data数据是我们自己想传进去的想绑定的属性。有点特别需要注意的地方，就是这个data
数据一定要有，要不就会报错，还有就是大小写的问题。
还有就是缩写和简写的小问题。
计算属性
计算属性可以动态的的改变一些数据然后显示到网页上，他和方法还是有些不同的，而且和watch也有些不同，不过这个不同还需要我去感受。计算属性也可以setter，也就是说返向修改，只要是你想。
侦听属性，我还没怎么用过——当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。也就是可以异步axios。

class与style的绑定

用v-bind绑定class，绑定style。

条件渲染

哇，原来有v-else-if。
然后就是用key管理复用的元素，也就是说，vue自动智能复用，你不想复用，就给他一个key值。
数组的更新很重要，vue监听数组的更新，也就是小胖说的编程，会触发视图的更新：下面的方法。push、pop、shift、unshift、reverse、sort、splice。
下面方法不会触发视图更新，也就是说不会对原来的数组进行修改。
filter()可以按照你传入的条件函数进行过滤
concat() 方法用于连接两个或多个数组。
slice() 方法可从已有的数组中返回选定的元素。arrayObject.slice(start,end)。
match()方法，据说match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
（但是我不会用）只知道字符串使用这个方法，不知道它的返回值是什么，是一个查找函数，可这样写this.StringName.match(/a/)。就是查找a的位置。
给数组的其中一个元素赋值和改变数组的长度是不能响应的，我们可以用其他方式代替。具体方式不写了。适用set和splice方法。
还可以添加对象，最开始的时候说vue实例化后，就监听不到新创建的data元素了，现在也可以了。
在组件上使用v-for，必须要有key值，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。所以说，我们要使用props。
我试验了在外面遍历，但无法给组件传入数组在组件内遍历，有可能是props问题。

v-on

v-on就是绑定事件，包括js和方法，就可以用事件修饰符。
还可以绑定按键。
还有系统修饰符，也就是说只有这些修饰符摁下去的时候才会执行其他按钮的事件，也可以用exact进行精确地控制。
系统修饰符必须写在按键修饰符前面才有效果，否则都没效果.
exact修饰符没有位置要求。

v-model

刚学完，没什么特别的点

然后最后就是组件基础了，看一看，然后就可以了。

组件可以复用
组件可以往里面传值
组件只能有一个根元素
组件的data必须设为函数
使用方法，抛出值
至于绑定v-model，也是个死套路。
但是现在思考关于方法，关于绑定方法有什么用，现在啥用没有，只能说在组件里面写方法，可以影响到外面。
顺便可以抛出值。就是这样了。
还有就是slot插槽

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
  <tr is="blog-post-row"></tr>
</table>

（ps：也就是说，现在is就有了两个功能了，应该就这两个）
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">