vue从入门到放弃

Posted 2022-12-01 胡金水

插值表达式

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>

结果：

更多文章

vue从入门到放弃（四）
vue从入门到放弃（三）
vue从入门到放弃（一）

----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------