cdn方式的引入vue怎么使用v-model,和ref属性
时间: 2024-02-28 13:52:23 浏览: 18
使用CDN方式引入Vue后,你可以像平常一样使用 v-model 和 ref 属性。v-model 可以用于双向绑定表单元素和数据,ref 属性可以用于在组件或元素上标记一个引用ID,以便在 JavaScript 代码中访问该组件或元素。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<button @click="showMessage">Show Message</button>
<br>
<p ref="message">{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
showMessage: function() {
console.log(this.$refs.message.innerText);
}
}
});
</script>
</body>
</html>
```
在上面的例子中,我们定义了一个 Vue 实例,并将其挂载到 id 为 app 的 div 元素上。在 data 中定义了一个名为 message 的属性,它将在 input 元素中使用 v-model 双向绑定。在 button 元素上使用 @click 监听事件,当用户单击按钮时,执行 showMessage 方法。在 p 元素上使用 ref 属性标记了一个引用ID为 message,以便在 JavaScript 代码中访问该元素。当用户单击按钮时,showMessage 方法将显示 p 元素中的文本内容。