Vue基础之一

时间 2019-11-17

标签 vue 基础之一繁體版

原文原文链接

注意：用到的须要引入<script src="https://unpkg.com/vue"></script>vue

1.声明式渲染：采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统数组

示例：给文本插值app

<body>
<div id="app">
{{ message }}
</div>学习

2.使用指令：指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。code

v-bind：在本例子的做用：将这个元素节点的 title 属性和 Vue 实例的message 属性保持一致”事件

示例：ip

<body>
<div id="app2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>数学

var app = new Vue({
el: '#app2',
data: {
message: '此功能添加于'++ new Date().toLocaleString()
}
})

app2.message = '新消息';
</script>
</body>

v-for 指令能够绑定数组的数据来渲染一个项目列表

示例：

var app3 = new Vue({
el: '#app3',
data: {
datas: [
{ text: '学习语文' },
{ text: '学习数学' },
{ text: '学习英语' }
]
}
})
</script>
</body>

v-on 指令绑定一个事件监听器，经过它调用咱们 Vue 实例中定义的方法

示例：

<body>
<div id="app4">
<p>{{message}}</p>

var app4 = new Vue({
el: '#app4',
data: {
"message":'hello world!';
},

method:{

"showinfo":function () {

this.message='展示信息';

}

} }) </script> </body>