Vue is a progressive framework for building user interfaces
At the heart of Vue.js is a system that allows declarative rendering of data into the DOM using a clean template syntax
<div id="app">
{
{
message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
achieve effect
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
achieve effect
Little knowledge
new Date().toLocaleString() The default display format is yyyy-mm-dd hh:mm:ss
The default format of new Date() is Thu Mar 31 2022 14:30:20 GMT+0800 (China Standard Time)
Leave a small question for everyone, please answer in the comment area
Why does it take a few seconds to hover the mouse to view the suspended content? Is there a way to change it to hover immediately?
<div id="app-5">
<p>{
{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
The component system is another important concept in Vue because it is an abstraction that allows us to build large applications using small, independent and often reusable components. When you think about it, almost any type of application interface can be abstracted into a tree of components:
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
var app = new Vue(...)
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义 attribute。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{
{ todo.text }}</li>'
})