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

JavaScript020

请问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这样就拿到了页面元素