Vue学习笔记

最新推荐文章于 2024-07-03 10:50:03 发布

蓝轻尘

最新推荐文章于 2024-07-03 10:50:03 发布

阅读量721

点赞数

分类专栏： 2022学习文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/sq_1224/article/details/126607934

版权

这篇博客深入探讨了Vue.js，包括Vue的基本概念、事件处理、数据双向绑定、组件、网络通信、计算属性、插槽和自定义事件。还介绍了Webpack简单实例和Vue-Router的使用，为构建Vue.js应用提供了全面的知识覆盖。

摘要由CSDN通过智能技术生成

Vue

HTML+CSS+JS：视图

网络通信：axios

页面跳转：vue-router

状态管理：vuex

Vue-UI：ICE

判断-循环

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断</title>
</head>
<body>
<div id="app">
  <h1 v-if="type==='A'">A</h1>
  <h1 v-else-if="type==='B'">B</h1>
  <h1 v-else-if="type==='C'">C</h1>
  <h1 v-else>D</h1>
</div>

<!--导入Vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  var vm=new Vue({
     
    el:"#app",
    <!--Model 数据-->
    data:{
     
      type: 'A'
    }

  });
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <li v-for="ites in items">
        {
  {ites.message}}
    </li>
</div>

<!--导入Vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    var vm=new Vue({
     
        el:"#app",
        <!--Model 数据-->
        data:{
     
            items: [
                {
     message: "星期一"},
                {
     message: "星期二"},
                {
     message: "星期三"},
                {
     message: "星期四"},
                {
     message: "星期五"},
                {
     message: "星期六"},
                {
     message: "星期天"},
            ]
        }
    });
</script>
</body>
</html>

事件

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
  <button v-on:click="sayHi">click Me</button>
  <button v-on:mouseenter="sayByeBye">拜拜</button>
</div>
<!--导入Vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  var vm=new Vue({
     
    el:"#app",
    <!--Model 数据-->
    data:{
     
      msg:"Hello Yaohua!",
      msg2:"goodBye!"
    },
    methods:{
     //方法必须定义在VUE的methods对象中
      sayHi:function () {
     
        alert(this.msg);