1、在html文件中，声明了template对象，那么在 data对象中的v-html和v-text的绑定数据是不起作用的
2、v-的几个常用绑定
v-html和v-text：引用的content没有{{}}，v-html能解析标签，v-text不能，这是他们之间的区别，其中v-text的作用和{{}}的作用是一样的，
只是写法不一样，v-html能解析html标签，而v-text和{{}}则都不能。
//html端
<div v-html=‘content‘></div>
//js端
data:{
content:"<h1>我是内容</h1>",
}
注：这三个模板标签，都可以写js代码，下面输出为：name的值后面跟上Lee
监听事件指令 v-on :其中v-on可以简写为@
//html 端
<div v-on:click="clickMe">单击</div>
//js端
methods：{
clickMe:function(){
alert(11)
}
}
3、组件的使用：
注册全局组件：
在new Vue对象之前，创建一个组件
注意点：
(1)、Vue.component是注册全局组件，TodoItem是组件名称，对应在模板中，对于中间大写的I需要用横线隔开。
(2)、list是app中收到的数据，要想组件中获取，在v层的组件使用的内部需要用一个v-bind：接收到数据，然后在注册的组件中用props接收。
注册局部组件：
注意点：
(1)、在实例对象之前，声明一个对象，这个对象和全局注册组件是一样的
(2)、需要在实例中用components实例化这个组件,注意有 s
(3)、在v层引用也是和全局组件一样的
4、父子组件之间的传值
父组件向子组件传值：
首先，在子组件中需要有一个接收父组件的变量，即v-bind:content。子组件接收到父组件的值，在组件内部需要用props接收，其中content是值，index是键.
子组件向父组件传值：
在子组件中，通过$emit() 向外传值，如下，在template中添加一个点击事件handleItemClick，当点击时，触发子组件的handleItemClick方法，该方法调用$emit()方法，将index传递给父组件。但父组件怎么知道子组件发送数据了呢，通过delete这个监听事件，当父组件监听到该事件触发，父组件调用handleItemDelete方法，在handleItemDelete方法中接收子组件传过来的值。
父子组件单向数据流：父组件可以给子组件传递任何的数据，但是子组件不能修改父组件传过来的值，只能接收
如上图：对于父组件传过来的count值，父组件可以任意传输，但是作为子组件，只能接收，而不能做修改，如this.count++， 这样程序会报错，子组件只能使用一个变量对父组件的传过来的值进行接收然后进行后续的操作，如上图的定义了一个number
5、计算属性和监听器
这里有个这样的需求，firstName和lastname需要合并，然后在V层进行渲染显示
合并之后的效果是这样的：
如果是是用methods方式的话
在v层应该是如下调用：
这样写完全能达到效果，但是不管firstName和lastName有没有发生变化，页面都会进行一个刷新，对于性能来讲是有所损耗的。
监听属性：用来监听实例上面的数据变化
上面的代码监听firstName和lastName变化,当初始化的时候，fullname是不会进入监听器的，因为firstName和lastname都没发生变化，监听器没有监听到变化，那么渲染的页面是有缓存的，不会对页面重新的渲染。
计算属性：
与监听属性类似，第一次会渲染页面，之后，如果firstName和lastName不发生变化的时候，页面的这个部分不会重新刷新渲染，因为有缓存机制。但是相对于监听属性来说，计算属性相对来说简单很多，代码的复杂程度小很多。
计算属性有set和get方法，这两个方法一个是当设置的时候调用，一个是获取的时候调用。
其中，set方法接收外部传来的参数value,vue如果不指定get和set 默认是有get方法，并且省略，set方法需要设置
7、 v-if和v-show区别
v-if和v-show都是显示和隐藏模板标签，而v-if是控制模板标签存在不存在，而v-show是控制不会删除dom，只是把display置为none，标签是存在的。v-show的性能更高，v-if因为每次都需要删除新增，性能更低。
这里有个知识点：在input框中，vue对于切换的两个input框会有默认复用机制，什么意思呢，请看下面例子：
现在有这么个功能，当show为false的时候，显示用户名和一个输入框，当show为true的时候，显示邮箱和input框。
但是，当在控制台改变show的值为true时，变变成了用户名和input框，这个input框还是原来的配方，还是原来的味道，并没有随着show值得改变而改变。
这是什么原因呢，这就是vue的input框的复用机制，当重新渲染页面时，会尽量去复用页面上已经存在的dom，那么为了解决这个问题，可以在input中加入一个key值，vue就知道两个input框是不一样的，这样就OK了,然而，在实际项目中，默认的index不能作为key值的，为什么呢，因为index也是要被复用的啦，那咋办呢，在实际生产过程中，返回的数据，一般会返回一个唯一标识的值，一般是id，这就可以把id作为key值，因为这个key是需要根据不同的值来动态绑定的，所以正确的写法是： ：key = item.id
8、template模板占位符：能起到div的作用，但是不会渲染到页面上
9、数组操作的方法（变异方法）：push、pop、shift、unshift、splice、sort、reverse（好好查查看看）
10、Vue改变数组对象的方法（双向反应，对象两种，引用和set方法，数组是三种，加上上面的变异方法）：在vue中，如果直接操作数组，能够改变数组，但是不能使之双向变化，也就是数组变化之后，页面也跟着变化。但是，直接操作数组和变量是不会改变的。
在userInfo数组中改变了下标为1的值，确实这个数组发生了改变，但是对应的页面却没有发生变化。怎么做才会有变化呢？这里有三种方法：
第一种就是上面说的使用变异方法，
第二种是引用，也就是说把数组对应的地址改变，指向另外一个地址
第三种方法就是set，set是一个全局方法，如果是全局使用则是Vue.set()，如果是实例使用，那么是实例.$set，如 app.$set()
11、is属性，就是比如在table 下使用子组件，子组件包含tr等标签，但是在引用子组件的时候，table内直接使用组件名称，会导致引用不成功，这时候就要指定子组件的名称，其他的类似有select、ul下面的有li 、ol等
12、在子组件中定义data的时候，data必须是一个函数，返回的是一个对象
13、ref：获取某一个dom节点的数据，或者一个组件的引用
vue一般不建议在页面中直接操作dom，但是在某些特殊情况下必须要操作dom，vue提供了ref引用。
有如下的需求，需要点击div的时候，获取div中的数据
如上，点击div，在handleClick中通过$refs(代表所有的ref引用，注意是所有refs，有s).节点引用的名称.所有的文档
原文：https://www.cnblogs.com/dgxblogs/p/10613017.html