了解Vue和jq之间的关系，vue常用属性、vue常用指令

了解Vue.js和jQuery之间的关系

1、Vue 的官方是不建议直接操作 DOM 的，Vue 的用途在于视图和数据的绑定。如果通过JQuery 直接操作 DOM 的话，势必会造成视图数据和模型数据的不匹配，这样 Vue 就失去它存在的意义了；
2、JQuery 和 VueJS 合理使用并不会造成冲突，因为他们的侧重点不同，VueJS 侧重数据绑定和视图组件，JQuery 侧重异步请求和动画效果。如果使用JQuery + VueJS 开发，一定要在 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理，而使用 JQuery 时应避免直接操作 DOM ，但是应用动画是允许的；
3、JQuery 与 VueJS 相互配合可以非常高效的完成异步任务，首先通过 JQuery 发出 Ajax 请求，接受到服务端传递的 JSON 数据后，再通过 Vue 将数据绑定到组件上，最后由 JQuery 进行动画处理，整个过程就如行云流水般自然；
4、说句题外话，Vue 的目的不是取代 JQuery，它是为了解决前后端分离而出现的。如果没有数据变化，只是单纯的样式变化，则没有必要去大费周章进行视图模型的绑定，并且还不利于 SEO 优化。

常用属性

1. el属性
   用来指示vue编译器从什么地方开始解析 vue的语法，也叫占位符。
   要定义一个容器，el属性里要知道哪里要用vue，vue才能渲染。

2. data属性
   用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。要return出来。

3. methods
   放置页面中的一些逻辑，js方法一般都放置在methods中。

4. mounted()
   dom初始化完成。

5. computed
   计算属性 ，基于目前存在的数据，生成新的数据

6. filters
   过滤器，基于目前的数据，过滤生成新的数据

7. watch

   监听器，监听数据变化，进行操作数据（比如进行拦截）

8. created
   初始化data，如ajax操作

9. mounted
   初始化DOM，如加载echarts

computed和mounted的区别：computed计算时只计算一次，后面要用到时不需重复计算，而mounted则与之相反

常用指令

1. v-model 表单固定写法 数据双向绑定

2. v-html 解析html

3. v-bind给属性绑定值（也可以用冒号简写）
   :class=‘{ }’ class绑定

4. v-on:click 或 @click 事件绑定

5. v-show =‘true’ 显示(true) 隐藏(false) 显示隐藏标签都存在

6. v-if =‘true’ 显示(true) 隐藏(false) 显示标签存在，隐藏标签删除了

7. v-cloak 页面加前（这个属性）有，加载完成就没了，用于加载页面出现的{{xxx}}

   例：

[v-cloak] {
            display: none;
        }

 <div id="app" v-cloak>
    </div>