Vue学习之路

准备工作

安装vue

npm install -g @vue/cli

测试安装

vue --version

创建项目

vue create vue-demo

模板语法

<template>
  <h3>模板语法</h3>
  <p>{{msg}}</p>
  <p>{{hello}}</p>
  <p>{{number+1}}</p>
  <p v-html="rawHtml"></p>
</template>

<script>
export default {
  data(){
    return {
      msg:"神奇的语法",
      hello:"hello World",
      number:10,
      rawHtml:"<a href='https://baidu.com'>百度</a>"
    }
  }
}
</script>

通过 {{}} 来显示，里边可加单行的逻辑也可以加属性

属性绑定

<template>
  <div v-bind:class="Class" v-bind:id="ID">{{Hello}}</div>
  <button :disabled="IsButtonDisabled" :class="BtnClass">Button</button>
  <div v-bind="objectAttr">DIV content</div>
</template>

<script>
export default{
  data(){
    return{
      Class:"active",
      Hello:"Hello World",
      ID:"dynamicId",
      IsButtonDisabled:"true",
      BtnClass:"btnclass",
      objectAttr:{
        id:"appId",
        class:"appClass"
  }

    }
  }
}
</script>
<style>
  .active{
    color: antiquewhite;
    font-size: large;
  }
  .btnclass{
    color: white;
  }
</style>

使用 v-bind: 进行属性渲染，也可以直接用 :

条件绑定

v-if

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">see see me</div>
</template>

<script>
export default {
    data(){
        return{
            flag:true
        }
    }
}
</script>

flag 为 true 时候显示，false时不显示

v-else

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">see see me</div>
    <div v-else>see see you</div>
</template>

<script>
export default {
    data(){
        return{
            flag:false
        }
    }
}
</script>

v-if 不显示时， v-else 显示

v-else-if

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">see see me</div>
    <div v-else>see see you</div>
    <div v-if="type==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else-if="type==='C'">C</div>
    <div v-else> Not ABC </div>
</template>

<script>
export default {
    data(){
        return{
            flag:true,
            type:'D'
        }
    }
}
</script>

v-show

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">see see me</div>
    <div v-else>see see you</div>
    <div v-if="type==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else-if="type==='C'">C</div>
    <div v-else> Not ABC </div>
    <div v-show="flag">Can can him</div>
</template>

<script>
export default {
    data(){
        return{
            flag:true,
            type:'D'
        }
    }
}
</script>

与 v-if 类似

v-show 不管flase还是true 都会渲染，而 v-if 只看条件，如果为真才渲染

列表渲染