vue的基础用法

基础用法(没有搭建框架就在html文件里演示)

一、 Hello World起步

{{ msg }}

浏览器显示如图:

二、模板语法

2.1、v-html指令

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令 被插入的内容都会被当做 HTML —— 数据绑定会被忽略。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元

// 2、v-heml 指令
let app2 = new Vue({
el: '#app2',
data() {
return {
rawHtml: '

v-heml 指令:hello world

'
}
}
})
浏览器显示如图：

2.2、V-bind指令

v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。这个指令的简单含义是说： 将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。

3、v-bind指令：鼠标悬停