Vue

Vue环境搭建

1、安装Nodejs https://nodejs.org/zh-cn/

2、安装cnmp

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装vue脚手架

cnpm install --global vue-cli

Vue模板语法和数据绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 模板语法</title>
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
    <p>{{ message }}</p>
    <p>{{ hello }}</p>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? "Yes" : "No" }}</p>
    <p>{{ message.split("").reverse().join("") }}</p>
    <p v-html="rawhtml"></p>
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!',
      hello: 'demo',
      number: 10,
      ok: true,
      rawhtml: '<a href="https://blogdx.com">测试</a>'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

Vue属性绑定和样式绑定

在Vue中，属性绑定与HTML中的id和class类似，v-bind 用来动态绑定 HTML 元素的属性。它可以绑定属性值、类、样式等

v-bind绑定属性

<template>
  <div>
    <p>{{ msg }}</p>
    <img :src="imgUrl" alt="" style="width: 200px; height: auto;">
  </div>  
  <a :href="ahref">{{ msg }}</a>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
      imgUrl: "https://t00img.yangkeduo.com/chat/images/2024-08-06/89acdf13a75873cb84b523c5f4ab9884.jpeg",
      ahref:"https://blogdx.com"
    };
  }
}
</script>

v-bind绑定class

<style>
.active{
  color: red;
}
</style>


<template>
  <div>
    <h2 :class="{active: isActive,line:isLine}">{{ msg }}</h2>

    <!-- 通过数组绑定 -->
    <h2 :class="[act,lin]">{{ msg }}</h2>

    <!-- 通过方法绑定  -->
     <h2 :class="getcla()">{{ msg }}</h2>
  </div>
</template>


<script>
export default {
  data() {
    return {
      msg:"hello",
      isActive:true,
      isLine:true,
      act:"aaa",
      lin:"bbb"
    };
  },
  methods:{
    getcla:function () {
      return [this.act,this.lin]
    }
  }
}
</script>

v-bind绑定style

<template>
  <div>
    <h2>影片</h2>
    <ul>
      <li  v-for="ar in arr " :style="{fontSize:fontSize1+'px'}">{{ ar }}</li>
    </ul>
  </div>
</template>


<script>
export default {
  data() {
    return {
      msg:"hello",
      arr:['海王','海贼王','火影忍者'],
      fontSize1:50
    };
  },
}
</script>

Vue条件渲染和列表渲染

条件渲染也就是根据判断把内容呈现出来 if、else

<template>
  <div>
    <h3>条件渲染</h3>
    <div v-if="flag">显示内容</div>
    <div v-else>否则内容</div>

    <div v-if="type === 1">类型1</div>
    <div v-else-if="type === 2">类型2</div>
    <div v-else>其他类型</div>

    <h3>列表渲染</h3>
    <div v-for="(name, index) in names" :key="index">{{ name }} -- {{ index }}</div>

    <div v-for="item in items" :key="item.id">
      <p>{{ item.title }}</p>
      <img :src="item.image" alt="Item Image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      type: 1,
      names: ["张三", "李四", "王五"],
      items: [
        { id: 1, title: "商品1", image: "https://example.com/item1.jpg" },
        { id: 2, title: "商品2", image: "https://example.com/item2.jpg" }
      ]
    };
  }
};
</script>

Vue事件处理和事件传参

<template>
  <div>
    <h3>事件处理</h3>
    <button @click="incrementCount">增加计数</button>
    <p>计数: {{ count }}</p>

    <h3>事件传参</h3>
    <ul>
      <li v-for="(name, index) in names" :key="index" @click="handleClick(name, $event)">{{ name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      names: ["张三", "李四", "王五"]
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    },
    handleClick(name, event) {
      console.log(`点击了 ${name}`);
      console.log(event);
    }
  }
};
</script>

Vue计算属性

计算属性是 Vue 实例中定义的属性，它们的值是根据 Vue 实例中的其他数据属性动态计算得出的。计算属性是基于它们的依赖进行缓存的，只有当依赖的数据变化时，计算属性才会重新计算。

1、计算属性简单操作，将两个名字拼接起来

<template>
  <div>
    <p>Name: {{ fullName }}</p>
    <p>Name: {{ fullName }}</p>
    <p>Name: {{ fullName }}</p>
    <p>Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'Job',
      lastName: 'Tom'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
      // return this.firstName +' ' + this.lastName;
    }
  }
};
</script>

2、计算属性复杂操作，模拟4个数组，计算总的价格

<template>
  <div>
    <p>总价：{{ GetPrice }}</p>
    <p>总价：{{ GetPrice1() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books:[
        {id:1,name:'海贼王',price:110},
        {id:2,name:'火影忍者',price:220},
        {id:3,name:'博人传',price:231}
      ]
    };
  },
  computed:{
    GetPrice: function(){
      let result = 0
      for(let i=0;i<this.books.length;i++){
        result+=this.books[i].price
      }
      return result
    }
  },
  methods:{
    GetPrice1(){
      let result = 0
      for(let i=0;i<this.books.length;i++){
        result+=this.books[i].price
      }
      return result
    }
  }
};
</script>

计算属性 (computed)

  • 缓存机制：计算属性会缓存计算结果，直到其依赖的响应式数据发生变化。在你的示例中，GetPrice 会缓存计算结果，只有当 books 数据发生变化时，它才会重新计算。
  • 适用场景：计算属性适用于那些依赖于 Vue 实例中响应式数据的计算，并且这些计算结果可能会被频繁访问，但计算逻辑不需要在每次访问时都重新计算的场景。

方法 (methods)

  • 无缓存机制：每次调用方法时，都会重新执行方法中的逻辑。在你的示例中，GetPrice1 会每次被调用时都重新计算总价。
  • 适用场景：方法适用于那些每次调用都需要执行某些操作的场景，尤其是当计算结果不需要缓存时。
Last modification：October 8, 2025
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏