Vue es un marco progresivo para construir interfaces de usuario
En el corazón de Vue.js hay un sistema que permite la representación declarativa de datos en el DOM utilizando una sintaxis de plantilla limpia.
<div id="app">
{
{
message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
lograr efecto
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
lograr efecto
Poco conocimiento
new Date().toLocaleString() El formato de visualización predeterminado es aaaa-mm-dd hh:mm:ss
El formato predeterminado de new Date() es Thu Mar 31 2022 14:30:20 GMT+0800 (hora estándar de China )
Deje una pequeña pregunta para todos, responda en el área de comentarios.
¿Por qué se tarda unos segundos en pasar el mouse para ver el contenido suspendido? ¿Hay alguna manera de cambiarlo para que se desplace inmediatamente?
<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('')
}
}
})
El sistema de componentes es otro concepto importante en Vue porque es una abstracción que nos permite crear grandes aplicaciones utilizando componentes pequeños, independientes y, a menudo, reutilizables. Cuando lo piensa, casi cualquier tipo de interfaz de aplicación se puede abstraer en un árbol de componentes:
// 定义名为 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>'
})