Vue——html中的基本语法

引入Vue JS文件，创建Vue实例

new Vue({
        el: '.container',//挂载实例
        data: {
            first: '初次使用Vue',
            arr: ['第一个', '第二个', '第三个'],
            show: true,
            text: '<h1>我是H1标签啊</h1>',
            className: 'active',
            isActive: true
        }
    })

1、v-model  （数据双向绑定，运用于form表单标签）

<input type="text" v-model='first'>

2、v-for  （循环，如果循环的是数组，i 值为数组的下标，如果循环的是对象，则 i 值为对象的key值，不管循环是数组还是对象，k 值都是 value，此处需要区别原生 JavaScript 的 in 关键字，在vue中，被循环的还可以是数字）

<li v-for='(k,i) in arr'>{{i}},{{k}}</li>

3、v-show  （显示隐藏，不会从DOM中移除，display:none）

<div v-show='show'>写点东西吧</div>

4、v-if  （显示隐藏，从DOM中移除）

<div v-if='show'>写点东西吧</div>

5、v-bind  （给标签属性添加变量，如果在属性值的引号里面再添加一层引号则为字符串形式，如果是一个数组，数组中的值为字符串，就会直接把value遍历出来，添加到属性的值中，可以简写为一个冒号  :  ）

<div v-bind:style='{width:"50px",height:"50px","background-color":"red"}'></div>
<div :class='["box",{active:isActive}]'></div>  //传入多个类名时使用数组，v-bind:class="{ active:true }"传入单个类名

6、v-on  （绑定事件，可以简写为 @ ，在标签中，如果没有传参的话，可以在方法中的第一个参数就是event事件，如果在方法中传参了，那么可以使用 $event来表示，该参数为event事件）

<button v-on:click='isActive=!isActive'>DIV显示隐藏切换</button>
<button @click='isActive=!isActive'>DIV显示隐藏切换</button>

7、v-text  （类似于innerText），标签内的内容将不会展示，只会展示使用v-text绑定的变量（v-html也一样）

<p v-text='text'>{{text}}</p><br>

8、v-html  （类似innerHtml）

<p v-html='text'>{{text}}</p><br>

9、动态参数，用方括号括起来的 JavaScript 表达式可以作为一个指令的参数

<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用，在vue实例中如果
含有attributeName 的属性值，那么该值就会替换attributeName ，如在data中attributeName 的值为 href ，那么上面的
表达式等同于
<a v-bind:href="url"> ... </a>