Vue.js 极简教程

JavaScript012

Vue.js 极简教程,第1张

https://unpkg.com/vue@2.5.3/dist/vue.js

来，直接开始：

创建一个 .html 文件，然后通过如下方式引入 Vue：

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Vue.js 文档： https://cn.vuejs.org/v2/guide/

https://www.w3cplus.com/blog/vue

Vue 以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

看Vue.js文档中的ref部分，自己总结了下ref的使用方法以便后面查阅。

HTML 部分

js部分

HTML部分

JS部分

HTML部分

JS部分

HTML部分

JS部分

1、如果通过v-for 遍历想加不同的ref时记得加 : 号，即 :ref =某变量

这点和其他属性一样，如果是固定值就不需要加 : 号，如果是变量记得加 : 号

2、通过 :ref =某变量 添加ref（即加了 : 号） ,如果想获取该ref时需要加 [0] ，如 this.$refs[refsArrayItem] [0] ；如果不是 :ref =某变量 的方式而是 ref =某字符串 时则不需要加，如 this.$refs[refsArrayItem]

3、想在element ui 对话框打开后取dom时，应该使用 $nextTick ，而不是直接使用 this.$refs. imgLocal2 ：

要引入vue.js，可在script标签的script标签中添加文件。根据查询相关公开资料得知创建一个html文件，在该文档中使用script标签引入vue.js文件，这样就用不到node，也就不需要安装。vue需要nodejs环境，vue是一个js，但是安装它却有点与众不同。安装vue一般是通过npm进行安装，node.js中包括了这个npm，所以安装完node.js就可以使用npm了。