Vue入门

入门命令：

双向绑定数据 v-model：

1 <!-- v-bind:只能实现数据的单项绑定，从m自动绑定到v,无法实现数据的双向绑定 -->
2 <!-- <input type="text" name="name" id="name" v-bind:value="msg" /> -->
3             
4 <!-- 使用 v-model 指令，可以实现表单元素和model中数据的双向数据绑定 -->
5 <input type="text" v-model:value="msg">

在Vue中使用样式

使用class样式

1.数组

<h1 :class="['red', 'thin']">这是一个H1</h1>

2.数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个H1</h1>

3.数组中嵌套对象

<h1 :class="['red', 'thin', {'active', isactive}]">这是一个H1</h1>

4.直接使用对象(类可以不加引号)

<h1 :class="{'red':true, 'thin':true, thin:true}">这是一个H1</h1>