vue tooltip动态绑定提示信息_Vue.js常用语法全面解析

Vue.js常用语法

数据渲染

• 使用最频繁的就是{{}}绑定渲染数据了

{{ message }}

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})

直接将data渲染到页面上。

• 另一种渲染数据的方式是v-model，使用v-model可以轻松地实现数据和页面的双向绑定

{{ message }}

var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' }})

• 有了v-model就不得不提v-text了，v-text也是用来渲染页面数据，但是只能用来渲染字符串

• 还有一个数据渲染的用法是v-html，用于直接渲染html代码

• 使用v-bind绑定数据

鼠标悬停几秒钟查看此处动态绑定的提示信息！

var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() }})

当然我们也可以直接将v-bind省略掉：

鼠标悬停几秒钟查看此处动态绑定的提示信息！

省略v-bind直接使用:来绑定数据。

动态渲染

• 使用v-if动态展示页面元素

现在你看到我了

var app3 = new Vue({ el: '#app-3', data: { seen: true }})

• 有了v-if必然少不了v-show，v-show也可以用来动态展示页面元素。

现在你看到我了

v-show与v-if的区别在于，v-if在元素隐藏时会直接销毁元素，而v-show只是使用了hidden属性将元素隐藏。

• 使用v-for循环

{{ todo.text }}

var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] }})

事件

• 绑定点击事件@click

{{ message }}

逆转消息

var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } }})

感谢您的关注~