vue的安装和使用。
vue是一套用于构建用户界面的渐进式框架。
我们先来看一个简单的vue实例
写之前记得引用<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{message}}<br>
<span v-bind:title="message1">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span><br>
<p v-if="seen">现在你看到我了</p> <br>
<ul>
<li v-for="todo in todos">{{ todo.text }}</li>
</ul> <br>
<p>{{ message2 }}</p>
<button v-on:click="reverseMessage">反转消息</button> <br>
<p>{{ message3 }}</p>
<input v-model="message3">
</div>
<script type="text/javascript">
let app = new Vue({
el: '#app', //参数的节点
data: { // 数据
message: 'Hello Vue!',
message1: '页面加载于 ' + new Date().toLocaleString(),
seen: false,
message2: 'Hello Vue.js!',
message3:"",
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
},
methods: {
reverseMessage: function () {
this.message2 = this.message2.split('').reverse().join('')
}
}
})
</script>
这是一个简单的vue实例。
到这里我们应该可以简单的了解下vue的写法
el后面跟的是元素的名称，data后面跟的是数据，methods后面跟的是方法，通过鼠标事件或者键盘事件来触发，可以缩写成 methods: {
reverseMessage() {
this.message2 = this.message2.split('').reverse().join('')
}
}
