vue基础

v-bind:   缩写为:  用法为：v-bind：属性名=“绑定名称”   适用于组件属性的绑定 如<input type="text" v-bind:value="userName"/>

v-model：适用于数据的双向绑定，即当一个组件的初始化的值为1，在dom界面处修改组件的值后，组件的值改变为现有的值，只能在表单元素中使用，：input  text  address  email checkbox textarea ，

v-if：能够控制组件的显示和隐藏，通过绑定值的true或false，用法为<input type="text" v-if="isShow">，如果为true，则显示，如果为false，则在DOM界面删除组件

v-show:能够控制组件的显示和隐藏，通过绑定值的true或false，用法为<p v-show="isShow"></p>,如果isShow的值为true，则显示，如果为false，则在DOM界面修改组件的display的属性为none,组件不会被删除，会一直存在

v-for:多次循环

v-on：vue中的事件绑定机制，缩写为@+事件名称="触发的事件名称"  例子：<span class="user" @click="Show“”>【点击span时，触发show事件】

在vue中定义数组用【】表示，但是如果是绑定元素的属性则用{}在data处定义  for example

<template>
      <div>
        <ul v-for="item in numbers" :key="item">       
            <li>
                {{item}}                        //循环以列表的形式显示number的值
            </li>
        </ul>
        <input type="text" v-model="user" v-if="isShow" @click="show" />
        <p :style="hstle">helloWorld</p>
      </div>
</template>
<script>
  export default{
            data(){
                    numbers:[1,2,3,4,5,6],            //定义=一个数组
                    user：""
                    hstyle:{height:22px,width:13px},   //hstyle一个集合里的元素有两个
                    isShow:true
                 },
            methods:{

                        show(){
                            window.alert("good good study,day day up");   //界面上出现弹框
                }
     }
</script>

vue在vscode里的一般写发模板

如我创建一个组件名为helloWorld的组件【直接在vscode里右击添加文件即可，将后缀名改为.vue，如helloWorld.vue】