vue从入门到放弃

Posted 2021-08-30 胡庚申

插值表达式

templateDemo.vue

<template>
  <div>
    Hello World!!!
    <h1>插值表达式</h1>
    {{msg}}
    {{name}}
    {{sex == '1' ? '男':'女'}}
    <h1>指令</h1>
    <!-- 尽量少用，会解析内容，会导致xss攻击 -->
    <p v-html="content">
      默认内容
    </p>
    <!-- v-text 只替换标签内容，不会解析 -->
    <p v-text="data">
      默认内容
    </p>
    <!-- v-bind 动态属性，可以省略，即:name -->
    <!-- <p v-bind:name="myName"> 或者 <p :name="myName">-->
    <p :name="myName">
      动态属性
    </p>
  </div>
</template>

<script type="text/javascript">
export default{
  data(){
    return{
      msg:'hello world',
      name:'张三',
      sex:'1',
      content:'<i>替换内容【v-html：尽量少用，会解析内容，会导致xss攻击】</i>',
      data:'<i>替换内容【v-text】</i>',
      myName:`id-${Date.now()}`
    }
  }
}
</script>

computedDemo.vue

<template>
  <div>
    num:{{num}}<br>
    count:{{count1}}<br>
    <input type="text" v-model="count2">
  </div>
</template>

<script>
// this 指当前vue实例
// computed 1.当数据使用；2.缓存；3.依赖data而变化
export default {
  data(){
    return{
      num:2
    }
  },
  computed:{
    count1(){
      return this.num * 2
    },
    count2:{
      get(){
        return this.num * 3
      },
      set(val){
        this.num = val
      }
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
   <templateDemo/>
   <computerDemo/>
  </div>
</template>

<script>
import templateDemo from './components/baseDemo/templateDemo.vue'
import computerDemo from './components/baseDemo/computedDemo.vue'
export default {
  name: 'App',
  components: {
    templateDemo,
    computerDemo
  }
}
</script>

结果：

class和style

classStyleDemo.vue

<template>
  <div>
    <h1>class使用</h1>
    <p class="white">静态样式</p>
    <p :class="white">动态样式</p>
    <p :class="{block:myBlock}">动态样式——对象</p>
    <p :class="[white,fontBig]">动态样式——数组</p>
    <h1>style行内样式使用</h1>
    <p style="font-size:11px;color:green;">静态style</p>
    <p :style="myStyle">动态style</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      white:'my-white',
      myBlock:true ,// 控制class的值是否生效
      fontBig:'fontBig',
      myStyle:{ // key值使用驼峰形式
        fontSize:'22px',
        color:'red',
        backgroundColor:'pink'
      }
    }
  }
}
</script>

<style lang="css" scoped>
.fontBig{
  font-size: 55px;
}
.white{
  color:red;
}
.my-white{
  color:blue;
}
.block{
  color: yellow
}
</style>

App.vue

<template>
  <div id="app">
    <classStyleDemo/>
  </div>
</template>

<script>
import classStyleDemo from './components/baseDemo/classStyleDemo.vue'
export default {
  name: 'App',
  components: {
    classStyleDemo
  }
}
</script>

结果：

v-if和v-show

vifAndShowDemo.vue

<template>
  <div>
    <h1>v-if的使用</h1>
    <p v-if="num == 1">1</p>
    <p v-else-if="num == 2">2</p>
    <p v-else>3</p>
    <h1>v-show的使用</h1>
    <p v-show="num == 1">1</p>
    <p v-show="num == 2">2</p>
  </div>
</template>

<script>
// 使用场景：频繁切换，使用v-show，因为不需要频繁创建节点
export default {
  data(){
    return{
      num:3
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <vifAndShowDemo/>
  </div>
</template>

<script>
import vifAndShowDemo from './components/baseDemo/vifAndShowDemo.vue'
export default {
  name: 'App',
  components: {
    vifAndShowDemo
  }
}
</script>

结果：