请问vuejs里的v-model 和:model有什么区别？

JavaScript028

请问vuejs里的v-model 和:model有什么区别？,第1张

1.

v-model是内置的数据双向绑定:

2.

model是绑定自定义属性model

，model相当于

v-bind:model

1.

Vue.js（读音

/vjuː/,

类似于

view）是一个构建数据驱动的

web

界面的渐进式框架。Vue.js

的目标是通过尽可能简单的

API

实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

2.

另一方面，当与单文件组件和

Vue

生态系统支持的库结合使用时，Vue

也完全能够为复杂的单页应用程序提供驱动。

第一步，创建静态页面vtext.html，修改title显示的内容并引入vue.js，如下图所示：

第二步，在body标签元素内插入两个span元素，在第一个span绑定v-text指令，第二个span中插入{{message}}，如下图所示：

第三步，编写JS代码，绑定数据源message，如下图所示：

第四步，预览静态页面vtext.html，发现{{message}}还是一样，未变成赋的值，如下图所示：

第五步，在两个span外层添加一个div，并将第一个span的id赋给div，再在第一个span标签上绑定v-model，如下图所示：

第六步，再次预览发现页面中的{{message}}变为绑定的数据源，如下图所示：

vue1.*版本中

在标签中加上el='dom'，然后在代码中this.$els.dom这样就拿到了页面元素

vue2.*版本中

在标签上加上ref=dom'，然后在代码中this.$refs.dom.$el这样就拿到了页面元素